jQuery Mobile事件

初始化事件/Initial

$(document).on("pageinit","#pageID",function(){
   //code
});

触控事件/Touch
tap 敲击元素时触发

$("div.test").on("tap",function(){
    //code
});

taphold 敲击元素并保持一秒时触发

$("div.test").on("taphold",function(){
    //code
});

swipe 在元素上水平滑动超过30px时触发

$("div.test").on("swipe",function(){
    //code
});

swipeleft 在元素上从左滑动超过30px时触发

$("div.test").on("swipeleft",function(){
    //code
});

swipeleft 在元素上从右滑动超过30px时触发

$("div.test").on("swiperight",function(){
    //code
});

 

滚动事件/Scroll

滚动事件要绑定在document对象上。iOS设备会在滚动事件发生时冻结DOM操作。

scrollstart 开始滚动页面时触发

$(document).on("scrollstart",function(){
  //code
});

scrollstop 停止滚动页面时触发

$(document).on("scrollstop",function(){
  //code
});

 

方向事件/orientationchange   

方向事件要绑定到window对象上

$(window).on("orientationchange",function(){
   //code
});

event对象里存有设备的方向属性orientation

$(window).on("orientationchange",function(event){
   if(event.orientation == portrait){
       //code
   }
   if(event.orientation == landscape){
       //code
   }
});

也可以用window.orientation来判断设备方向

$(window).on("orientationchange",function(event){
   if(window.orientation == 0){
       //portrait
   }
   if(window.orientation == 90 || window.orientation == -90){
       //landscape
   }
});

 

页面事件/Page

Page Initialization   页面初始化事件

$(document).on("pageinit",function(){
  alert("触发 pageinit 事件 - 页面已初始化，DOM 已加载，jQuery Mobile 已完成页面增强。")
}); 
$(document).on("pagebeforecreate",function(){
  alert("触发 pagebeforecreate 事件 - 页面即将初始化。jQuery Mobile 仍未开始增强页面。");
});                     
$(document).on("pagecreate",function(){
  alert("触发 pagecreate 事件 - 已创建页面，但增强未完成。");
});

 



Page Load/Unload   载入DOM事件

$(document).on("pagebeforeload",function(event,data){
    //pagebeforeload 页面加载请求发出之前触发
    alert("即将触发 pageload 事件！\nURL: " + data.url);
});
$(document).on("pageload",function(event,data){
    //pageload 页面已成功加载并插入DOM之后触发
    alert("触发 pageload 事件！\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
    //pageloadfailed 页面加载请求失败时触发
    alert("抱歉，被请求页面不存在。");
});

 

Page Transition   页面过渡事件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
 5 <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
 6 <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
 7 <script>
 8 
 9 
10 
11 
12 $(document).on("pagebeforeshow","#page2",function(){
13     //pagebeforeshow 离开旧页面时触发，在过渡动画开始前
14     alert("触发 pagebeforeshow 事件 - 页面二即将显示");
15 });
16 $(document).on("pageshow","#page2",function(){
17     //pageshow 离开旧页面时触发，在过渡动画完成后
18     alert("触发 pageshow 事件 - 现在显示页面二");
19 });
20 $(document).on("pagebeforehide","#page2",function(){
21     //pagebeforehide 转到新页面时触发，在过渡动画开始前
22     alert("触发 pagebeforehide 事件 - 页面二即将隐藏");
23 });
24 $(document).on("pagehide","#page2",function(){
25     //pagehide 转到新页面时触发，在过渡动画完成后
26     alert("触发 pagehide 事件 - 现在隐藏页面二");
27 });
28 </script>
29 </head>
30 <body>
31 
32 <div data-role="page" id="page1">
33   <div data-role="header">
34     <h1>Header</h1>
35 
36   </div>
37 
38   <div data-role="content">
39     <a href="#page2">转到页面二</a>
40   </div>
41 
42   <div data-role="footer">
43     <h1>Footer</h1>
44   </div>
45 </div> 
46 
47 <div data-role="page" id="page2">
48   <div data-role="header">
49     <h1>Header</h1>
50 
51   </div>
52 
53   <div data-role="content">
54     <a href="#page1">转到页面一</a>
55   </div>
56 
57   <div data-role="footer">
58     <h1>Footer</h1>
59   </div>
60 </div> 
61 
62 </body>
63 </html>

 

posted @ 2015-11-22 20:09  zcynine  阅读(633)  评论(0)  编辑  收藏  举报