Geek Answers Handbook

JQuery Mobile Reusing Header and Navigation

I am new to jQuery Mobile and have problems understanding header reuse and general navigation.

So, I created a title that has a menu button on the right. When you click this menu bar, a pop-up window appears with links to other pages:

<div data-role="header"> <h1>Home</h1> <a href="#popupMenu" data-rel="popup" data-transition="slide" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-bars ui-btn-icon-right ui-btn-a">Menu</a> <div data-role="popup" id="popupMenu" data-theme="a" style="top: 22px; right: -12px"> <ul data-role="listview" data-inset="true" style="min-width:250px; min-height: 698px;"> <li><a href="test1.html">Home</a></li> <li><a href="test2.html">Second</a></li> </ul> </div> </div>

I can duplicate this code on all pages, but from what I briefly read, jQuery does this automatically for me. It's true. If not, then how to do it.

Following this question, when it comes to navigating pages and reusing headings, is a href standard way to load new pages?

Any help would be appreciated.

Thanks.

+6
source share
1 answer

You can use the external title and popup and make them accessible from any page.

Place both divs separately inside the body not inside any other page. Make sure you do not wrap the Popup div in any other div / container but body .

 <body> <div data-role="header" data-theme="a"> </div> <div data-role="popup"> </div> <div data-role="page"> </div> </body>

Since both are external widgets, you need to initialize them manually. Call .toolbar() to initialize the header and .popup() to initialize the popup. If Popup contains other jQM widgets, for example. listview, you need to call .enhanceWithin() to initialize the widgets inside the popup. just add the code below head .

 $(function () { $("[data-role=header]").toolbar(); /* initialize header */ $("[data-role=popup]").popup().enhanceWithin(); /* initialize popup */ });

Demo

+12
source

More articles:


All Articles