jquery page 事件加载顺序生命周期

最新推荐文章于 2023-04-27 19:24:26 发布

心鑫

最新推荐文章于 2023-04-27 19:24:26 发布

阅读量9.5k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/proud2005/article/details/44259421

本文介绍了一个使用jQuery Mobile框架实现的简单示例应用，该应用包含两个页面：页面一和页面二。通过页面间的导航触发了各种页面生命周期事件，如页面显示前、显示中、隐藏前和隐藏等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>

$(document).on("pagebeforeshow","#pagetwo",function(){
   console.log("pagetwo pagebeforeshow");
});
$(document).on("pageshow","#pagetwo",function(){
  console.log("pagetwo pageshow");
});
$(document).on("pagebeforehide","#pagetwo",function(){
   console.log("pagetwo pagebeforehide");
});
$(document).on("pagehide","#pagetwo",function(){
   console.log("pagetwo pagehide");
});
$(document).on("pagebeforeshow","#pageone",function(){
   console.log("pageone pagebeforeshow");
});
$(document).on("pageshow","#pageone",function(){
  console.log("pageone pageshow");
});
$(document).on("pagebeforehide","#pageone",function(){
   console.log("pageone pagebeforehide");
});
$(document).on("pagehide","#pageone",function(){
   console.log("pageone pagehide");
});
$(document).on("pagebeforecreate","#pageone",function(){
   console.log("pageone pagebeforecreate");
});
$(document).on("pagecreate","#pageone",function(){
  console.log("pageone pagecreate");
});
$(document).on("pageinit","#pageone",function(){
   console.log("pageone pageinit");
});
$(document).on("pagebeforeload",function(event,data){
   console.log("pageone pagebeforeload");
});
$(document).on("pageload",function(event,data){
  console.log("pageone pageload");
});
$(document).on("pageloadfailed",function(event,data){
   console.log("pageone pageloadfailed");
});
$(document).on("pagebeforechange",function(event,data){
   console.log("pagebeforechange");
});
$(document).on("pagechange",function(event,data){
  console.log("pagechange");
});
$(document).on("pagechangefailed",function(event,data){
   console.log("pagechangefailed");
});
</script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>页眉文本</h1>

  </div>

  <div data-role="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="content">
    <p>页面二</p>
    <a href="#pageone">转到页面一</a>
  </div>

  <div data-role="footer">
    <h1>页脚文本</h1>
  </div>
</div> 

</body>
</html>