Microsoft PowerPoint - 12 jQuery Mobile 事件處理方式

Size: px

Start display at page:

Download "Microsoft PowerPoint - 12 jQuery Mobile 事件處理方式"

胃石
5 years ago
Views:

1 計劃名稱 : 104 年度教育部資通訊軟體創新人才推升推廣計畫跨校資源中心 : 雲端運算 ( 國立中山大學 ) 課程名稱 : 網路及平台服務 Part1- 課程教材教材名稱 :jquery Mobile 事件處理方式國立高雄大學資訊工程學系張保榮教授

2 大綱初始化事件 (Page Initialization) 外部頁面載入事件 (Page Load) 頁面切換 (Page Transition) 事件處理 $(document).on( 事件名稱, 選擇器, 事件處理函式 );

3 事件處理方式初始化事件 (Page initialization) 外部頁面載入事件 (Page Load) 頁面切換 (Page Transition) 事件處理 $(document).on( 事件名稱, 選擇器, 事件處理函式 )

4 初始化事件 Mobileinit 事件, 語法 : $(document).on("mobileinit", function(){ // 程式敘述 }); Pagebeforecreate Pagecreate Pageinit 事件, 語法 : $(document).on("pagebeforecreate ", function(){ // 程式敘述 }); 綁定事件的方法 :on() 與 one() on() 方法也可以改用 one() 方法代替 one() 只會執行一次

5 外部頁面載入事件 Pageload 事件, 語法 : $(document).on("pageload",function(event,data){ alert("url: "+data.url); }); Pageloadfailed 事件 $(document).on("pageloadfailed",function(){ alert(" 頁面載入失敗 "); });

6 頁面切換事件 $( ":mobile-pagecontainer" ).pagecontainer( "change", to[, options]); To: 想要切換的目的頁面, 值必須是字串或 DOM 物件內部頁面可以直接指定 DOM 物件 id 名稱, 例如 #second, 也可以連結到外部頁面, 例如 :abc.htm Options( 屬性 ): 可省略不寫 transition 屬性是用來指定頁面轉場動畫效果轉場效果 slide slideup slidedown 從右到左從下到上從上到下說明 pop 從小點至全螢幕 fade 淡出淡入 flip 2D 或 3D 旋轉動畫 ( 支援 3D 效果的裝置才能使用 )

7 觸摸 (touch) 事件點擊事件 (tap) Tap: 觸碰頁面時觸發 $("div").on("tap",function(){ $(this).hide(); }); Taphold: 頁面按住不放時觸發 $("div").on("taphold",function(){ $(this).hide(); }); taphold 事件預設是按住不放 750 毫秒 (ms) 之後會觸發 $.event.special.tap.tapholdthreshold 語法可以改變觸發的時間

8 滑動事件滑動事件是指螢幕左右滑動時觸發的事件, 起點必須在物件內, 一秒鐘內發生左右移動距離大於 30px 時觸發 swipe 事件 $("div").on("swipe",function(){ $("span").text(" 您滑動螢幕囉!"); }); Swipeleft swiperight 事件 $("div").on("swipeleft",function(){ $("span").text(" 您向左滑動螢幕囉!"); });

9 滾動事件滾動事件是指螢幕上下滾動時觸發的事件滾動開始觸發 scrollstart 事件滾動停止觸發 scrollstop 事件例如 : $(document).on("scrollstart",function(){ $("span").text(" 您滾動螢幕囉!"); });

10 螢幕方向改變事件當使用者水平或垂直旋轉行動裝置時, 會觸發螢幕方向改變事件, 建議將 orientationchange 事件綁定到 windows 元件例如 : $(window).on("orientationchange",function(event){ alert(" 目前裝置的方向是 "+ event.orientation); }); orientationchange 事件會傳回字串, 處理函數加上 event 物件來接收 orientation 值, 值為 landscape( 橫向 ) 或 portrait( 縱向 )

11 物件之間的關係 (1) Source: 06-%E6%96%87%E4%BB%B6%E7%89%A9%E4%BB%B6%E6%A8%A1%E5%9E%8B%EF%BC%88DOM%EF%BC%89.ppt

12 物件之間的關係 (2) 由圖可以看出,window 物件是所有物件的始祖每個物件的分支多寡, 就可以大概看出此物件的重要性這些物件各有不同的性質 (Properties) 及方法 (Methods),JavaScript 可利用這些性質及方法來建立網頁的互動性 Source: 06-%E6%96%87%E4%BB%B6%E7%89%A9%E4%BB%B6%E6%A8%A1%E5%9E%8B%EF%BC%88DOM%EF%BC%89.ppt

13 操作練習 tap 程式碼 : <!DOCTYPE html> <html> <head> <link rel="stylesheet" href=" min.css"> <script src=" min.js"></script> <script src=" min.js"></script> <script> $(document).on("pageinit","#pageone",function(){ $("p").on("tap",function(){ $(this).hide(); }); }); </script> </head> <body> 13

14 操作練習 tap( 續 ) <div data role="page" id="pageone"> <div data role="header"> <h1>tap 事件 </h1> <div data role="content"> <p> 敲击我, 我会消失 </p> <p> 敲击我, 我会消失 </p> <p> 敲击我, 我也会消失 </p> <div data role="footer"> <h1> 页脚文本 </h1> </body> </html> 14

15 操作練習 tap( 續 ) 結果 : 15

16 操作練習 swiperight 程式碼 : <!DOCTYPE html> <html> <head> <link rel="stylesheet" href=" min.css"> <script src=" min.js"></script> <script src=" min.js"></script> <script> $(document).on("pageinit","#pageone",function(){ $("p").on("swiperight",function(){ alert(" 您向右滑动!"); }); }); </script> 16

17 操作練習 swiperight( 續 ) </head> <body> <div data role="page" id="pageone"> <div data role="header"> <h1>swiperight 事件 </h1> <div data role="content"> <p style="border:1px solid black;margin:5px;"> 向右滑动不要超出边框! </p> <div data role="footer"> <h1> 页脚文本 </h1> </body> </html> 17

18 操作練習 swiperight( 續 ) 結果 : 18

19 操作練習 scrollstart 程式碼 : <!DOCTYPE html> <html> <head> <link rel="stylesheet" href=" min.css"> <script src=" min.js"></script> <script src=" min.js"></script> <script> $(document).on("pageinit","#pageone",function(){ $(document).on("scrollstart",function(){ alert(" 开始滚动!"); }); }); </script> </head> 19

20 操作練習 scrollstart( 續 ) <body> <div data role="page" id="pageone"> <div data role="header"> <h1>scrollstart 事件 </h1> <div data role="content"> <p><b> 提示 :</b> 如果未出现滚动条, 请尝试调整窗口尺寸 </p> <p>some text to enable scrolling..some text to enable scrolling..some text to enable scrolling..some text to enable scrolling..some text to enable scrolling..some text to enable scrolling..some text to enable scrolling..some text to enable scrolling..some text to enable scrolling..some text to enable scrolling..some text to enable scrolling..some text to enable scrolling..some text to enable scrolling..some text to enable scrolling..some text to enable scrolling..some text to enable scrolling..some text to enable scrolling..some text to enable scrolling..some text to enable..</p> <div data role="footer"> <h1> 页脚文本 </h1> </body> </html> 20

21 操作練習 scrollstart( 續 ) 結果 : 21

22 操作練習 scrollstop 程式碼 : <!DOCTYPE html> <html> <head> <link rel="stylesheet" href=" min.css"> <script src=" min.js"></script> <script src=" min.js"></script> <script> $(document).on("pageinit","#pageone",function(){ $(document).on("scrollstop",function(){ alert(" 停止滚动!"); }); }); </script> 22

23 操作練習 scrollstop( 續 ) </head> <body> <div data role="page" id="pageone"> <div data role="header"> <h1>scrollstop 事件 </h1> <div data role="content"> <p><b> 提示 :</b> 如果未出现滚动条, 请尝试调整窗口尺寸 </p> <p>some text to enable scrolling..some text to enable scrolling..some text to enable scrolling..some text to enable scrolling..some text to enable scrolling..some text to enable scrolling..some text to enable scrolling..some text to enable scrolling..some text to enable scrolling..some text to enable scrolling..some text to enable scrolling..some text to enable scrolling..</p> <div data role="footer"> <h1> 页脚文本 </h1> </body> </html> 23

24 操作練習 scrollstop( 續 ) 結果 : 24

25 操作練習 orientationchange 程式碼 : <!DOCTYPE html> <html> <head> <link rel="stylesheet" href=" min.css"> <script src=" min.js"></script> <script src=" min.js"></script> <script> $(document).on("pageinit",function(event){ $(window).on("orientationchange",function(event){ alert(" 方法改变为 :" + event.orientation); }); }); </script> 25

26 操作練習 orientationchange ( 續 ) </head> <body> <div data role="page"> <div data role="header"> <h1>orientationchange 事件 </h1> <div data role="content"> <p> 请试着旋转您的设备!</p> <p><b> 注释 :</b> 您必须使用移动设备或者移动模拟器来查看该事件的效果 </p> <div data role="footer"> <h1> 页脚文本 </h1> </body> </html> 26

27 操作練習 orientationchange ( 續 ) 結果 : 27

28 END

關於本書 l 3 PhoneGap Appcelerator Titanium Sencha Touch (wrapper framework) Native App PhoneGap Build Native App Hybrid App Java Objective-C Android SDK

關於本書 l 3 PhoneGap Appcelerator Titanium Sencha Touch (wrapper framework) Native App PhoneGap Build Native App Hybrid App Java Objective-C Android SDK 2 l 跨裝置網頁設計 Android ios Windows 8 BlackBerry OS Android HTML 5 HTML 5 HTML 4.01 HTML 5 CSS 3 CSS 3 CSS 2.01 CSS 3 2D/3D PC JavaScript