4

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,

alexmngn
  • 9,107
  • 19
  • 70
  • 130
  • see my answer: http://jsfiddle.net/ca11111/CxFWh/7/ will insert a navbar based on a navbar string, you can equally use a navbar.html file containing this string (not doable on jsfiddle through) –  Jun 26 '12 at 05:27

2 Answers2

6

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

Community
  • 1
  • 1
dhaval
  • 7,611
  • 3
  • 29
  • 38
  • Great! But how to do that while keeping it persistent to the page? Like [this](http://demos.jquerymobile.com/1.3.0-rc.1/docs/demos/widgets/navbar/footer-persist-a.html)? – zok May 07 '14 at 18:49
  • Also, what is the purpose of the `navbar()` function? – zok May 07 '14 at 19:58
1

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

RajeshKdev
  • 6,365
  • 6
  • 58
  • 80