1000k/description.md

## description.md

      
    Raw
  

              description.md
            
          
    Experimental codes to find out what order the events fired in jQuery Mobile 1.2.0.

For more information, please refer this article:
jQuery Mobileのページ遷移時にイベントが発火する順番 | 1000g (Japanese only)

  
## 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>

## 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>

## 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"); });
	<!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>
	// 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"); });