Question

我在我的应用程序中使用jquery-mobile tab功能。我已经在这些选项卡中添加了一个列表视图，我现在需要修改选项卡的标题，这样即使我向下滚动我也能看到标题标题。任何解决方案？..

 <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类，以便为我们提供简单的选择。

接下来，为所有标签内容DIV提供一个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处理程序中，首先从所有选项卡按钮中删除活动类并隐藏所有选项卡视图，选择默认视图（在我的示例中为选项卡）并显示它并突出显示相应的按钮。最后，向所有选项卡按钮添加一个单击处理程序，以在单击选项卡按钮时显示正确的视图：

$(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的内容很长

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

1 个答案: