Reputation: 1240
Iam using jquery-mobile tab feature for my application. i have added a list view inside those tab, i now need to make the header of the tab to be fixed, so that even when i scroll down i can see the tab titles. any solutions?..
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li><a href="#one" data-ajax="false">one</a></li>
<li><a href="#two" data-ajax="false">two</a></li>
<li><a href="ajax-content.html" data-ajax="false">three</a></li>
</ul>
</div>
<div id="one" class="ui-body-d ui-content">
<h1>First tab contents</h1>
</div>
<div id="two">
<ul data-role="listview" data-inset="true">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>
</div>
</div>
Upvotes: 0
Views: 2143
Reputation: 24738
The tabs widget itself does not directly support this, but you can do it yourself with not too much coding. First, set the page header as data-position="fixed"
and move the tab buttons into the header:
<div data-role="header" data-position="fixed">
<h1>My page</h1>
<div data-role="navbar" id="navbar" data-iconpos="top" >
<ul>
<li><a href="#one" class="tabButton" >one</a></li>
<li><a href="#two" class="tabButton">two</a></li>
<li><a href="#three" class="tabButton">three</a></li>
</ul>
</div>
</div>
Also note I hve assigned a class of tabButton
to all the buttons to give us an easy selector.
Next give all the tab content DIVs a class of tabView
to give us another easy selector.
<div data-role="tabs" id="tabs" >
<div id="one" class="ui-body-d ui-content tabView">
<h1>First tab contents</h1>
</div>
<div id="two" class="tabView">
...
</div>
</div>
Now in the pagecreate
handler, first remove active classes from all tab buttons and hide all tabviews, the select the default view (tab one in my example) and show it and highlight the corresponding button. Finally, add a click handler to all tab buttons to show the correct view when a tab button is clicked:
$(document).on("pagecreate", "#page1", function(){
//start with only viewone visible
$(".tabButton").removeClass("ui-btn-active");
$(".tabView").hide();
$(".tabButton").eq(0).addClass("ui-btn-active");
var viewHref = $(".tabButton").eq(0).prop("href");
$(viewHref.substr(viewHref.indexOf('#'))).show();
$(".tabButton").on("click", function(){
$(".tabButton").removeClass("ui-btn-active");
$(".tabView").hide();
var href = $(this).prop("href");
$(href.substr(href.indexOf('#'))).show();
$(this).addClass("ui-btn-active");
return false;
});
});
Here is a working DEMO
Tab 2 has the long content
Upvotes: 1