jQuery Mobile_页面事件

最新推荐文章于 2024-10-30 18:24:25 发布

weixin_30526593

最新推荐文章于 2024-10-30 18:24:25 发布

阅读量63

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cag2050/p/5090461.html

版权

 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>