使用带有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();
    });
});