免費(fèi)AI編程助手
jQuery Mobile頁(yè)面事件
jQuery Mobile 頁(yè)面事件
jQuery Mobile 頁(yè)面事件
在 jQuery Mobile 中與頁(yè)面打交道的事件被分為四類：
- 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 事件
jQuery Mobile頁(yè)面初始化中的初始化指的是頁(yè)面增強(qiáng)，即 jQuery Mobile 對(duì)頁(yè)面組件的樣式、功能和交互進(jìn)行豐富并增強(qiáng)的過(guò)程，在這個(gè)過(guò)程中也會(huì)觸發(fā)一系列事件。
當(dāng) jQuery Mobile 中的一張典型頁(yè)面進(jìn)行初始化時(shí)，它會(huì)經(jīng)歷三個(gè)階段：
- 在頁(yè)面創(chuàng)建前
- 頁(yè)面創(chuàng)建
- 頁(yè)面初始化
每個(gè)階段觸發(fā)的事件都可用于插入或操作代碼。
| 事件 | 描述 |
|---|---|
| pagebeforecreate | 當(dāng)頁(yè)面即將初始化，并且在 jQuery Mobile 已開(kāi)始增強(qiáng)頁(yè)面之前，觸發(fā)該事件。 |
| pagecreate | 當(dāng)頁(yè)面已創(chuàng)建，但增強(qiáng)完成之前，觸發(fā)該事件。 |
| pageinit | 當(dāng)頁(yè)面已初始化，并且在 jQuery Mobile 已完成頁(yè)面增強(qiáng)之后，觸發(fā)該事件。 |
下面的例子演示在 jQuery Mobile 中創(chuàng)建頁(yè)面時(shí)，何時(shí)觸發(fā)每種事件：
實(shí)例
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（失?。?/p>
jQuery Mobile 提供了這些 API ，可以使開(kāi)發(fā)者可以方便地在頁(yè)面加載前后對(duì)頁(yè)面數(shù)據(jù)進(jìn)行處理。
下表中解釋了這些事件：
| 事件 | 描述 |
|---|---|
| pagebeforeload | 在任何頁(yè)面加載請(qǐng)求作出之前觸發(fā)。 |
| pageload | 在頁(yè)面已成功加載并插入 DOM 后觸發(fā)。 |
| pageloadfailed | 如果頁(yè)面加載請(qǐng)求失敗，則觸發(fā)該事件。默認(rèn)地，將顯示 "Error Loading Page" 消息。 |
下列演示 pageload 和 pagloadfailed 事件的工作原理：
實(shí)例
alert("觸發(fā) pageload 事件！\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
alert(";抱歉，被請(qǐng)求頁(yè)面不存在。");
});
嘗試一下 ?
jQuery Mobile 過(guò)渡事件
我們還可以在從一頁(yè)過(guò)渡到下一頁(yè)時(shí)使用事件。
在jQuery Mobile中，我們可以設(shè)置從一個(gè)頁(yè)面到另一個(gè)頁(yè)面的效果，那就是過(guò)渡(transitions)。
頁(yè)面過(guò)渡涉及兩個(gè)頁(yè)面：一張"來(lái)"的頁(yè)面和一張"去"的頁(yè)面 - 這些過(guò)渡使當(dāng)前活動(dòng)頁(yè)面（"來(lái)的"頁(yè)面）到新頁(yè)面（"去的"頁(yè)面的改變過(guò)程變得更加動(dòng)感。
| 事件 | 描述 |
|---|---|
| pagebeforeshow | 在"去的"頁(yè)面觸發(fā)，在過(guò)渡動(dòng)畫(huà)開(kāi)始前。 |
| pageshow | 在"去的"頁(yè)面觸發(fā)，在過(guò)渡動(dòng)畫(huà)完成后。 |
| pagebeforehide | 在"來(lái)的"頁(yè)面觸發(fā)，在過(guò)渡動(dòng)畫(huà)開(kāi)始前。 |
| pagehide | 在"來(lái)的"頁(yè)面觸發(fā)，在過(guò)渡動(dòng)畫(huà)完成后。 |
下列演示了過(guò)渡時(shí)間的工作原理：
實(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)進(jìn)入頁(yè)面二時(shí)
alert("頁(yè)面二即將隱藏");
});
$(document).on("pagehide","#pagetwo",function(){ // When leaving pagetwo
alert("現(xiàn)在隱藏頁(yè)面二");
});
嘗試一下 ?
有關(guān)jQuery Mobile頁(yè)面事件的內(nèi)容就介紹到這，請(qǐng)你根據(jù)文中提及的實(shí)例，練習(xí)使用該頁(yè)面事件！
更多建議：