Skip to content

Instantly share code, notes, and snippets.

@1000k

1000k/description.md

Created October 13, 2012 21:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save 1000k/3886193 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save 1000k/3886193 to your computer and use it in GitHub Desktop.
Download ZIP
Verify the event firing timings of jQuery Mobile
Raw
description.md
Raw
page1.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>page 1</title>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script type="text/javascript" src="transition.js"></script>
</head>
<body>
<div data-role="page" data-theme="a" id="page1">
<div data-role="content">
<a href="page2.html" data-role="button">Go to page2.html</a>
</div>
</div>
</body>
</html>
Raw
page2.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>page 2</title>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script type="text/javascript" src="transition.js"></script>
</head>
<body>
<div data-role="page" data-theme="e" id="page2">
<div data-role="content">
<a href="page1.html" data-role="button">Back to page1.html</a>
</div>
</div>
</body>
</html>
Raw
transition.js
// Page load events
$(document).bind("pagebeforeload", function(e, data) {
console.log("pagebeforeload: " + data.url);
});
$(document).bind("pageload", function(e, data) {
console.log("pageload: " + data.url);
});
$(document).bind("pageloadfailed", function() { console.log("pageloadfailed"); });
// Page change events
$(document).bind("pagebeforechange", function() { console.log("pagebeforechange"); });
$(document).bind("pagechange", function() { console.log("pagechange"); });
$(document).bind("pagechangefailed", function() { console.log("pagechangefailed"); });
// Page transition events
$(document).bind("pagebeforeshow", function() { console.log("pagebeforeshow"); });
$(document).bind("pagebeforehide", function() { console.log("pagebeforehide"); });
$(document).bind("pageshow", function() { console.log("pageshow"); });
$(document).bind("pagehide", function() { console.log("pagehide"); });
// Page initialization events
$(document).bind("pagebeforecreate", function() { console.log("pagebeforecreate"); });
$(document).bind("pagecreate", function() { console.log("pagecreate"); });
$(document).bind("pageinit", function() { console.log("pageinit"); });
// Page remove events
$(document).bind("pageremove", function() { console.log("pageremove"); });
@1000k
Copy link
Author

1000k commented Oct 13, 2012

The results is the following:

// Access to 'page1.html'
pagebeforechange
pagebeforecreate
pagecreate
pageinit
pagebeforeshow
pageshow
pagechange

// Then click 'Go to page2.html'
pagebeforechange
pagebeforeload: http://localhost/page2.html
pagebeforecreate
pagecreate
pageinit
pageload: http://localhost/page2.html
pagebeforechange
pagebeforehide
pagebeforeshow
pagehide
pageshow
pagechange

// Click 'Back to page1.html'
pagebeforechange
pagebeforechange
pagebeforehide
pagebeforeshow
pageremove
pagehide
pageshow
pagechange

// Click again 'Go to page2.html'
pagebeforechange
pagebeforeload: http://localhost/page2.html
pagebeforecreate
pagecreate
pageinit
pageload: http://localhost/page2.html
pagebeforechange
pagebeforehide
pagebeforeshow
pagehide
pageshow
pagechange

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment