Menu
I'm new to jQuery Mobile and have having issues understanding reusing a header and general navigation.
So I've created a header which has a menu button on the right. On clicking this menu bar a popup 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 across all pages but from what I've briefly read jQuery does that for me automatically. Is this true. If not how do i get it to.
Following from this question when it comes to navigating pages and reusing headers is the a href the standard way to do load new pages?
Any help would be appreciated.
Thanks.
238
You can use External Header and Popup and have them accessible from any page.
Place both div separately inside body not inside any other page. Make sure you don't wrap 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 Header, and .popup() to initialize Popup. If Popup contains other jQM widgets e.g. listview, you need to call .enhanceWithin() to initialize widgets inside Popup. just add the below code in head.
$(function () {
$("[data-role=header]").toolbar(); /* initialize header */
$("[data-role=popup]").popup().enhanceWithin(); /* initialize popup */
});
Demo
76
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
