A recent addition to jQuery Mobile is actually a feature of a sister project, jQuery UI (http://www.jqueryui.com). The tabs widget follows the same format and usage as it does in jQuery UI, so we'll focus on the differences of the widget in jQuery Mobile.
Tabs consist of a list of tabs that serve as the labels for each particular tabbed display. For each tab panel, a
div is created to host the content. The code in
Listing 7-10 shows an initial example:
Listing 7-10: tabs.html <div role="main" class="ui-content"> <div data-role="tabs"> <ul> <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> </ul> <div id="tab1"> <p> This is the first tab. </p> <...