pagebeforeshow 事件

实例

在页面切换后显示之前，弹出文本信息:

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

定义和用法

pagebeforeshow 是在页面切换后显示之前，触发的事件。

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

语法

To trigger the event for all pages in 在 jQuery Mobile 中为所有页面触发事件:

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

为指定页面触发事件:

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

参数	描述
function(event,data)	必须。指定 pagebeforeshow 事件触发时执行的函数。该函数包含以下两个参数：事件对象包括任何jQuery事件属性 ( event.target, event.type 等) 。数据对象包含属性 prevPage, 该属性返回过渡的上一个页面。
page	可选。 pagebeforeshow 事件指向的页面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>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.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.2/jquery.mobile.min.js"></script>
<script>
$(document).on("pagebeforeshow",function(event){
  $("span").text(event.type);
}); 
</script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Header Text</h1>
  </div>

  <div data-role="content">
    <p>The <span style="color:red">unknown</span> event was triggered.</p>
  </div>

  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 

</body>
</html>

使用 event.type 属性返回触发的事件类型。

数据对象

<!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(event,data){
  alert(data.prevPage.attr("id") +" 即将隐藏");
});
$(document).on("pagebeforeshow","#pagetwo",function(){
  alert("页面二即将展示");
})
</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>

使用 prevPage 属性返回过渡的上一个页面。

pagebeforeshow 事件

pagebeforeshow 事件

实例

定义和用法

语法

更多实例

演示相关事件

事件对象

数据对象

选择支付方式：