jQuery Mobile事件

時間 2019-11-18

原文原文鏈接

初始化事件/Initialcss

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

觸控事件/Touch
tap 敲擊元素時觸發html

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

taphold 敲擊元素並保持一秒時觸發jquery

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

swipe 在元素上水平滑動超過30px時觸發ide

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

swipeleft 在元素上從左滑動超過30px時觸發動畫

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

swipeleft 在元素上從右滑動超過30px時觸發url

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

滾動事件/Scrollspa

滾動事件要綁定在document對象上。iOS設備會在滾動事件發生時凍結DOM操做。code

scrollstart 開始滾動頁面時觸發htm

$(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>