jQM persistent header and panel

by Erik Zanker

HTML

<div data-role="header" data-position="fixed" data-theme="a">
        <h3>Order</h3>
        <a class="ui-btn ui-btn-left ui-btn-icon-notext ui-icon-back" data-rel="back"></a>
        <a class="ui-btn ui-btn-right ui-btn-icon-notext ui-icon-bars" href="#rightPanel"></a>
</div>


<div data-role="page" id="page1">
    <div role="main" class="ui-content">
        I am a page
    </div> 
</div>  


<!-- Right panel-->
    <div data-role="panel" data-position-fixed="true" data-display="push" data-theme="b" id="rightPanel">
<ul data-role="listview">
            <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Ferrari</a></li>
</ul>
    </div><!-- /rightPanel -->

JavaScript

$(function() {
    $( "body > [data-role='panel']" ).panel();
    $( "body > [data-role='panel'] [data-role='listview']" ).listview();
    
    $( "[data-role='navbar']" ).navbar();
	$( "[data-role='header']" ).toolbar();
});