jQuery Mobile 頁(yè)面事件

在 jQuery Mobile 中與頁(yè)面打交道的事件被分為四類(lèi)：

• Page Initialization - 在頁(yè)面創(chuàng)建前，當(dāng)頁(yè)面創(chuàng)建時(shí)，以及在頁(yè)面初始化之后
• Page Load/Unload - 當(dāng)外部頁(yè)面加載時(shí)、卸載時(shí)或遭遇失敗時(shí)
• Page Transition - 在頁(yè)面過(guò)渡之前和之后
• Page Change - 當(dāng)頁(yè)面被更改，或遭遇失敗時(shí)

如需關(guān)于所有 jQuery Mobile 事件的完整信息，請(qǐng)?jiān)L問(wèn)我們的 jQuery Mobile 事件參考手冊(cè)。

jQuery Mobile Initialization 事件

當(dāng) jQuery Mobile 中的一張典型頁(yè)面進(jìn)行初始化時(shí)，它會(huì)經(jīng)歷三個(gè)階段：

• 在頁(yè)面創(chuàng)建前
• 頁(yè)面創(chuàng)建
• 頁(yè)面初始化

每個(gè)階段觸發(fā)的事件都可用于插入或操作代碼。

下面的例子演示在 jQuery Mobile 中創(chuàng)建頁(yè)面時(shí)，何時(shí)觸發(fā)每種事件：

實(shí)例

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

親自試一試

jQuery Mobile Load 事件

頁(yè)面加載事件屬于外部頁(yè)面。

無(wú)論外部頁(yè)面何時(shí)載入 DOM，將觸發(fā)兩個(gè)事件。第一個(gè)是 pagebeforeload，第二個(gè)是 pageload （成功）或 pageloadfailed（失�。�。

下表中解釋了這些事件：

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

實(shí)例

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

親自試一試

jQuery Mobile 過(guò)渡事件

我們還可以在從一頁(yè)過(guò)渡到下一頁(yè)時(shí)使用事件。

頁(yè)面過(guò)渡涉及兩個(gè)頁(yè)面：一張“來(lái)”的頁(yè)面和一張“去”的頁(yè)面 - 這些過(guò)渡使當(dāng)前活動(dòng)頁(yè)面（“來(lái)的”頁(yè)面）到新頁(yè)面（“去的”頁(yè)面的改變過(guò)程變得更加動(dòng)感。

下列演示了過(guò)渡時(shí)間的工作原理：

實(shí)例

$(document).on("pagebeforeshow","#pagetwo",function(){ // 當(dāng)進(jìn)入頁(yè)面二時(shí)
  alert("頁(yè)面二即將顯示");
});
$(document).on("pageshow","#pagetwo",function(){ // 當(dāng)進(jìn)入頁(yè)面二時(shí)
  alert("現(xiàn)在顯示頁(yè)面二");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // 當(dāng)離開(kāi)頁(yè)面二時(shí)
  alert("頁(yè)面二即將隱藏");
});
$(document).on("pagehide","#pagetwo",function(){ // 當(dāng)離開(kāi)頁(yè)面二時(shí)
  alert("現(xiàn)在隱藏頁(yè)面二");
});

親自試一試