【JQuery Mobile移动应用开发实战】JQuery Mobile基础——JQuery Mobile的高级特性

最新推荐文章于 2024-03-14 11:41:46 发布

shen子怡

最新推荐文章于 2024-03-14 11:41:46 发布

阅读量1.1k

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/lht964249279/article/details/122792664

版权

文章目录

- 7. JQuery Mobile的高级特性

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的面板。