<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
$(document).on("pagebeforecreate","#home",function(){
alert("pagebeforecreate");
});
$(document).on("pagecreate","#home",function(){
alert("pagecreate");
});
$(document).on("pageinit","#home",function(){
alert("pageinit");
});
$(document).on("pageload",function(event,data){
alert("触发pageload事件\nURL:"+data.url);
});
$(document).on("pageloadfailed",function(event,data){
alert("触发pageloadfailed事件,页面不存在");
});
$(document).on("pagebeforeshow","#page1",function(){
alert("触发pagebeforeshow事件,page1页面即将显示。\n事件是针对page1页面的事件");
});
$(document).on("pageshow","#page1",function(){
alert("触发pageshow事件，现在显示page1页面。\n事件是针对page1页面的事件");
});
$(document).on("pagebeforehide","#page1",function(){
alert("触发pagebeforehide事件，page1页面即将隐藏。\n事件是针对page1页面的事件");
});
$(document).on("pagehide","#page1",function(){
alert("触发pagehide事件，page1隐藏。\n事件是针对page1页面的事件");
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">header</div>
<div data-role="content">
<a href="data-icon.html">存在data-icon.html</a>
<a href="data-icon2.html">不存在data-icon2.html</a><br/>
<p >页面home</p>
<a href="#page1" >跳到page1</a>
</div>
<div data-role="footer" data-theme="d">footer</div>
</div>
<div data-role="page" id="page1">
<div data-role="header" >page1</div>
<div data-role="content">
<p>page1</p><br>
<a href="#home">跳到home</a>
</div>
<div data-role="footer" >footer</div>
</div>
</body>
</html>
