案例：jquery Mobile案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<link rel="stylesheet" href="/js/jquery.mobile-1.3.2.min.css">
5
<script src="/js/jquery-1.8.3.min.js"></script>
6
<script src="/js/jquery.mobile-1.3.2.min.js"></script>
7
<script>
8
$(document).on("pagebeforeshow","#pagetwo",function(){
9
  alert("触发 pagebeforeshow 事件 - 页面二即将显示");
10
});
11
$(document).on("pageshow","#pagetwo",function(){
12
  alert("触发 pageshow 事件 - 现在显示页面二");
13
});
14
$(document).on("pagebeforehide","#pagetwo",function(){
15
  alert("触发 pagebeforehide 事件 - 页面二即将隐藏");
16
});
17
$(document).on("pagehide","#pagetwo",function(){
18
  alert("触发 pagehide 事件 - 现在隐藏页面二");
19
});
20
</script>
21
</head>
22
<body>
23
​
24
<div data-role="page" id="pageone">
25
  <div data-role="header">
26
    <h1>页眉文本</h1>
27
​
28
  </div>
29
​
30
  <div data-role="content">
31
    <p>页面一</p>
32
    <a href="#pagetwo">转到页面二</a>
33
  </div>
34
​
35
  <div data-role="footer">
36
    <h1>页脚文本</h1>
37
  </div>
38
</div>
39
​
40
<div data-role="page" id="pagetwo">
41
  <div data-role="header">
42
    <h1>页眉文本</h1>
43
​
44
  </div>
45
​
46
  <div data-role="content">
47
    <p>页面二</p>
48
    <a href="#pageone">转到页面一</a>