jqm persistent toolbars

jqm Persistent toolbars

by stot

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<div data-role="header" data-position="fixed" data-theme="a">	<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>

     <h1>Info</h1>

</div>
<!-- /header -->
<!-- /page -->
<div data-role="page" data-title="mote"  id="one">
    <div role="main" class="ui-content jqm-content jqm-fullwidth">
        	<h1>Persistent toolbars</h1>

        <p>With the new external toolbars no extra effort is required to now have persistant toolbars. Simply place them outside of the page container on each page they will be loaded on the first page and persist on subsequent pages. The toolbars still need to be placed on each page to account for refresh however they will be ignored if not within a page container.</p>
    </div>
    <!-- /content -->
</div>
<!-- /page -->
<!-- /page -->
<div data-role="page" data-title="mote" class="jqm-demos" id="two">
    <div role="main" class="ui-content jqm-content jqm-fullwidth">
        	<h1>Persistent toolbars</h1>

        <p>With the new external toolbars no extra effort is required to now have persistant toolbars. Simply place them outside of the page container on each page they will be loaded on the first page and persist on subsequent pages. The toolbars still need to be placed on each page to account for refresh however they will be ignored if not within a page container.</p>
    </div>
    <!-- /content -->
</div>
<!-- /page -->
<div data-role="page" data-title="mote" class="jqm-demos" data-dialog="true" id="three">
    <div role="main" class="ui-content jqm-content jqm-fullwidth">
        	<h1>Persistent toolbars</h1>

        <p>With the new external toolbars no extra effort is required to now have persistant toolbars. Simply place them outside of the page...

JavaScript

$(function () {
    $("[data-role='navbar']").navbar();
    $("[data-role='header'], [data-role='footer']").toolbar();
});