如何在導航欄中使用持久標題時實施滑動操作

Question

在我的Android JQM應用程序中，我在navbar中有5個標籤頁的標籤版式。每個選項卡都像一個持久標題。以下是第二個選項卡的代碼。
現在我怎樣才能實現跨多個標籤刷卡？

<div data-role="header" data-position="fixed" data-id="headernav"> 
    <h1>Header1</h1> 
    <a href="index.html" class="ui-btn-left" data-icon="home">Home</a> 
    <div data-role="navbar"> 
     <ul> 
      <li> 
       <a href=" Description.html" data-transition="slide" ><b>Description </b></a> 
      </li> 
      <li> 
       <a href="illustration3.html" data-transition="slide" class="ui-btn-active ui-state-persist" ><b>Illustration</b></a> 
      </li> 
      <li> 
       <a href=" Complications.html" data-transition="slide" ><b>Complications</b></a> 
      </li> 
      <li> 
       <a href="Indications.html" data-transition="slide" ><b>Indications</b></a> 
      </li> 
      <li> 
       <a href="Equipment.html" data-transition="slide"><b>Equipment</b></a> 
      </li> 
     </ul> 
    </div> 
</div> 

Answer 1

您可以使用swipeleft和swiperightevents像這樣：

function changeNavTab(left) { 
    var $tabs = $("div[data-role=navbar] li a", $("div[data-role=page].ui-page-active")); 
    var curidx = $tabs.closest("a.ui-btn-active").parent().index(); 
    var nextidx = 0; 
    if (left){ 
     nextidx = (curidx == $tabs.length - 1) ? 0 : curidx + 1; 
    } else { 
     nextidx = (curidx == 0) ? $tabs.length - 1 : curidx - 1; 
    } 
    $tabs.eq(nextidx).click(); 
} 

$("div[data-role=content]").on("swipeleft", function(event){ 
    changeNavTab(true); 
}); 

$("div[data-role=content]").on("swiperight", function(event){ 
    changeNavTab(false); 
}); 

工作示例（的jsfiddle）是here