How to keep same header/footer across pages in jQueryMobile?

Question

Is there an easy method to keep the same header/footer while navigating jQueryMobile pages? The only solutions I came across so far relies on injecting it dynamicly on page-

Answer 1

The easiest way is to add a "data-id" attribute to the headers and footers on all pages. To make the header/footer "persistent", use the same data-id across all pages.

 

 ...
 




 

 ...
 

You'd also want to fix the headers and footers either with css or data-position="fixed".

Hope this helps.