jQuery Mobile Dynamic Dialog

Showing a dialog without hitting server.

by cdeutsch

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css">
<html>
<head>
</head>
<body>
    <div data-role="page" data-theme="a">
        <div data-role="header" class="header">
                        <a href="/menu" data-icon="grid" data-theme="b" data-iconpos="notext" data-rel="dialog" data-transition="pop" data-ajax="false">&nbsp;</a>
            <h1>My Web App</h1>
            
        </div>
    
        <div id="map" data-role="content" data-theme="d">
            <p>This is my main content</p>
        </div>
        
        <div data-role="footer">
            <div>
            by <a href="http://cdeutsch.com" rel="external">CDeutsch</a>
            </div>
        </div>
    </div>
    <!--start menu-->
    <div id="menu" data-role="dialog" data-theme="a">
    <div data-role="header" class="header">
        <h1>Main Menu</h1>
    </div>
    <div data-role="content" data-theme="d">
        <ul data-role="listview" data-theme="c">
            <li><a href="http://blog.cdeutsch.com" rel="external">My Blog</a></li>
                <li><a href="http://twitter.com/cdeutsch" rel="external">Twitter</a></li>
        </ul>
    </div>

</div>
</body>
</html>

CSS

.ui-footer {
    text-align:center;
}
.ui-content p {
    height: 200px;
}

JavaScript

$('.header a').live('vclick', function (e) {
    e.preventDefault();
    e.stopPropagation();

    var $page = $('#menu');
    $page.page();
    $.mobile.changePage($page);
});