top
Loading...
jQuery Mobile頁面事件

jQuery Mobile 頁面事件

jQuery Mobile 頁面事件

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

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

如需關於所有 jQuery Mobile 事件的完整信息,請訪問我們的 jQuery Mobile 事件參考手冊


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 事件觸發!");
});

嘗試一下 »


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(){ // When leaving pagetwo
  alert("現在隱藏頁面二");
});

嘗試一下 »
北斗有巢氏 有巢氏北斗