如何使jquery移动标签页头固定

Iam使用jquery-mobile标签功能为我的应用程序。我在这些选项卡中添加了一个列表视图，现在我需要使标签的标题被固定，以便即使当我向下滚动时，我可以看到选项卡标题。任何解决方案？..如何使jquery移动标签页头固定

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

来源

2014-10-31 Manjesh V

你可以把所有的js小提琴？所以我们可以快速发布解决方案 – PaoloCargnin 2014-10-31 11:30:12

标签小部件本身不直接支持这一点，但你可以自己做，不要太多的编码。首先，设置页面标题为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>

另外请注意我HVE分配类的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

标签2具有长期的内容

来源

2014-10-31 14:30:42 ezanker

如何使jquery移动标签页头固定

回答

相关问题