帶有與Google Play商店類似的jQuery移動版的導航標籤

Question

如何使用類似於Google Play商店的jQuery移動版來執行此類導航標籤？

Answer 1

您可以使用刷卡事件和你的HTML使用切換，或使用$ .mobile.changePage（URL），例如

$('div[data-role=page]').on('swipeleft, swiperight ', go); 

function go(event) { 
    switch(event.type) { 
     case 'swiperight': 
      console.log('swiperight'); 
      $('#divid2,#divid3').toggle(false); 
      $('#divid1').toggle(true); 
      break; 
     case 'swipeleft': 
      console.log('swipeleft'); 
      $('#divid1,#divid2').toggle(false); 
      $('#divid3').toggle(true); 
      break; 
    } 
} 

類似的東西或部件之間用jQuery動態切換你可以使用jquery animate來淡出html部分，或者使用$ .mobile.changePage（url），它可以在不同的頁面之間切換，如果你有相同的頁眉和頁腳，它將看起來像標籤。

Answer 2

<div id="home" data-role="page"> 
    <div data-role="header"> 
     <h1>Home</h1> 
    </div> 
    <div data-role="content"> 
     <p> 
      <a href="#page-1">Page 1</a> 
     </p> 
    </div> 
</div> 

<div id="page-1" data-role="page"> 
    <div data-role="header"> 
     <a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide" data-direction="reverse">Back</a> 
     <h1>Page 1</h1> 
    </div> 
    <div data-role="content"> 
     <p>Page 1 content</p> 
    </div> 
    <div data-role="footer" data-position="fixed"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="#page-1" data-role="tab" data-icon="grid" class="ui-btn-active">Page 1</a></li> 
       <li><a href="#page-2" data-role="tab" data-icon="grid">Page 2</a></li> 
       <li><a href="#page-3" data-role="tab" data-icon="grid">Page 3</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

<div id="page-2" data-role="page"> 
    <div data-role="header"> 
     <a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide" data-direction="reverse">Back</a> 
     <h1>Page 2</h1> 
    </div> 
    <div data-role="content"> 
     <p>Page 2 content</p> 
    </div> 
    <div data-role="footer" data-position="fixed"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="#page-1" data-role="tab" data-icon="grid">Page 1</a></li> 
       <li><a href="#page-2" data-role="tab" data-icon="grid" class="ui-btn-active">Page 2</a></li> 
       <li><a href="#page-3" data-role="tab" data-icon="grid">Page 3</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

<div id="page-3" data-role="page"> 
    <div data-role="header"> 
     <a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide" data-direction="reverse">Back</a> 
     <h1>Page 3</h1> 
    </div> 
    <div data-role="content"> 
     <p>Page 3 content</p> 
    </div> 
    <div data-role="footer" data-position="fixed"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="#page-1" data-role="tab" data-icon="grid">Page 1</a></li> 
       <li><a href="#page-2" data-role="tab" data-icon="grid">Page 2</a></li> 
       <li><a href="#page-3" data-role="tab" data-icon="grid" class="ui-btn-active">Page 3</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

jQuery的

$("a[data-role=tab]").each(function() { 
    var anchor = $(this); 
    anchor.bind("click", function() { 
     $.mobile.changePage(anchor.attr("href"), { 
      transition: "none", 
      changeHash: false 
     }); 
     return false; 
    }); 
}); 

$("div[data-role=page]").bind("pagebeforeshow", function (e, data) { 
    $.mobile.silentScroll(0); 
    $.mobile.changePage.defaults.transition = 'slide'; 
}); 

如需進一步信息查詢

http://jquerymobile.com/demos/1.2.0/docs/toolbars/docs-navbar.html