<!-- Start of first page: #one -->
<div data-role="page" id="one" data-theme="$${JQMTheme|'c'}">
    <div data-role="header" data-theme="$${JQMTheme|'a'}">
        <h1>Multi-Page Application</h1>
    </div><!-- /header -->

    <div data-role="content" data-theme="$${JQMTheme|'c'}">
        <h2>One</h2>
        <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.
        </p>
        <p>
            You link to internal pages by referring to the ID of the page you
            want to show. For example, to <a href="#two">link</a> to the page
            with an ID 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-position="fixed" data-theme="$${JQMTheme|'a'}">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page one -->


<!-- Start of second page: #two -->
<div data-role="page" id="two" data-theme="$${JQMTheme|'c'}">
    <div data-role="header" data-theme="$${JQMTheme|'a'}">
        <h1>Two</h1>
    </div><!-- /header -->

    <div data-role="content" data-theme="$${JQMTheme|'c'}">
        <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">Back to page "one"</a>
        </p>
    </div><!-- /content -->

    <div data-role="footer" data-position="fixed" data-theme="$${JQMTheme|'a'}">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page two -->


<!-- Start of third page: #popup -->
<div data-role="page" id="popup" data-theme="$${JQMTheme|'c'}">
    <div data-role="header" data-theme="$${JQMTheme|'a'}">
        <h1>Dialog</h1>
    </div><!-- /header -->

    <div data-role="content" data-theme="$${JQMTheme|'c'}">
        <h2>Popup</h2>
        <p>
            I have an id of "popup" on my page container and only look like a
            dialog because the link to me had a
            <code>data-rel="dialog"</code>
            attribute which gives me this inset look and a
            <code>data-transition="pop"</code>
            attribute to change the transition to pop. Without this, I'd be
            styled as a normal page.
        </p>
        <p>
            <a href="#one" data-rel="back" data-role="button" data-inline="true"
                data-icon="back">Back to page "one"</a>
        </p>
    </div><!-- /content -->

    <div data-role="footer" data-position="fixed" data-theme="$${JQMTheme|'a'}">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page popup -->