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 中建立頁面時，何時觸發每種事件：
實例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagebeforecreate",function(){
alert("pagebeforecreate 事件触发 - 页面即将初始化。jQuery Mobile 还未增强页面");
});
$(document).on("pagecreate",function(){
alert("pagecreate 事件触发 - 页面已经创建，但还未增强完成");
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>头部文本</h1>
</div>
<div data-role="main" class="ui-content">
<p>页面已创建，并增强完成。</p>
</div>
<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>
</body>
</html> 運行實例»##點擊"運行實例"按鈕查看線上實例
jQuery Mobile Load 事件
#頁面載入事件屬於外部頁面。
無論外部頁面何時載入 DOM，都會觸發兩個事件。第一個是 pagebeforeload，第二個是 pageload （成功）或 pageloadfailed（失敗）。
下表中解釋了這些事件：
事件 | 描述 |
pagebeforeload | 在任何頁面載入請求作出之前觸發。 |
pageload | 在頁面已成功載入並插入 DOM 後觸發。 |
pageloadfailed | 如果頁面載入要求失敗，則觸發該事件。預設地，將顯示 "Error Loading Page" 訊息。 |
下列示範pageload 和pagloadfailed 事件的工作原理：
實例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecontainerload",function(event,data){
alert("pagecontainerload 事件触发!\nURL: " + data.url);
});
$(document).on("pagecontainerloadfailed",function(event,data){
alert("抱歉，被请求页面不存在。");
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>页眉文本</h1>
</div>
<div data-role="main" class="ui-content">
<a href="externalpage.html">外部页面</a>
<br><br>
<a href="externalnotexist.html">外部页面不存在</a>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
</body>
</html>##執行實例»
#」執行實例" 按鈕查看線上實例
jQuery Mobile 過渡事件我們也可以在從一頁過渡到下一頁時使用事件。 頁面過渡涉及兩個頁面：一張"來"的頁面和一張"去"的頁面- 這些過渡使當前活動頁面（"來的"頁面）到新頁面（"去的"頁面的改變過程變得更加動感。 #在"去的"頁面觸發，在過渡動畫開始前。 #pagebeforehide在"來的"頁面觸發，在過渡動畫開始前。在"來的"頁面觸發，在過渡動畫完成後。 #<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagebeforeshow","#pagetwo",function(){
alert("触发 pagebeforeshow 事件 - 页面二即将显示");
});
$(document).on("pageshow","#pagetwo",function(){
alert("触发 pageshow 事件 - 现在显示页面二");
});
$(document).on("pagebeforehide","#pagetwo",function(){
alert("触发 pagebeforehide 事件 - 页面二即将隐藏");
});
$(document).on("pagehide","#pagetwo",function(){
alert("触发 pagehide 事件 - 现在隐藏页面二");
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>页眉文本</h1>
</div>
<div data-role="main" class="ui-content">
<p>页面一</p>
<a href="#pagetwo">转到页面二</a>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>页眉文本</h1>
</div>
<div data-role="main" class="ui-content">
<p>页面二</p>
<a href="#pageone">转到页面一</a>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
</body>
</html> | | 運行實例»
點擊"運行實例" 按鈕查看線上實例 | |
|
