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