jQuery Mobile 頁面事件

李路平發表於2014-04-29
jQuery事件

jQuery Mobile 頁面事件

在 jQuery Mobile 中與頁面打交道的事件被分為四類：

  • Page Initialization - 在頁面建立前，當頁面建立時，以及在頁面初始化之後
  • Page Load/Unload - 當外部頁面載入時、解除安裝時或遭遇失敗時
  • Page Transition - 在頁面過渡之前和之後
  • Page Change - 當頁面被更改，或遭遇失敗時

jQuery Mobile Initialization 事件

當 jQuery Mobile 中的一張典型頁面進行初始化時，它會經歷三個階段：

  • 在頁面建立前
  • 頁面建立
  • 頁面初始化

每個階段觸發的事件都可用於插入或操作程式碼。

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

下面的例子演示在 jQuery Mobile 中建立頁面時，何時觸發每種事件：

$(document).on("pagebeforecreate",function(event){
  alert("觸發 pagebeforecreate 事件！");
}); 
$(document).on("pagecreate",function(event){
  alert("觸發 pagecreate 事件！");
});
$(document).on("pageinit",function(event){
  alert("觸發 pageinit 事件！")
});

jQuery Mobile Load 事件

頁面載入事件屬於外部頁面。

無論外部頁面何時載入 DOM，將觸發兩個事件。第一個是 pagebeforeload，第二個是 pageload （成功）或 pageloadfailed（失敗）。

下表中解釋了這些事件：

事件描述
pagebeforeload 在任何頁面載入請求作出之前觸發。
pageload 在頁面已成功載入並插入 DOM 後觸發。
pageloadfailed 如果頁面載入請求失敗，則觸發該事件。預設地，將顯示 "Error Loading Page" 訊息。

下列演示 pageload 和 pagloadfailed 事件的工作原理：

$(document).on("pageload",function(event,data){
  alert("觸發 pageload 事件！\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
  alert("抱歉，被請求頁面不存在。");
});

jQuery Mobile 過渡事件

我們還可以在從一頁過渡到下一頁時使用事件。

頁面過渡涉及兩個頁面：一張“來”的頁面和一張“去”的頁面 - 這些過渡使當前活動頁面（“來的”頁面）到新頁面（“去的”頁面的改變過程變得更加動感。

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

下列演示了過渡時間的工作原理：

$(document).on("pagebeforeshow","#pagetwo",function(){ // 當進入頁面二時
  alert("頁面二即將顯示");
});
$(document).on("pageshow","#pagetwo",function(){ // 當進入頁面二時
  alert("現在顯示頁面二");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // 當離開頁面二時
  alert("頁面二即將隱藏");
});
$(document).on("pagehide","#pagetwo",function(){ // 當離開頁面二時
  alert("現在隱藏頁面二");
});

 

jQuery Mobile 事件參考手冊

下表列出了所有的 jQuery Mobile 事件。

註釋：請通過使用 on() 方法來繫結事件。

事件描述
hashchange 啟用 bookmarkable #hash 歷史記錄。
navigate 針對 hashchange 和 popstate 的 wrapper 事件。
orientationchange 當使用者垂直或水平旋轉其移動裝置時觸發。
pagebeforechange 在頁面變化週期內觸發兩次：任意頁面載入或過渡之前觸發一次，接下來在頁面成功完成載入後，但是在瀏覽器歷史記錄被導航程式修改之前觸發。
pagebeforecreate 當頁面即將被初始化，但是在增強開始之前觸發。
pagebeforehide 在過渡動畫開始前，在“來源”頁面上觸發。
pagebeforeload 在作出任何載入請求之前觸發。
pagebeforeshow 在過渡動畫開始前，在“到達”頁面上觸發。
pagechange 在 changePage() 請求已完成將頁面載入 DOM 並且所有頁面過渡動畫已完成後觸發。
pagechangefailed 當 changePage() 請求對頁面的載入失敗時觸發。
pagecreate 當頁面已建立，但是增強完成之前觸發。
pagehide 在過渡動畫完成後，在“來源”頁面觸發。
pageinit 當頁面已經初始化並且完成增強時觸發。
pageload 在頁面成功載入並插入 DOM 後觸發。
pageloadfailed 如果頁面載入請求失敗，則觸發。
pageremove 在視窗檢視從 DOM 中移除外部頁面之前觸發。
pageshow 在過渡動畫完成後，在“到達”頁面觸發。
scrollstart 當使用者開始滾動頁面時觸發。
scrollstop 當使用者停止滾動頁面時觸發。
swipe 當使用者在元素上水平滑動時觸發。
swipeleft 當使用者從左劃過元素超過 30px 時觸發。
swiperight 當使用者從右劃過元素超過 30px 時觸發。
tap 當使用者敲擊某元素時觸發。
taphold 當元素敲擊某元素並保持一秒時觸發。
throttledresize 啟用 bookmarkable #hash 歷史記錄
updatelayout 由動態顯示/隱藏內容的 jQuery Mobile 元件觸發。
vclick 虛擬化的 click 事件處理器
vmousecancel 虛擬化的 mousecancel 事件處理器
vmousedown 虛擬化的 mousedown 事件處理器
vmousemove 虛擬化的 mousemove 事件處理器
vmouseout 虛擬化的 mouseout 事件處理器
vmouseover 虛擬化的 mouseover 事件處理器
vmouseup 虛擬化的 mouseup 事件處理器

 

相關文章