jQM external panel

by Erik Zanker

HTML

<div data-role="panel" id="bioPanel" data-theme="a">
    <ul id="menu">
        <li><a href="#Bio">Bio</a>
        </li>
        <li><a href="#Media">Media</a>
        </li>
        <li><a href="#Booking">Booking</a>
        </li>
    </ul>
</div>

<div data-role="page" id="Bio">
    <div data-role="header">
         <h1>My Site Bio</h1>

    </div>
    <div data-role="main" class="ui-content">
        <p>Biography</p> <a href="#bioPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Open Panel</a>

    </div>
    <div data-role="footer">
         <h1>My Site</h1>

    </div>
</div>
<div data-role="page" id="Media">
    <div data-role="header">
         <h1>My Site Media</h1>

    </div>
    <div data-role="main" class="ui-content">
        <p>Media</p> <a href="#bioPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Open Panel</a>

    </div>
    <div data-role="footer">
         <h1>My Site</h1>

    </div>
</div>
<div data-role="page" id="Booking">
    <div data-role="header">
         <h1>My Site Booking</h1>

    </div>
    <div data-role="main" class="ui-content">
        <p>Booking</p> <a href="#bioPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Open Panel</a>

    </div>
    <div data-role="footer">
         <h1>My Site</h1>

    </div>
</div>

JavaScript

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