Skip to content
simple tab widget for jQuery mobile
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

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.