pageshow 事件

实例

在页面切换后显示之后弹出信息：

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

定义和用法

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

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

语法

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

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

触发指定页面事件：

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

参数	描述
function(event,data)	必须。指定 pageshow 事件触发时执行的函数。该函数含有以下两个参数：事件对象包括任何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("pageshow",function(event){
  $("span").text(event.type);
}); 
</script>
</head>
<body>

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

  <div data-role="main" class="ui-content">
    <p><span style="color:red">unknown</span> 事件被触发。</p>
  </div>

  <div data-role="footer">
    <h1>底部文本</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("pageshow","#pagetwo",function(event,data){
  alert(data.prevPage.attr("id") +" 隐藏");
});
$(document).on("pageshow","#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 属性返回上一页面。

pageshow 事件

pageshow 事件

实例

定义和用法

语法

更多实例

相关事件演示

事件对象

数据对象

选择支付方式：