jQuery Mobile Reusing a Header and Navigation

Question

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 righ

Answer 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.

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