jQuery Mobile移动应用开发实战（第3版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

4.3　不断切换的场景

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

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

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

除此之外，还需要另外一个页面demo.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; }

但是要想真正从根本上解决页面切换时闪屏的问题，只能依靠硬件的发展。

上一章目录下一章