與HTML 5次使用jQuery移動導航欄

Question

我想用jQuery的導航欄在我的應用程序，我有需要使用jQuery Mobile的三個導航buttons.I'm鏈接三個視圖1.4

可以檢查我的工作示例在這裏：http://jsfiddle.net/46Wax/

<div data-role="page"> 
    <div data-rode="header"> 
     <h3>My Header</h3> 
    <div>  
    <div data-role="content"> 
     <div data-role="view" id="viewOne"> 
      View One 
     </div> 
     <div data-role="view" id="viewTwo"> 
      View Two 
     </div> 
     <div data-role="view" id="viewThree"> 
      View Three 
     </div > 
    </div>  
    <div data-role="footer" style="overflow:hidden;"> 
      <div data-role="navbar"> 
      <ul> 
       <li><a href="#viewOne">One</a></li> 
       <li><a href="#viewTwo">Two</a></li> 
       <li><a href="#viewThree">Three</a></li> 
      </ul> 
     </div> 
    </div> 
<div> 

現在所有三種視圖顯示在一個窗口，我要顯示的每個視圖時上的導航按鈕的用戶點擊，任何人都可以引導我找到這個妥善的解決辦法？

預先感謝您

Answer 1

如果導航欄並不一定要在頁腳，你可以使用標準的標籤小部件JQM 1.4提供：

http://demos.jquerymobile.com/1.4.0/tabs/

另一種選擇是有每個tabview都是一個單獨的頁面，只需將按鈕導航到這些頁面即可。

爲了讓你有什麼工作，你可以簡單地添加一些JavaScript處理該按鈕的點擊和隱藏/顯示相應的看法：

這裏是一個工作DEMO

在pagecreate，隱藏2個視圖，以便只顯示默認的視圖，然後爲按鈕添加一個點擊處理程序。在我的情況下，我添加了一個類到所有的按鈕和另一個類到所有的視圖。點擊處理程序首先隱藏所有視圖，然後解析按鈕的href屬性以查看應顯示哪個視圖：

$(document).on("pagecreate", "#page1", function(){ 
    //start with only viewone visible 
    $("#viewTwo, #viewThree").hide(); 

    $(".tabButton").on("click", function(){ 
     $(".tabView").hide(); 
     var href = $(this).prop("href"); 
     $(href.substr(href.indexOf('#'))).show(); 
    }); 
});