Use Jquery mobile Navbar with html 5 views

Question

I would like to use jquery navigation in bar in my app,I have three views which need to link with three navigation buttons.I'm using jquery mobile 1.4

you can check my working example in here : 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>

Now all three views show in one window, I want to show each view when user click on the navigation button, could anyone guide me to find proper solution to this?

Thank you in advance

Answer 1

If the navbar does not have to be in the footer, you could use the standard tabs widget provided in jQM 1.4:

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

Another option is to have each tabview be a separate page and just have your buttons navigate to those pages.

To make what you have work, you can simply add some javascript that handles the button clicks and hides/shows the appropriate views:

Here is a working DEMO

On pagecreate, hide 2 of the views so only the default one is visible, then add a click handler for the buttons. In my case I added a class to all the buttons and another class to all the views. The click handler first hides all views, and then parses the href property of the button to see which view should be shown:

$(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();
    });
});