Skip to content
simple tab widget for jQuery mobile

Creates simple tabs.

  • Uses widget factory
  • Follows normal jQuery mobile standards
  • Implemented in a non-obtrusive way
  • Programmed like a true jQuery novice :)


First off, realize that this is a VERY rudimentary widget plugin, and that its use is fairly specific, meaning that I've only tested it one way, with the following caveats:

  • Does not load any content via AJAX
  • Does not load any different actual page parts, and depends on user doing some css in order to make some block-level items display as they would normally in
  • Tab bar must be located in the header
  • Content panels must be inside of the content area
  • I hope to improve this sometime, or maybe the team will be able to use what I've got here to make something awesomer.

This being said, here's a sample of the usage:

<div data-role="page" id="page-title">
    <div data-role="header">
        <h1><%= @page_title %></h1>
        <div data-role="tabs">
                <li><a href="#tab-1" class="">Tab 1</a></li>
                <li><a href="#tab-2" class="">Tab 2</a></li>

    <div data-role="content">
        <ul id="tab-1">
            <li>First thing</li>
            <li>Second Thing</li>

        <div id="tab-2">
            <h2>Here is the second tab</h2>
Something went wrong with that request. Please try again.