如何使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移動標籤頁頭固定

回答

相關問題