1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>无标题文档</title>
6 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
7 <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
8 <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
9 <script>
10 $(document).on("pagebeforecreate","#home",function(){
11 alert("pagebeforecreate");
12 });
13 $(document).on("pagecreate","#home",function(){
14 alert("pagecreate");
15 });
16 $(document).on("pageinit","#home",function(){
17 alert("pageinit");
18 });
19 $(document).on("pageload",function(event,data){
20 alert("触发pageload事件\nURL:"+data.url);
21 });
22 $(document).on("pageloadfailed",function(event,data){
23 alert("触发pageloadfailed事件,页面不存在");
24 });
25 $(document).on("pagebeforeshow","#page1",function(){
26 alert("触发pagebeforeshow事件,page1页面即将显示。\n事件是针对page1页面的事件");
27 });
28 $(document).on("pageshow","#page1",function(){
29 alert("触发pageshow事件，现在显示page1页面。\n事件是针对page1页面的事件");
30 });
31 $(document).on("pagebeforehide","#page1",function(){
32 alert("触发pagebeforehide事件，page1页面即将隐藏。\n事件是针对page1页面的事件");
33 });
34 $(document).on("pagehide","#page1",function(){
35 alert("触发pagehide事件，page1隐藏。\n事件是针对page1页面的事件");
36 });
37 </script>
38 </head>
39
40 <body>
41 <div data-role="page" id="home">
42 <div data-role="header">header</div>
43 <div data-role="content">
44 <a href="data-icon.html">存在data-icon.html</a>
45 <a href="data-icon2.html">不存在data-icon2.html</a><br/>
46 <p >页面home</p>
47 <a href="#page1" >跳到page1</a>
48 </div>
49 <div data-role="footer" data-theme="d">footer</div>
50 </div>
51 <div data-role="page" id="page1">
52 <div data-role="header" >page1</div>
53 <div data-role="content">
54 <p>page1</p><br>
55 <a href="#home">跳到home</a>
56 </div>
57 <div data-role="footer" >footer</div>
58 </div>
59 </body>
60 </html>
