CODEWITHSUNDEEP
jquery-mobile
homelessDevOps
homelessDevOps

Reputation: 20726

JQuery Mobile - fixed Navigation in Multi-Page template

Does i realy have to repeat the "Navbar" on every page DIV? Or is there an solution to use only one footer for all pages inside an multi-page html?

 <div data-role="page" id="page11">
        <div data-role="header"> <h1>Home</h1> </div>

        <div data-role="content"> <h3>TEST</h3>
            <p> <a href="#dialog" data-rel="dialog" data-transition="pop" data-role="button">Dialogbox </a> </p>
        </div>

        <div data-role="footer" data-id="foo1" data-position="fixed"> 
            <div data-role="navbar">
                <ul>
                    <li> <a href="#page1" data-iconpos="top" data-icon="home">Start </a> </li>
                    <li> <a href="#page2" data-iconpos="top" data-icon="help">Hilfe </a> </li>
                </ul>
            </div> 
        </div>
    </div>

    <div data-role="page" id="page2">
        <div data-role="header"> <h1>Hilfe </h1> </div>
        <div data-role="content"> <h3>TEST </h3> </div>

         <div data-role="footer" data-id="foo1" data-position="fixed"> 
            <div data-role="navbar">
                <ul>
                    <li> <a href="#page1" data-iconpos="top" data-icon="home">Start </a> </li>
                    <li> <a href="#page2" data-iconpos="top" data-icon="help">Hilfe </a> </li>
                </ul>
            </div> 
        </div>
    </div>

Thx for any ideas!

Upvotes: 2

Views: 4957

Answers (2)

igr
igr

Reputation: 4976

NO, in later jqm versions, e.g. version 1.4.0, you do not need to include a navbar inside each of your page-DOM-elements.

Here is an example of a navbar that appears on all pages, and is only included once, outside page-elements: http://demos.jquerymobile.com/1.4.0/toolbar-fixed-persistent/

Basically, you just need to add data-position="fixed" to the header/footer, and initiate the toolbar with:

$(function() {
    $( "[data-role='navbar']" ).navbar();
    $( "[data-role='header'], [data-role='footer']" ).toolbar();
});

Upvotes: 2

hgross
hgross

Reputation: 690

Yes, your navbar/footer/header must be present in all of your page-DOM-elements. But to avoid repeating yourself you have many options on the client and/or server side. I always recommend to use some kind of templating in such situations.

On the client side you could place your navbar into a <script> tag beneath the <body> tag. Assign an unique id attribute to this script tag and add some JavaScript like this:

Template Snippet:

<script type="text/template" id="myFooterTemplateID">
    <div data-role="footer" data-id="foo1" data-position="fixed"> 
        <div data-role="navbar">
            <ul>
                <li> <a href="#page1" data-iconpos="top" data-icon="home">Start </a> </li>
                <li> <a href="#page2" data-iconpos="top" data-icon="help">Hilfe </a> </li>
            </ul>
        </div> 
    </div>
</script>

JavaScript:

jQuery('*[data-role="page"]').on("pagebeforecreate", function(e) {
    var page = jQuery(this);
    // please replace this part with a template engine ...
    var header = jQuery(jQuery("#myFooterTemplateID").html()); 

    // bind some events to the header's content here - if any
    // for example: 
    // header.find('.myButtonClass').bind('tap', onButtonClicked);

    // append to page
    page.append(header);
});

Check out Handlebars.js or Underscore-Templates for production ready JS-templating instead of writing your own library.

Upvotes: 2

Related Questions