4.3 不断切换的场景
作为一款真正具有使用价值的应用，首先应该至少有两个页面，通过页面的切换来实现更多的交互。比如手机人人网，打开以后先进入登录页面，登录后会有新鲜事，然后拉开左边的面板，能看到相册、悄悄话、应用之类的其他内容。
在jQuery Mobile中，页面的切换是通过链接来实现的，这跟HTML完全一样。有所不同的是，jQuery Mobile为了使开发者能够创造出更好的交互性，提供了10种不同的切换效果。下面来看一个例子：
【范例4-4 jQuery Mobile中的场景切换】
01 <! DOCTYPE html>
02
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <meta name="viewport" content="width=device-width, initial-scale=2">
06 <title>页面间的切换</title>
07 <link rel="stylesheet" href="jquery.mobile.min.css" />
08 <script src="jquery-2.1.4.min.js"></script>
09 <script src="jquery.mobile.min.js"></script>
10 <! --<script type="text/javascript" src="cordova.js"></script>-->
11 </head>
12 <body>
13 <div data-role="page">
14 <! --使用默认切换方式，效果为渐显-->
15 <a href="demo.html" data-role="button">页面间的切换</a>
16 <! --data-transition="fade" 定义切换方式渐显-->
17 <a data-role="button" href="demo.html" data-transition="fade"
data-direction="reverse">fade</a>
18 <! --data-transition="pop" 定义切换方式扩散-->
19 <a data-role="button" href="demo.html" data-transition="pop" data-
direction="reverse">pop</a>
20 <! --data-transition="flip" 定义切换方式展开-->
21 <a data-role="button" href="demo.html" data-transition="flip"
data-direction="reverse">flip</a>
22 <! --data-transition="turn" 定义切换方式翻转覆盖-->
23 <a data-role="button" href="demo.html" data-transition="turn"
data-direction="reverse">turn</a>
24 <! --data-transition="flow" 定义切换方式扩散覆盖-->
25 <a data-role="button" href="demo.html" data-transition="flow"
data-direction="reverse">flow</a>
26 <! --data-transition="slidefade" 定义切换方式滑动渐显-->
27 <a data-role="button" href="demo.html"
data-transition="slidefade">slidefade</a>
28 <! --data-transition="slide" 定义切换方式滑动-->
29 <a data-role="button" href="demo.html" data-transition="slide"
data-direction="reverse">slide</a>
30 <! --data-transition="slidedown" 定义切换方式向下滑动-->
31 <a data-role="button" href="demo.html"
data-transition="slidedown">slidedown</a>
32 <! --data-transition="slideup" 定义切换方式向上滑动-->
33 <a data-role="button" href="demo.html" data-transition="slideup"
>slideup</a>
34 <! --data-transition="none" 定义切换方式“无”-->
35 <a data-role="button" href="demo.html" data-transition="none"
data-direction="reverse">none</a>
36 </div>
37 </body>
38 </html>
除此之外，还需要另外一个页面demo.html：
<! DOCTYPE html>
<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.min.css" />
<script src="jquery-2.1.4.min.js"></script>
<script src="jquery.mobile.min.js"></script>
<! --<script type="text/javascript" src="cordova.js"></script>-->
</head>
<body>
<div data-role="page">
<h1>快到我碗里来</h1>
</div>
</body>
</html>
运行效果如图4-4和图4-5所示。
图4-4 切换前的页面
图4-5 demo.html
范例4-4中第14～35行实际上在做同一件事情，即实现从index.html页面到demo.html页面的切换。在这里特别对这10种切换效果进行简短的说明：
<a href="demo.html" data-role="button">页面间的切换</a>
可以清楚地看到demo.html页面有一个渐显的动画效果。
<a data-role="button" href="demo.html" data-transition="fade" data-direction=
"reverse" >fade</a>
运行后发现与不加入data-transition属性的效果相同，也就是说，在jQuery Mobile中，将会默认给转场加入渐显渐隐的动画效果。
<a data-role="button" href="demo.html" data-transition="pop" data-direction=
"reverse">pop</a>
demo页面在原页面的中央部分渐渐变大最终覆盖整个页面。
<a data-role="button" href="demo.html" data-transition="flip" data-direction=
"reverse" >flip</a>
demo页面在原页面中央最初以一个竖条的方式出现，先向两端扩张，当放大到正常页面比例后渐渐变大，直至覆盖整个页面。
<a data-role="button" href="demo.html" data-transition="turn" data-direction=
"reverse" >turn</a>
demo页面在原页面中央最初以一个竖条的方式出现，纵向进行翻转后放大到覆盖整个页面。
<a data-role="button" href="demo.html" data-transition="flow" data-direction=
"reverse" >flow</a>
demo页面在原页面中央部分渐渐变大并逐渐覆盖整个页面，同时可以看见原页面逐渐缩小直至完全被demo页面中的内容覆盖。
<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页面在原页面上方出现，并向下移动至中心。
<a data-role="button" href="demo.html" data-transition="none" data-direction=
"reverse" >none</a>
注意
在以上的10种动画中，除fade与none两种效果是所有浏览器均支持的，其他8种效果的实现均需要设备浏览器具有3D支持。
jQuery Mobile的官方文档中给出了一种应对不兼容情况的方法，即在CSS文件中加入下面的代码，经笔者实践，确实能够在一定程度上解决切换时的屏闪问题。
.ui-page { -WebKit-backface-visibility: hidden; }
但是要想真正从根本上解决页面切换时闪屏的问题，只能依靠硬件的发展。