Skip to content Skip to sidebar Skip to footer

Jquery Mobile Reusing A Header And Navigation

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 th

Solution 1:

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><divdata-role="header"data-theme="a"></div><divdata-role="popup"></div><divdata-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

Post a Comment for "Jquery Mobile Reusing A Header And Navigation"