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

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

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

  1. <!DOCTYPE>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="viewport" content="width=device-width,initial-scale=2">
  6. <title>页面间的切换</title>
  7. <link rel="stylesheet" href="jquery.mobile-1.0.min.css" />
  8. <script src="jquery-1.7.1.min.js"></script>
  9. <script src="jquery.mobile-1.1.1.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：

  1. <!DOCTYPE>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="viewport" content="width=device-width,initial-scale=2">
  6. <title>无标题文档</title>
  7. <link rel="stylesheet" href="jquery.mobile-1.0.min.css" />
  8. <script src="jquery-1.7.1.min.js"></script>
  9. <script src="jquery.mobile-1.1.1.min.js"></script>
  10. <!--<script type="text/javascript" src="cordova.js"></script>-->
  11. </head>
  12. <body>
  13. <div data-role="page">
  14. <h1>快到我碗里来</h1>
  15. </div>
  16. </body>
  17. </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页面有一个渐显的动画效果。

<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页面在原页面中央部分渐渐变大并逐渐覆盖整个页面，同时可以看见原页面逐渐缩小直至完全被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页面在原页面上方出现，并向下移动到中心。

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

没有任何效果。

    注意：在以上的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个小型项目来复习和巩固所学知识点。

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

  1. 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载一（PhoneGap中的API）

    之前本博连载过<构建跨平台APP:jQuery Mobile移动应用实战>一书.深受移动开发入门人员的喜爱. 从如今開始,连载它的孪生姐妹书phoneGap移动应用实战一书,希望以前是小白 ...

  2. 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载四（使用程序载入事件）

    在了解了PhoneGap中都有哪些事件之后,本节将開始对这些事件的使用方法进行具体地介绍.本节要介绍的是程序载入事件,也就是deviceready.pause和resume这3个事件. [范例4-2 ...

  3. 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载五（使用PhoneGap获取设备信息）

    除了能够将HTML页面打包成可以直接安装运行的APP外,PhoneGap的一个最大优势在于可以通过JavaScript调用设备来访问设备上的硬件信息,从而实现一些原本只有依靠原生SDK才能够达到的目的 ...

  4. 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载三（通过实例来体验生命周期）

    4.1.2  通过实例来亲身体验Activity的生命周期 上一小节介绍了Activity生命周期中的各个过程,本小节将以一个简单的实例来使读者亲身体验到Activity生命周期中的各个事件. 在Ec ...

  5. 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载二（生命周期）

    4.1 什么是生命周期 想要真正地理解PhoneGap应用开发的内涵,首先需要理解什么是生命周期.这在字面上其实非常容易理解,一个应用从开始运行被手机加载到应用被退出之间的过程就称之为一个生命周期.为 ...

  6. 【原创】小白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连载五（给按钮加图标）

    在范例5-4所使用的导航栏中,已经为按钮加入了图标的样式,但是当时并没有介绍按钮的图标究竟是怎么一回事.下面截取范例5-4中导航栏部分的代码: <divdata-role="foote ...

  7. 白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》串行4（场景变化）

    作为一个真正的利用价格值应用,首先,你应该至少有两页,通过切换页面来实现很多其他互动.比如手机人人网,首先,打开后进入登录页面,将有登录后,新的东西.然后拉左侧面板.你可以看到相册.私人信息.像其他应 ...

  8. jquery Mobile应用第2课《构建跨平台APP：jQuery Mobile移动应用实战》连载二（简单的QWER键盘）

    在jQuery Mobile的布局中,控件大多都是单独占据页面中的一行,按钮自然也不例外,但是仍然有一些方法能够让多个按钮组成一行,比如说在范例6-5中就利用按钮分组的方法使4个按钮并列在一行中,如图 ...

  9. jqueryMobile应用第一课《构建跨平台APP：jQuery Mobile移动应用实战》连载一（Hello World）

    有人说每个程序员都曾经有过改变世界的梦想,笔者认为,这与程序员年轻时编写的第一个程序有着莫大的关系.简简单单的一句“hello world”让年轻的心开始相信梦想,用一种低调的壮志凌云向世界展示自己的 ...

随机推荐

  1. Spring的java.lang.IndexOutOfBoundsException: Remember that ordinal parameters are 1-based!异常处理方法

    使用Spring提供的模板类HibernateDaoSupport,如果单纯的使用'命名参数'的形式编写HQL语句如: public class UserDaoImpl extends Hiberna ...

  2. Eclipse Gtk+

    From: http://hi.baidu.com/spmno/item/9425018707f295dfd1f8cdbe 1. Project->Properties,然后选 C/C++ Bu ...

  3. Flex4/Flash开发在线音乐播放器 , 含演示地址

    要求 必备知识 本文要求基本了解 Adobe Flex编程知识和JAVA基础知识. 开发环境 MyEclipse10/Flash Builder4.6/Flash Player11及以上 演示地址 演 ...

  4. HTTP 500.22 错误解决

    打开网站对应的应用池-->高级设置-->托管管道模式改为classic

  5. SSH Secure Shell Client的傻瓜式使用方法

    说明:本记录仅是使用此软件的一种简单的操作方式,如果想深入研究,请做如下三件事: 1)到其官网了解她的前世今生 2)下载她.安装她.操作她(这一步需要不断的尝试.不断的深入.不断的探索,当然最好理论结 ...

  6. OS版本调研

    1引言 1.1 编写目的 本文的主要目的是通过对当前项目中使用的各种版本的操作系统进行比较,分析各自特性和稳定程度,最终推荐合适的版本作为当前的标准系统. 1.2 背景 当前,部门负责管理维护的现网使 ...

  7. mongodb replica set(副本集)设置步骤

    网上已经有一大堆的设置步骤的了,根据我遇到的问题,整理一下,如下: 首先先去下载一个mongodb最新版,目前最新版应该是2.6 cd /usr/local/bin wget http://fastd ...

  8. Arch Linux 安装记录

    Arch Linux 安装记录 基本上参考wiki上的新手指南,使用arch 2014.6.1 iso安装 设置网络 有线网络 Arch Linux 默认开启DHCP. 静态ip 首先关闭DHCP:s ...

  9. hbase很有价值的读写性能提升

    NoSQL现在风生水起,hbase的使用也越来越广,但目前几乎所有的NoSQL产品在运维上都没法和DB相提并论,在这篇blog中来总结下我们在运维hbase时的一些问题以及解决的方法,也希望得到更多h ...

  10. 在MFC程序中使用AnyCAD图形控件

    AnyCAD图形控件有.Net版本和C++两个版本,使用C++要比C#稍微繁杂一点.SDK中提供了针对MFC的文档视图的封装,只需改一下几个基类即可. 准备 VS2010 下载C++版本的AnyCAD ...