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事件 URL:"+data.url); 21 }); 22 $(document).on("pageloadfailed",function(event,data){ 23 alert("触发pageloadfailed事件,页面不存在"); 24 }); 25 $(document).on("pagebeforeshow","#page1",function(){ 26 alert("触发pagebeforeshow事件,page1页面即将显示。 事件是针对page1页面的事件"); 27 }); 28 $(document).on("pageshow","#page1",function(){ 29 alert("触发pageshow事件，现在显示page1页面。 事件是针对page1页面的事件"); 30 }); 31 $(document).on("pagebeforehide","#page1",function(){ 32 alert("触发pagebeforehide事件，page1页面即将隐藏。 事件是针对page1页面的事件"); 33 }); 34 $(document).on("pagehide","#page1",function(){ 35 alert("触发pagehide事件，page1隐藏。 事件是针对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>