jQuery Mobile 頁面事件

在 jQuery Mobile 中與頁面打交道的事件被分為四類：

  • Page Initialization - 在頁面創(chuàng)建前，當頁面創(chuàng)建時，以及在頁面初始化之后

  • Page Load/Unload - 當外部頁面加載時、卸載時或遭遇失敗時

  • Page Transition - 在頁面過渡之前和之后

  • Page Change - 當頁面被更改，或遭遇失敗時

如需關于所有 jQuery Mobile 事件的完整信息，請訪問我們的 jQuery Mobile 事件參考手冊。

jQuery Mobile Initialization 事件

當 jQuery Mobile 中的一張典型頁面進行初始化時，它會經歷三個階段：

  • 在頁面創(chuàng)建前

  • 頁面創(chuàng)建

  • 頁面初始化

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

事件描述
pagebeforecreate當頁面即將初始化，并且在 jQuery Mobile 已開始增強頁面之前，觸發(fā)該事件。
pagecreate當頁面已創(chuàng)建，但增強完成之前，觸發(fā)該事件。
pageinit當頁面已初始化，并且在 jQuery Mobile 已完成頁面增強之后，觸發(fā)該事件。

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

實例

<!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 事件觸發(fā) - 頁面即將初始化。jQuery Mobile 還未增強頁面");
});                     
$(document).on("pagecreate",function(){
  alert("pagecreate 事件觸發(fā) - 頁面已經創(chuàng)建，但還未增強完成");
});
</script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>頭部文本</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>頁面已創(chuàng)建，并增強完成。</p>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

jQuery Mobile Load 事件

頁面加載事件屬于外部頁面。

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

下表中解釋了這些事件：

事件描述
pagebeforeload在任何頁面加載請求作出之前觸發(fā)。
pageload在頁面已成功加載并插入 DOM 后觸發(fā)。
pageloadfailed如果頁面加載請求失敗，則觸發(fā)該事件。默認地，將顯示 "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 事件觸發(fā)!\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 過渡事件

我們還可以在從一頁過渡到下一頁時使用事件。

頁面過渡涉及兩個頁面：一張"來"的頁面和一張"去"的頁面 - 這些過渡使當前活動頁面（"來的"頁面）到新頁面（"去的"頁面的改變過程變得更加動感。

事件描述
pagebeforeshow在"去的"頁面觸發(fā)，在過渡動畫開始前。
pageshow在"去的"頁面觸發(fā)，在過渡動畫完成后。
pagebeforehide在"來的"頁面觸發(fā)，在過渡動畫開始前。
pagehide在"來的"頁面觸發(fā)，在過渡動畫完成后。

下列演示了過渡時間的工作原理：

實例

<!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("觸發(fā) pagebeforeshow 事件 - 頁面二即將顯示");
});
$(document).on("pageshow","#pagetwo",function(){
  alert("觸發(fā) pageshow 事件 - 現在顯示頁面二");
});
$(document).on("pagebeforehide","#pagetwo",function(){
  alert("觸發(fā) pagebeforehide 事件 - 頁面二即將隱藏");
});
$(document).on("pagehide","#pagetwo",function(){
  alert("觸發(fā) 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>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例