Geek Answers Handbook

Keep navigation bar on all pages with jQuery Mobile

I am currently creating a phonegap application using jQuery mobile framework.

I have several pages, for example:

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

I want to have a navigation bar on every page and save it without duplication on every page (home, settings ...), and I don’t know why I can’t do this (for example, include header.html? Or set the navigation in the global layout ?). I am browsing in my application using the link between pages

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

How can I do for my navigator?

Thanks,

+4
source share
2 answers

Try this post, it adds a common footer to all pages from a shared 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() }); });

See this post for more information - jQuery Mobile Same Footer on different pages

+5
source

Each data-role="page" must repeat the navbar element. e.g. Js Fiddle Work Out

or, as dhaval suggested, paste it on each page using ajax: but you win little if you have many tabs

Js fiddle work out

+1
source

More articles:


All Articles