pagehide 事件

实例

在页面切换后旧的页面隐藏之后弹出一些文本信息：

$(document).on("pagehide","#pagetwo",function(){
  alert("pagehide event fired - pagetwo is now hidden");
});

定义和用法

pagehide 是在页面切换后老页面隐藏之后，触发的事件。

pagebeforehide	在页面切换后老页面隐藏之前，触发的事件。
pagebeforeshow	在页面切换后显示之前，触发的事件。
pageshow	在页面切换后显示之后，触发的事件。

语法

在 jQuery Mobile 中为所有页面触发事件:

 $("document").on("pagehide",function(event){...}) 尝试一下

为指定页面触发事件：

 $("document").on("pagehide","page",function(event,data){...}) 尝试一下

参数	描述
function(event,data)	必须。指定 pagehide 事件触发时执行的函数。该函数含有以下两个参数：事件对象包括任何jQuery事件属性 ( event.target, event.type 等) 。数据对象包含属性 nextPage, 要返回的过渡页面。
page	可选。指定 pagehide 事件触发时指向的页面id。内部页面, 请使用 #id。外部页面，请使用 externalfile.html。

更多实例

相关事件演示

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//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>

该实例展示了 pagebeforeshow, pageshow, pagebeforehide 和 pagehide 事件的触发。

事件对象

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagebeforehide","#pagetwo",function(event){
  $("p").html("<span> pagebeforehide 事件触发,1970年1月1日后 " + event.timeStamp + " 毫秒</span>");
});
</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>

使用 event.timeStamp 属性。

数据对象

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagebeforehide","#pagetwo",function(event,data){
  alert(data.nextPage.attr("id") +" 将要展示");
});
$(document).on("pagebeforehide","#pagetwo",function(){
  alert("页面二将被隐藏");
})
</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>

使用 nextPage 属性返回过渡的页面。

pagehide 事件

pagehide 事件

实例

定义和用法

语法

更多实例

相关事件演示

事件对象

数据对象

选择支付方式：