html - jQuery Mobile Reusing a Header and Navigation -
i'm new jquery mobile , have having issues understanding reusing header , general navigation.
so i've created header has menu button on right. on clicking menu bar popup appears links 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 code across pages i've briefly read jquery me automatically. true. if not how to.
following question when comes navigating pages , reusing headers a href standard way load new pages?
any appreciated.
thanks.
you can use external header , popup , have them accessible page.
place both div separately inside body not inside other page. make sure don't wrap popup div in other div/container body.
<body> <div data-role="header" data-theme="a"> </div> <div data-role="popup"> </div> <div data-role="page"> </div> </body> since both external widgets, need initialize them manually. call .toolbar() initialize header, , .popup() initialize popup. if popup contains other jqm widgets e.g. listview, need call .enhancewithin() initialize widgets inside popup. add below code in head.
$(function () { $("[data-role=header]").toolbar(); /* initialize header */ $("[data-role=popup]").popup().enhancewithin(); /* initialize popup */ });
Comments
Post a Comment