jQuery Mobile 頁(yè)面事件

在 jQuery Mobile 中與頁(yè)面打交道的事件被分為四類(lèi)：

  • 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 事件

當(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í)例

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

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

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

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

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例

jQuery Mobile Load 事件

頁(yè)面加載事件屬于外部頁(yè)面。

無(wú)論外部頁(yè)面何時(shí)載入 DOM，將觸發(fā)兩個(gè)事件。第一個(gè)是 pagebeforeload，第二個(gè)是 pageload （成功）或 pageloadfailed（失?。?/p>

下表中解釋了這些事件：

事件描述
pagebeforeload在任何頁(yè)面加載請(qǐng)求作出之前觸發(fā)。
pageload在頁(yè)面已成功加載并插入 DOM 后觸發(fā)。
pageloadfailed如果頁(yè)面加載請(qǐng)求失敗，則觸發(fā)該事件。默認(rèn)地，將顯示 "Error Loading Page" 消息。

下列演示 pageload 和 pagloadfailed 事件的工作原理：

實(shí)例

<!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("抱歉，被請(qǐng)求頁(yè)面不存在。");
});
</script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>頁(yè)眉文本</h1>
  </div>

  <div data-role="main" class="ui-content">
    <a href="externalpage.html">外部頁(yè)面</a>
    <br><br>
    <a href="externalnotexist.html">外部頁(yè)面不存在</a>
  </div>

  <div data-role="footer">
    <h1>頁(yè)腳文本</h1>
  </div>
</div> 

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例

jQuery Mobile 過(guò)渡事件

我們還可以在從一頁(yè)過(guò)渡到下一頁(yè)時(shí)使用事件。

頁(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í)例

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

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>頁(yè)眉文本</h1>

  </div>

  <div data-role="main" class="ui-content"> 
    <p>頁(yè)面一</p>
    <a href="#pagetwo">轉(zhuǎn)到頁(yè)面二</a>
  </div>

  <div data-role="footer">
    <h1>頁(yè)腳文本</h1>
  </div>
</div> 

<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>頁(yè)眉文本</h1>

  </div>

  <div data-role="main" class="ui-content">
    <p>頁(yè)面二</p>
    <a href="#pageone">轉(zhuǎn)到頁(yè)面一</a>
  </div>

  <div data-role="footer">
    <h1>頁(yè)腳文本</h1>
  </div>
</div> 

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例