Как сделать jQuery мобильным заголовком вкладки фиксированным

Question

Iam, используя функцию вкладки jQuery-mobile для моего приложения. я добавил представление списка внутри этой вкладки, теперь мне нужно, чтобы заголовок вкладки был исправлен, так что даже когда я прокручиваю вниз, я могу видеть заголовки вкладок. какое-либо решение? ..

<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> 

Answer 1

Сама вкладка виджет непосредственно не поддерживает это, но вы можете сделать это самостоятельно с не слишком много кодирования. Во-первых, установить заголовок страницы, как data-position="fixed" и переместить кнопки табуляции в заголовок:

<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> 

внимание Также я назначен ВПО класс tabButton для всех кнопок, чтобы дать нам простой селектор.

Далее дайте все содержимое вкладки DIVs класс tabView, чтобы дать нам еще один простой селектор.

<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> 

Теперь в pagecreate обработчик, сначала удалить активные классы из всех кнопок вкладки и скрыть все tabviews, то выберите вид по умолчанию (вкладка один в моем примере) и показать его и выделить соответствующую кнопку. Наконец, добавьте обработчик щелчка для всех кнопок на вкладке, чтобы показать правильный вид при нажатии вкладки щелкают:

$(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; 
    }); 
}); 

Вот рабочая DEMO

Tab 2 имеет длинное содержимое