計劃名稱 : 104 年度教育部資通訊軟體創新人才推升推廣計畫跨校資源中心 : 雲端運算 ( 國立中山大學 ) 課程名稱 : 網路及平台服務 Part1- 課程教材 教材名稱 :jquery Mobile 事件處理方式 國立高雄大學資訊工程學系張保榮教授
大綱 初始化事件 (Page Initialization) 外部頁面載入事件 (Page Load) 頁面切換 (Page Transition) 事件處理 $(document).on( 事件名稱, 選擇器, 事件處理函式 );
事件處理方式 初始化事件 (Page initialization) 外部頁面載入事件 (Page Load) 頁面切換 (Page Transition) 事件處理 $(document).on( 事件名稱, 選擇器, 事件處理函式 )
初始化事件 Mobileinit 事件, 語法 : $(document).on("mobileinit", function(){ // 程式敘述 }); Pagebeforecreate Pagecreate Pageinit 事件, 語法 : $(document).on("pagebeforecreate ", function(){ // 程式敘述 }); 綁定事件的方法 :on() 與 one() on() 方法也可以改用 one() 方法代替 one() 只會執行一次
外部頁面載入事件 Pageload 事件, 語法 : $(document).on("pageload",function(event,data){ alert("url: "+data.url); }); Pageloadfailed 事件 $(document).on("pageloadfailed",function(){ alert(" 頁面載入失敗 "); });
頁面切換事件 $( ":mobile-pagecontainer" ).pagecontainer( "change", to[, options]); To: 想要切換的目的頁面, 值必須是字串或 DOM 物件 內部頁面可以直接指定 DOM 物件 id 名稱, 例如 #second, 也可以連結到外部頁面, 例如 :abc.htm Options( 屬性 ): 可省略不寫 transition 屬性是用來指定頁面轉場動畫效果 轉場效果 slide slideup slidedown 從右到左從下到上 從上到下 說明 pop 從小點至全螢幕 fade 淡出淡入 flip 2D 或 3D 旋轉動畫 ( 支援 3D 效果的裝置才能使用 )
觸摸 (touch) 事件 點擊事件 (tap) Tap: 觸碰頁面時觸發 $("div").on("tap",function(){ $(this).hide(); }); Taphold: 頁面按住不放時觸發 $("div").on("taphold",function(){ $(this).hide(); }); taphold 事件預設是按住不放 750 毫秒 (ms) 之後會觸發 $.event.special.tap.tapholdthreshold 語法可以改變觸發的時間
滑動事件 滑動事件是指螢幕左右滑動時觸發的事件, 起點必須在物件內, 一秒鐘內發生左右移動距離大於 30px 時觸發 swipe 事件 $("div").on("swipe",function(){ $("span").text(" 您滑動螢幕囉!"); }); Swipeleft swiperight 事件 $("div").on("swipeleft",function(){ $("span").text(" 您向左滑動螢幕囉!"); });
滾動事件 滾動事件是指螢幕上下滾動時觸發的事件 滾動開始觸發 scrollstart 事件 滾動停止觸發 scrollstop 事件 例如 : $(document).on("scrollstart",function(){ $("span").text(" 您滾動螢幕囉!"); });
螢幕方向改變事件 當使用者水平或垂直旋轉行動裝置時, 會觸發螢幕方向改變事件, 建議將 orientationchange 事件綁定到 windows 元件 例如 : $(window).on("orientationchange",function(event){ alert(" 目前裝置的方向是 "+ event.orientation); }); orientationchange 事件會傳回字串, 處理函數加上 event 物件來接收 orientation 值, 值為 landscape( 橫向 ) 或 portrait( 縱向 )
物件之間的關係 (1) Source: http://mirlab.org/jang/books/jsbook/disk/contents/jsbook/slide/ 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
物件之間的關係 (2) 由圖可以看出,window 物件是所有物件的始祖 每個物件的分支多寡, 就可以大概看出此物件的重要性 這些物件各有不同的性質 (Properties) 及方法 (Methods),JavaScript 可利用這些性質及方法來建立網頁的互動性 Source: http://mirlab.org/jang/books/jsbook/disk/contents/jsbook/slide/ 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
操作練習 tap 程式碼 : <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile 1.3.2.min.css"> <script src="http://code.jquery.com/jquery 1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile 1.3.2.min.js"></script> <script> $(document).on("pageinit","#pageone",function(){ $("p").on("tap",function(){ $(this).hide(); }); }); </script> </head> <body> 13
操作練習 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
操作練習 tap( 續 ) 結果 : 15
操作練習 swiperight 程式碼 : <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile 1.3.2.min.css"> <script src="http://code.jquery.com/jquery 1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile 1.3.2.min.js"></script> <script> $(document).on("pageinit","#pageone",function(){ $("p").on("swiperight",function(){ alert(" 您向右滑动!"); }); }); </script> 16
操作練習 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
操作練習 swiperight( 續 ) 結果 : 18
操作練習 scrollstart 程式碼 : <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile 1.3.2.min.css"> <script src="http://code.jquery.com/jquery 1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile 1.3.2.min.js"></script> <script> $(document).on("pageinit","#pageone",function(){ $(document).on("scrollstart",function(){ alert(" 开始滚动!"); }); }); </script> </head> 19
操作練習 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
操作練習 scrollstart( 續 ) 結果 : 21
操作練習 scrollstop 程式碼 : <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile 1.3.2.min.css"> <script src="http://code.jquery.com/jquery 1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile 1.3.2.min.js"></script> <script> $(document).on("pageinit","#pageone",function(){ $(document).on("scrollstop",function(){ alert(" 停止滚动!"); }); }); </script> 22
操作練習 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
操作練習 scrollstop( 續 ) 結果 : 24
操作練習 orientationchange 程式碼 : <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile 1.3.2.min.css"> <script src="http://code.jquery.com/jquery 1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile 1.3.2.min.js"></script> <script> $(document).on("pageinit",function(event){ $(window).on("orientationchange",function(event){ alert(" 方法改变为 :" + event.orientation); }); }); </script> 25
操作練習 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
操作練習 orientationchange ( 續 ) 結果 : 27
END