jQM - Unimportant page event example

by Dragan Gaić

HTML

<link rel="stylesheet" href="http://jeromeetienne.github.com/jquery-mobile-960/css/jquery-mobile-fluid960.css">
<script src="http://timeago.yarp.com/jquery.timeago.js"></script>
<script src="http://imakewebthings.github.com/jquery-waypoints/waypoints.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <!-- my page -->
    <div data-role="page" id="foo">
        <a href="#bar" data-role="button" class="ui-btn-right">Show page #bar</a>      
    </div><!-- /page -->
    
    
    <!-- other page  -->
    <div data-role="page" id="bar">
         <a href="#foo" data-role="button" class="ui-btn-right">Back to foo</a>   
         <div id="slideshow"></div>
    
    </div><!-- /page -->   
</body>
</html>

JavaScript

$(document).on('pageinit', '#foo', function(){       
    alert('Execute the code for a page foo. Pageinit will trigger onyl first time page is shown, just like document ready.');
});

$(document).on('pagebeforeshow', '#foo', function(){       
    alert('Execute the code for a page foo. Pagebeforeshow event will trigger each time page is dsiplayed.');
});

$(document).on('pagebeforeshow', '#bar', function(){       
    alert('Execute the code for a page bar');
});