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 事件觸發!");
});
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(";抱歉,被请求页面不存在。");
});
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("现在隐藏页面二");
});
alert("页面二即将显示");
});
$(document).on("pageshow","#pagetwo",function(){ // 当进入页面二时
alert("现在显示页面二");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // 当进入页面二时
alert("页面二即将隐藏");
});
$(document).on("pagehide","#pagetwo",function(){ // When leaving pagetwo
alert("现在隐藏页面二");
});
嘗試一下»