使用帶有html 5視圖的Jquery移動Navbar

Question

我想在我的應用程序的欄中使用jquery導航，我有三個視圖需要鏈接三個導航按鈕。我正在使用jquery mobile 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();
    });
});