文章目录
- 7. JQuery Mobile的高级特性
- 7.1 JQuery Mobile的多页面模板
- 7.2 JQuery Mobile中的事件
- 7.3 JQuery Mobile中的触发事件
- 7.4 触发事件的简单应用
7. JQuery Mobile的高级特性
本章节将继续介绍一些JQuery Mobile的高级特性，包括JQuery Mobile中页面的转换、触发事件等内容。主要知识点包括：
- 页面的切换
- JQuery Mobile中事件的原理和构成
- JQuery Mobile中事件触发器的使用方法
- JQuery Mobile的数据属性
7.1 JQuery Mobile的多页面模板
第四章介绍了JQuery Mobile中的page控件，还介绍了通过链接的方式实现页面的切换，但这实际上是一种"错误"的做法。(虽然这是一种错误的方法，但许多时候不得不这样用)
因为在这之前介绍过的所有范例中，每个页面均有且只有一个page控件，但是实际上每个页面可能有多个page控件存在。
在页面上加入多个page控价：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多个page的页面</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="b" id="page_1" data-title="page_1">
<div data-role="header" data-position="fixed">
<a href="#">返回</a>
<h1>头部栏</h1>
<a href="#">设置</a>
</div>
<div data-role="content">
<a href="#page_1" data-role="button">第一页</a>
<a href="#page_2" data-role="button">第二页</a>
<a href="#page_3" data-role="button">第三页</a>
<a href="#page_4" data-role="button">第四页</a>
<a href="#page_5" data-role="button">第五页</a>
</div>
<div data-role="footer" data-position="fixed">
<h1>第一页</h1>
</div>
</div>
<div data-role="page" data-theme="a" id="page_2" data-title="page_2">
<div data-role="header" data-position="fixed">
<a href="#">返回</a>
<h1>头部栏</h1>
<a href="#">设置</a>
</div>
<div data-role="content">
<a href="#page_1" data-role="button">第一页</a>
<a href="#page_2" data-role="button">第二页</a>
<a href="#page_3" data-role="button">第三页</a>
<a href="#page_4" data-role="button">第四页</a>
<a href="#page_5" data-role="button">第五页</a>
</div>
<div data-role="footer" data-position="fixed">
<h1>第二页</h1>
</div>
</div>
<div data-role="page" data-theme="c" id="page_3" data-title="page_3">
<div data-role="header" data-position="fixed">
<a href="#">返回</a>
<h1>头部栏</h1>
<a href="#">设置</a>
</div>
<div data-role="content">
<a href="#page_1" data-role="button">第一页</a>
<a href="#page_2" data-role="button">第二页</a>
<a href="#page_3" data-role="button">第三页</a>
<a href="#page_4" data-role="button">第四页</a>
<a href="#page_5" data-role="button">第五页</a>
</div>
<div data-role="footer" data-position="fixed">
<h1>第三页</h1>
</div>
</div>
<div data-role="page" data-theme="d" id="page_4" data-title="page_4">
<div data-role="header" data-position="fixed">
<a href="#">返回</a>
<h1>头部栏</h1>
<a href="#">设置</a>
</div>
<div data-role="content">
<a href="#page_1" data-role="button">第一页</a>
<a href="#page_2" data-role="button">第二页</a>
<a href="#page_3" data-role="button">第三页</a>
<a href="#page_4" data-role="button">第四页</a>
<a href="#page_5" data-role="button">第五页</a>
</div>
<div data-role="footer" data-position="fixed">
<h1>第四页</h1>
</div>
</div>
<div data-role="page" data-theme="a" id="page_5" data-title="page_5">
<div data-role="header" data-position="fixed">
<a href="#">返回</a>
<h1>头部栏</h1>
<a href="#">设置</a>
</div>
<div data-role="content">
<a href="#page_1" data-role="button">第一页</a>
<a href="#page_2" data-role="button">第二页</a>
<a href="#page_3" data-role="button">第三页</a>
<a href="#page_4" data-role="button">第四页</a>
<a href="#page_5" data-role="button">第五页</a>
</div>
<div data-role="footer" data-position="fixed">
<h1>第五页</h1>
</div>
</div>
</body>
</html>效果如下：
当一个页面有多个page时，将会优先显示id为home的那一个，如果没有，则会按照代码的先后顺序对第一个page中的内容进行渲染。
7.2 JQuery Mobile中的事件
前面几乎都是围绕JQuery Mobile静态的一面进行讲解的。实际上JQuery Mobile也有动态的一面，而它的动态主要是依靠JQuery Mobile的各种事件来实现的。
下面将以一幅图来说明JQuery Mobile中的一些主要事件：
首先当手机浏览器加载一个JQuery Mobile文件时，便触发了一个mobile事件，可以简单地将它理解为一个初始化。初始化完成之后便会链接到一个页面，这时页面即将发生改变，因此就有了事件pagebeforechange。因为在改变之前首先要加载一些资源，所以图中pagebeforechange和pagebeforeload是紧密联系在一起的。
完成这些之后要对页面进行加载，加载完成后首先做一些简单的初始化，之后便可以正式创建页面了，这就是事件pagebeforecreate和pagecreate的作用。创建完成之后要加载pageinit和pageload两个事件。在这之前虽然页面已经被创建了，但这时的创建仅仅是一个空页面，只有完成了这两个事件才算是真正获得了一个有内容的页面。
之后的三个事件，pagebeforechange、pagebeforehide、pagebeforeshow是在为页面改变做预处理。在前面的步骤里，页面已经完成了渲染工作，这里要做的是将它们显示出来，或者说页面发生改变需要重新提示。
最后一个pagechange不必多解释。另外下面还有两个箭头分别指向了cachepage和new page，这两种不同的页面刷新就说明了为什么将多个page放在同一页面跳转会比较迅速。
页面改变事件 | 说明 |
pagebeforechange | 页面改变之前对页面进行检查和更新 |
pagechange | 页面改变 |
pagechangefailed | 页面改变失败 |
页面载入事件 | 说明 |
pagebeforeload | 页面预加载 |
pageload | 页面加载 |
pageloadfailed | 页面加载失败 |
页面初始化事件 | 说明 |
pagebeforecreate | 页面创建之前的准备 |
pagecreate | 创建页面 |
pageinit | 初始化页面 |
页面转换事件 | 说明 |
pagebeforehide | 页面转换时准备隐藏当前页面 |
pagebeforeshow | 转换时准备显示新页面 |
pagehide | 隐藏页面 |
pageshow | 显示页面 |
7.3 JQuery Mobile中的触发事件
上节提到页面会出现中途改变的情况，而页面的改变往往是由于接受了来自用户的某种输入，而触发事件则是为了获取用户的这些输入准备的。
JQuery Mobile的触发事件：
触摸事件 | 说明 |
Tap | 快速点击屏幕触发该事件 |
taphold | 按住屏幕不放触发该事件 |
Swipe | 手指在屏幕水平滑动触发该事件 |
Swipeleft | 手指在屏幕上向左滑动 |
Swiperight | 手指在屏幕上向右滑动 |
方向改变事件 | 说明 |
orientationchange | 设备方向改变(重力感应) |
滚动事件 | 说明 |
Scrollstart | 滚动开始时触发 |
Scrollstop | 滚动结束时触发 |
页面显示/隐藏事件 | 说明 |
pagebeforeshow | 页面正在显示，但动画效果还未开始 |
pagebeforehide | 页面正要被隐藏，但动画效果还没有开始 |
pagehide | 页面隐藏 |
pageshow | 页面显示 |
页面初始化事件 | 说明 |
pagebeforecreate | 页面正要进行初始化时 |
pagecreate | 页面初始化完成 |
对比之前的表会发现有许多重复的内容，事实正是这样，只不过是将一些事件从另外一个角度进行新的解释。区别在于，之前的表的事件大多由浏览器控制，上述表事件用来接收来自用户的输入，是可以被用户所决定的。但是这不免有一些交叉的领域，如页面显示/隐藏事件和页面初始化事件。
7.4 触发事件的简单应用
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!--<script src="cordova.js"></script>-->
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile-1.4.5.min.js"></script>
<script>
$( "#mypanel1" ).trigger( "updatelayout" );
$( "#mypanel2" ).trigger( "updatelayout" );
</script>
<script type="text/javascript">
$(document).ready(function(){
$("div").bind("swiperight", function(event) {
$( "#mypanel1" ).panel( "open" );
});
});
$(document).ready(function(){
$("div").bind("swipeleft", function(event) {
$( "#mypanel2" ).panel( "open" );
});
});
</script>
</head>
<body>
<div data-role="page" data-theme="c">
<div data-role="panel" id="mypanel1" data-theme="b">
<h1>向右滑动屏幕</h1>
</div>
<div data-role="panel" id="mypanel2" data-theme="b" data-position="right">
<h1>向左滑动屏幕</h1>
</div>
<div data-role="content">
<h1>请尝试这对屏幕做些什么</h1>
</div>
</div>
</body>
</html>效果如下：
本节用到之前介绍过的面板控件，11-12是对它们的声明。16行有一个bind方法，起作用是监听，监听内容为：
$("div").bind("swipeleft", function(event)脚本内容为：
$( "#mypanel2" ).panel( "open" );打开一个id为mypanel2的面板。
