Événements de la page jQuery Mobile

Les événements qui traitent de la page dans jQuery Mobile sont divisés en quatre catégories :

Initialisation de la page - avant la création de la page, lorsque la page est créée et après l'initialisation de la page
Chargement/Déchargement de la page - lorsque la page externe est chargée, déchargée ou échoue
Transition de page - avant et après la transition de page
Changement de page - lorsque la page est modifiée ou échoue

Pour des informations complètes sur tous les événements jQuery Mobile, visitez notre référence des événements jQuery Mobile.

Événement d'initialisation de jQuery Mobile

Lorsqu'une page typique dans jQuery Mobile est initialisée, elle passe par trois étapes :

Avant la création de la page
Création de page
Initialisation de la page

Déclenché par chaque étape Les événements peuvent être utilisés pour insérer ou manipuler du code.

事件	描述
pagebeforecreate	当页面即将初始化，并且在 jQuery Mobile 已开始增强页面之前，触发该事件。
pagecreate	当页面已创建，但增强完成之前，触发该事件。
pageinit	当页面已初始化，并且在 jQuery Mobile 已完成页面增强之后，触发该事件。

L'exemple suivant montre quand chaque événement est déclenché lors de la création d'une page dans jQuery Mobile :

Instance

<!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>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Événement jQuery Mobile Load

L'événement de chargement de page appartient à une page externe .

Chaque fois que la page externe charge le DOM, deux événements seront déclenchés. Le premier est pagebeforeload, le second est pageload (succès) ou pageloadfailed (échec).

Ces événements sont expliqués dans le tableau ci-dessous :

事件	描述
pagebeforeload	在任何页面加载请求作出之前触发。
pageload	在页面已成功加载并插入 DOM 后触发。
pageloadfailed	如果页面加载请求失败，则触发该事件。默认地，将显示 "Error Loading Page" 消息。

Ce qui suit montre comment fonctionnent les événements pageload et pagloadfailed :

Instance

<!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>

Exécuter l'instance»

Cliquez sur Bouton "Exécuter l'instance" pour voir l'instance en ligne

Événements de transition jQuery Mobile

Nous pouvons également utiliser des événements lors de la transition d'une page à la suivante.

Les transitions de page impliquent deux pages : une page "à venir" et une page "à venir" - ces transitions déplacent la page actuellement active (la page "à venir") vers une nouvelle page (la page "à venir"). le processus de changement devient plus dynamique.

事件	描述
pagebeforeshow	在"去的"页面触发，在过渡动画开始前。
pageshow	在"去的"页面触发，在过渡动画完成后。
pagebeforehide	在"来的"页面触发，在过渡动画开始前。
pagehide	在"来的"页面触发，在过渡动画完成后。

Ce qui suit montre comment fonctionne le temps de transition :

Exemple

<!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>

Exécuter Instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Événements de la page jQuery Mobile