Keep navbar on all pages with jQuery Mobile

Question

I'm currently creating phonegap app using jquery mobile framework.

I have multiple pages, like this :

• index.html (global layout)
• home.html (home page)
• settings.html (settings page)
• ...

I want to have the navbar on every page, and keep it without duplicate it on every page (home, settings...) and I don't know why I can't do that (like include header.html ? or set navbar in global layout ?). I browse in my app using link between pages

<a href="home.html" data-transition="slide">Home</a>

How can I do for keep my navbar ?

Thanks,

Answer 1

Try this post, it appends a common footer to all the pages form a common html file.

$('[data-role=page]').live('pageshow', function (event, ui) {
     $("#" + event.target.id).find("[data-role=footer]").load("footer.html", function(){
           $("#" + event.target.id).find("[data-role=navbar]").navbar()
     });
});

For more info refer this post - Jquery Mobile Same Footer on Different Pages

Answer 2

You must have the navbar element repeated in each data-role="page". like this Js Fiddle Work Out

or as suggested by dhaval, insert it on every page via ajax: but you don't gain much except if you have many tabs

Js Fiddle Work Out