你的位置:首页 > Java教程

[Java教程]jQuery Mobile_页面事件


 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>