css - 如何使 jquery 移动选项卡标题固定

Question

我正在为我的应用程序使用 jquery-mobile 选项卡功能。我在这些选项卡中添加了一个 ListView ，我现在需要固定选项卡的标题，这样即使我向下滚动也能看到选项卡标题。任何解决方案？..

 <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 处理程序中，首先从所有选项卡按钮中删除事件类并隐藏所有选项卡 View ，然后选择默认 View (在我的示例中为选项卡一)并显示它并突出显示相应的按钮。最后，向所有选项卡按钮添加点击处理程序，以便在单击选项卡按钮时显示正确的 View :

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