<!-- Start of first page: #one -->
<div data-role="page" id="one">
    <div data-role="header" data-position="fixed">
        <h1>Multi-Page Application</h1>
    </div><!-- /header -->

    <div data-role="content">
        <h2>One</h2>
        <p>
            This is a multi-page boilerplate template that you can copy to build
            your first Tizen Web UI Framework 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-position-to="window" data-rel="popup">Show page "popup" (as a dialog)</a></p>

        <div id="popup" data-role="popup" data-style="center_title_1btn">
            <div class="ui-popup-title">
                <h1>Popup title</h1>
            </div>
            <div class="ui-popup-text">Pop-up dialog box, a child window that blocks user interact to the parent windows</div>
            <a href="#" data-inline="true" data-role="button" onclick="javascript:$('#popup').popup('close');">Close</a>
        </div>
    </div><!-- /content -->

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


<!-- Start of second page: #two -->
<div data-role="page" id="two">
    <div data-role="header" data-position="fixed">
        <h1>Two</h1>
    </div><!-- /header -->

    <div data-role="content">
        <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><a href="#one" data-direction="reverse" data-role="button">Back to page "one"</a></p>
    </div><!-- /content -->

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