JSRUN 用代码说话

pagebeforehide 事件

编辑教程

pagebeforehide 事件

实例

在页面切换后旧页面隐藏之前弹出文本信息:

$(document).on("pagebeforehide","#pagetwo",function(){
  alert("pagebeforehide event fired - pagetwo is about to be hidden");
});

定义和用法

pagebeforehide 是在页面切换后老页面隐藏之前,触发的事件。

相关事件:

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

注意: 该事件在页面过渡开始/结束时触发。

语法

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

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

触发指定页面事件:

 $("document").on("pagebeforehide","page",function(event){...}) 尝试一下
参数 描述
function(event,data) 必须。指定 pagebeforehide 事件触发时执行的函数。

该函数含有以下两个参数:
事件对象
包括任何jQuery事件属性 ( event.target, event.type 等) 。
数据对象
包含属性 nextPage, 要返回的过渡页面。
page 可选。 指定 pagebeforehide 事件触发时指向的页面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 属性返回过渡的页面。

JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。 大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
支付宝
9.99
无法付款,请点击这里
金额: 0
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟