小白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连载四（场景切换）

浏览数：26 / 时间：2015年06月11日

作为一款真正有使用价值的应用，首先应该至少有两个页面，通过页面的切换来实现更多的交互。比如手机人人网，打开以后先是进入登录页面，登录后会有新鲜事，然后拉开左边的面板，能看到相册、悄悄话、应用之类的其他内容。

在jQuery Mobile中页面的切换是通过链接来实现的，这点跟HTML完全一样。有所不同的是，jQuery Mobile为了使开发者能够创造出能好的交互性，提供了10种不同的切换效果。下面来看一个例子：

【范例4-4 jQuery Mobile中的场景切换】

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=2">
<title>页面间的切换</title>
<link rel="stylesheet" href="jquery.mobile-1.0.min.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<div data-role="page">
<!—使用默认切换方式，效果为渐显-->
<a href="demo.html" data-role=”button”>页面间的切换</a>
<a data-role=”button” href="demo.html" data-transition="fade" data-direction="reverse">fade</a>
<a data-role=”button” href="demo.html" data-transition="pop" data-direction="reverse">pop</a>
<a data-role=”button” href="demo.html" data-transition="flip" data-direction="reverse">flip</a>
<a data-role=”button” href="demo.html" data-transition="turn" data-direction="reverse">turn</a>
<a data-role=”button” href="demo.html" data-transition="flow" data-direction="reverse">flow</a>
<a data-role=”button” href="demo.html" data-transition="slidefade" >slidefade</a>
<a data-role=”button” href="demo.html" data-transition="slide" data-direction="reverse">slide</a>
<a data-role=”button” href="demo.html" data-transition="slidedown" >slidedown</a>
<a data-role=”button” href="demo.html" data-transition="slideup" >slideup</a>
<a data-role=”button” href="demo.html" data-transition="none" data-direction="reverse">none</a>
</div>
</body>
</html>

除此之外，还需要另外一个页面demo.html：

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=2">
<title>无标题文档</title>
<link rel="stylesheet" href="jquery.mobile-1.0.min.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<div data-role="page">
<h1>快到我碗里来</h1>
</div>
</body>
</html>

运行效果如图4-4、图4-5所示。

图4-4 图4-5

上例中第14~24行实际上在做同一件事情，即实现从index.html页面到demo.html页面的切换。在这里特别对这10种切换效果做一个简短的说明：

<a href="demo.html" data-role=”button”>页面间的切换</a>

可以清楚的看到demo.html页面有一个渐显的动画效果。

运行后发现与不加入data-transition属性的效果相同，也就是说，在jQuery Mobile中，将会默认给转场加入渐显渐隐的动画效果。

demo页面在原页面的中央部分渐渐变大最终覆盖整个页面。

demo页面在原页面中央最初以一个竖条的方式出现，先向两端扩张，当放大到正常页面比例后渐渐变大，直至覆盖整个页面。

demo页面在原页面中央最初以一个竖条的方式出现纵向进行翻转后放大到覆盖整个页面。

demo页面在原页面中央部分渐渐变大并逐渐覆盖整个页面，同时可以看见原页面逐渐缩小直至完全被triansitions2覆盖。

<a data-role=”button” href="demo.html"data-transition="slidefade" data-direction="reverse" >slidefade</a>

demo页面在原页面右侧出现，移动至中心，并在这一过程中渐显。

<a data-role=”button” href="demo.html"data-transition="slide" data-direction="reverse">slide</a>

demo页面在原页面右侧出现，移动至中心。

<a data-role=”button” href="demo.html"data-transition="slideup" data-direction="reverse" >slideup</a>

demo页面在原页面下方出现，并向上移动至中心。

<a data-role=”button” href="demo.html"data-transition="slidedown" data-direction="reverse" >slidedown</a>

demo页面在原页面上方出现，并向下移动到中心。

没有任何效果。

注意：在以上的10种动画中，除了fade与none两种效果是所有浏览器均支持的，其他8种效果的实现均需要依赖于设备浏览器具有3D支持。因此，对于android 2.Xs设备来说，许多效果是无效的，这时系统会默认将切换效果转换为渐显。还有一些设备虽然能够实现这些效果，但由于硬件本身限制，在实现这些效果时会在结束时产生卡顿以及页面闪烁的问题。因此开发者在使用这些效果时要特别谨慎，好在随着技术的提高，不兼容这些效果的设备最终会退出我们的视野，这对开发者来说是一个好消息。

在jQuery Mobile的官方文档中给出了一种应对不兼容情况的方法，即在CSS文件中加入这样一句代码，经笔者实验，确实能够在一定程度上，解决切换时的屏闪问题。

.ui-page {-webkit-backface-visibility: hidden; }

但是要想真正从根本上解决页面切换时闪屏的问题，还只能依靠硬件的发展，笔者一直坚信这一天很快就会到来。

jQueryMobile可用度越来越高，入门门槛低，可以少写代码来生成移动设备友好的界面。《构建跨平台APP：jQuery Mobile移动应用实战》这本书采用实例驱动的方式介绍jQueryMobile下的APP开发，全书提供70余个实战案例教会读者进行移动开发，最后还通过6个小型项目来复习和巩固所学知识点。