jQery Mobile Page Stencil

A template kinda thing to use for a jQM question

by Krishna Gopinath

HTML

<div data-role="page" id="first">
    <div data-role="header" data-position="fixed">
         <h1></h1>

    </div>
    <div data-role="content"> <a href="#second" data-role="button">Go to page 2</a>

    </div>
    <div data-role="footer" data-position="fixed">
         <h1><a href="http://view.jquerymobile.com/1.3.1/demos/" data-role="button"  target="_blank" class="ui-btn-left" data-theme="b" data-icon="arrow-r">Demos</a> <a href="http://api.jquerymobile.com/"  data-theme="b" data-role="button" target="_blank" class="ui-btn-right" data-icon="arrow-r">API</a>Using jQM version 1.3.1</h1>

    </div>
</div>
<div data-role="page" id="second" data-add-back-btn="true" data-back-btn-text="Back">
    <div data-role="header" data-position="fixed">
         <h1></h1>

    </div>
    <div data-role="content"></div>
    <div data-role="footer" data-position="fixed">
         <h1><a href="http://view.jquerymobile.com/1.3.1/demos/" data-role="button"  target="_blank" class="ui-btn-left" data-theme="b" data-icon="arrow-r">Demos</a> <a href="http://api.jquerymobile.com/"  data-theme="b" data-role="button" target="_blank" class="ui-btn-right" data-icon="arrow-r">API</a>Using jQM version 1.3.1</h1>

    </div>
</div>

JavaScript

$(document).on("pageinit", "[data-role=page]", function () {
    alert("pageinit fires up");
});

$(document).on("ready", function () {
    alert("ready fires up");
});