DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery入門技巧 >> jQuery-mobile事件監聽與用法詳解
jQuery-mobile事件監聽與用法詳解
編輯:JQuery入門技巧     

本文實例講述了jQuery-mobile事件監聽與用法。分享給大家供大家參考,具體如下:

觸摸事件 - 當用戶觸摸屏幕時觸發(敲擊和滑動)
滾動事件 - 當上下滾動時觸發
方向事件 - 當設備垂直或水平旋轉時觸發
頁面事件 - 當頁面被顯示、隱藏、創建、加載以及/或卸載時觸發

一、初始化事件

1. ready 事件 頁面加載完成

$(document).ready(function(){
  //your code here...
});

2. 頁面加載完成事件二 pageinit

$(document).on('pageinit','#pageone',function(){
  //your code here...
});

3.事件格式

$(元素).on('事件',funciton(){
  //code here...
})

二、觸摸事件

tap          事件在用戶敲擊某個元素時觸發
taphold      事件在用戶敲擊某個元素並保持一秒時被觸發
swipe        事件在用戶在某個元素上水平滑動超過 30px 時被觸發
swipeleft    事件在用戶在某個元素上從左滑動超過 30px 時被觸發
swiperight   事件在用戶在某個元素上從右滑動超過 30px 時被觸發

三、滾動事件

scrollstart 事件在用戶開始滾動頁面時被觸發
(iOS 設備會在滾動事件發生時凍結 DOM 操作)
scrollstop 事件在用戶停止滾動頁面時被觸發

四、方向(橫豎屏轉動)

orientationchange 事件在用戶垂直或水平旋轉移動設備時被觸發

可以通過window.orientation 來檢測橫屏豎屏

$(window).on("orientationchange",function(){
 if(window.orientation == 0) // Portrait
 {
  $("p").css({"background-color":"yellow","font-size":"300%"});
 }
 else // Landscape
 {
  $("p").css({"background-color":"pink","font-size":"200%"});
 }
});

五、頁面事件

Page Initialization - 在頁面創建前,當頁面創建時,以及在頁面初始化之後
Page Load/Unload - 當外部頁面加載時、卸載時或遭遇失敗時
Page Transition - 在頁面過渡之前和之後
Page Change - 當頁面被更改,或遭遇失敗時

【初始化事件】

pagebeforecreate 當頁面即將初始化,並且在 jQuery Mobile 已開始增強頁面之前,觸發該事件。
pagecreate 當頁面已創建,但增強完成之前,觸發該事件。
pageinit 當頁面已初始化,並且在 jQuery Mobile 已完成頁面增強之後,觸發該事件。

$(document).on("pagebeforecreate",function(event){})

【加載事件】

pagebeforeload 在任何頁面加載請求作出之前觸發。
pageload 在頁面已成功加載並插入 DOM 後觸發。
pageloadfailed 如果頁面加載請求失敗,則觸發該事件。默認地,將顯示 "Error Loading Page" 消息。

$(document).on("pageload",function(event,data){})

【過渡事件】

pagebeforeshow 在“去的”頁面觸發,在過渡動畫開始前。
pageshow 在“去的”頁面觸發,在過渡動畫完成後。
pagebeforehide 在“來的”頁面觸發,在過渡動畫開始前。
pagehide 在“來的”頁面觸發,在過渡動畫完成後。

$(document).on("pagebeforeshow","#pagetwo",function(){ })

更多關於jQuery相關內容感興趣的讀者可查看本站專題:《jQuery常用插件及用法總結》、《jQuery擴展技巧總結》、《jQuery切換特效與技巧總結》、《jQuery遍歷算法與技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved