CODEWITHSUNDEEP
cssjquery-mobiletabs
Manjesh V
Manjesh V

Reputation: 1240

how to make jquery mobile tab header as fixed

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

Answers (1)

ezanker
ezanker

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

Related Questions