jQUery Mobile shared header and footer

Question

I'm creating a phonegap app and i'm trying to share the header and footer code between all of the pages. I want to use the internal linking in jqm but their guides say have a header content and page per sub page such as:

<div data-role="page" id="one">

    <div data-role="header">
        <h1>Multi-page</h1>
    </div><!-- /header -->

    <div data-role="content" >  
        <h2>One</h2>

        <p>I have an <code>id</code> of "one" on my page container. I'm first in the source order so I'm shown when the page loads.</p> 

        <p>This is a multi-page boilerplate template that you can copy to build your first jQuery Mobile page. This template contains multiple "page" containers inside, unlike a <a href="page-template.html"> single page template</a> that has just one page within it.</p>  
        <p>Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.</p>
        <p>You link to internal pages by referring to the <code>id</code> of the page you want to show. For example, to <a href="#two" >link</a> to the page with an <code>id</code> of "two", my link would have a <code>href="#two"</code> in the code.</p>   

        <h3>Show internal pages:</h3>
        <p><a href="#two" data-role="button">Show page "two"</a></p>    
        <p><a href="#popup" data-role="button" data-rel="dialog" data-transition="pop">Show page "popup" (as a dialog)</a></p>
    </div><!-- /content -->

    <div data-role="footer" data-theme="d">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page one -->


<!-- Start of second page: #two -->
<div data-role="page" id="two" data-theme="a">

    <div data-role="header">
        <h1>Two</h1>
    </div><!-- /header -->

    <div data-role="content" data-theme="a">    
        <h2>Two</h2>
        <p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>   
        <p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.</p>  
        <p><a href="#one" data-direction="reverse" data-role="button" data-theme="b">Back to page "one"</a></p> 

    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page two -->

Which is fine...but I want to use the same data-role footer and header for each page. Seems pointless copying the same code (as the design etc is the same on every page?). This is for a phonegap application and every page has a lot of html so that will be a silly lot of duplcation (pull out menus etc)

What's the correct way to do this? My idea is something like:

<div data-role="page" id="bar">

    <div data-role="header">
        <h1>Bar</h1>
    </div><!-- /header -->

    <div data-role="content" page=1>    
        <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>      
        <p><a href="#foo">Back to foo</a></p>   
    </div><!-- /content -->

    <div data-role="content" page=2>    
        <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>      
        <p><a href="#foo">Back to foo</a></p>   
    </div><!-- /content -->

    <div data-role="content" page=3>    
        <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>      
        <p><a href="#foo">Back to foo</a></p>   
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

Answer 1

jQuery Mobile defines page structure which include page wrapper div[data-role=page] So if you want to use it common header or footer for all pages, then you need to inject header/footer elements dynamically to your current page. U can do by using jquery library methods for appending the element in the page. Here some example

var currentPage=$.mobile.activePage;

$('<div data-role="header" id="myheader">
        <a href="" >Home</a>
        <a href="" >Back</a>
    </div>').prependTo(currentPage);

$('<div data-role="footer" id="myfooter">
        <a href="">About Us</a>
    </div>').appendTo(currentPage);

You may call trigger create event or refresh event in jquery mobile for enhancing the elements.