白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》串行4（场景变化）
作为一个真正的利用价格值应用，首先，你应该至少有两页，通过切换页面来实现很多其他互动。比如手机人人网，首先，打开后进入登录页面，将有登录后，新的东西。然后拉左侧面板。你可以看到相册、私人信息、像其他应用程序。
在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>
<!--<script type="text/javascript" src="cordova.js"></script>-->
</head>
<body>
<div data-role="page">
<!—使用默认切换方式，效果为渐显-->
<a href="demo.html" data-role=”button”>页面间的切换</a>
<!-- data-transition="fade" 定义切换方式渐显-->
<a data-role=”button” href="demo.html" data-transition="fade" data-direction="reverse">fade</a>
<!-- data-transition="pop" 定义切换方式扩散-->
<a data-role=”button” href="demo.html" data-transition="pop" data-direction="reverse">pop</a>
<!-- data-transition="flip" 定义切换方式展开-->
<a data-role=”button” href="demo.html" data-transition="flip" data-direction="reverse">flip</a>
<!-- data-transition="turn" 定义切换方式翻转覆盖-->
<a data-role=”button” href="demo.html" data-transition="turn" data-direction="reverse">turn</a>
<!-- data-transition="flow" 定义切换方式扩散覆盖-->
<a data-role=”button” href="demo.html" data-transition="flow" data-direction="reverse">flow</a>
<!-- data-transition="slidefade" 定义切换方式滑动渐显-->
<a data-role=”button” href="demo.html" data-transition="slidefade" >slidefade</a>
<!-- data-transition="slide" 定义切换方式滑动-->
<a data-role=”button” href="demo.html" data-transition="slide" data-direction="reverse">slide</a>
<!-- data-transition="slidedown" 定义切换方式向下滑动-->
<a data-role=”button” href="demo.html" data-transition="slidedown" >slidedown</a>
<!-- data-transition="slideup" 定义切换方式向上滑动-->
<a data-role=”button” href="demo.html" data-transition="slideup" >slideup</a>
<!-- data-transition="none" 定义切换方式“无”-->
<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>
<!--<script type="text/javascript" src="cordova.js"></script>-->
</head>
<body>
<div data-role="page">
<h1>快到我碗里来</h1>
</div>
</body>
</html>
执行效果如图4-4、图4-5所看到的。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYm9va3poYW9waW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
图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个小型项目来复习和巩固所学知识点。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYm9va3poYW9waW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》串行4（场景变化）的更多相关文章
- 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载一（PhoneGap中的API）
之前本博连载过<构建跨平台APP:jQuery Mobile移动应用实战>一书.深受移动开发入门人员的喜爱. 从如今開始,连载它的孪生姐妹书phoneGap移动应用实战一书,希望以前是小白 ...
- 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载四（使用程序载入事件）
在了解了PhoneGap中都有哪些事件之后,本节将開始对这些事件的使用方法进行具体地介绍.本节要介绍的是程序载入事件,也就是deviceready.pause和resume这3个事件. [范例4-2 ...
- 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载五（使用PhoneGap获取设备信息）
除了能够将HTML页面打包成可以直接安装运行的APP外,PhoneGap的一个最大优势在于可以通过JavaScript调用设备来访问设备上的硬件信息,从而实现一些原本只有依靠原生SDK才能够达到的目的 ...
- 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载三（通过实例来体验生命周期）
4.1.2 通过实例来亲身体验Activity的生命周期 上一小节介绍了Activity生命周期中的各个过程,本小节将以一个简单的实例来使读者亲身体验到Activity生命周期中的各个事件. 在Ec ...
- 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载二（生命周期）
4.1 什么是生命周期 想要真正地理解PhoneGap应用开发的内涵,首先需要理解什么是生命周期.这在字面上其实非常容易理解,一个应用从开始运行被手机加载到应用被退出之间的过程就称之为一个生命周期.为 ...
- 【原创】小白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连载五（给按钮加图标）
在范例5-4所使用的导航栏中,已经为按钮加入了图标的样式,但是当时并没有介绍按钮的图标究竟是怎么一回事.下面截取范例5-4中导航栏部分的代码: <divdata-role="foote ...
- 小白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连载四（场景切换）
作为一款真正有使用价值的应用,首先应该至少有两个页面,通过页面的切换来实现更多的交互.比如手机人人网,打开以后先是进入登录页面,登录后会有新鲜事,然后拉开左边的面板,能看到相册.悄悄话.应用之类的其他 ...
- jquery Mobile应用第2课《构建跨平台APP：jQuery Mobile移动应用实战》连载二（简单的QWER键盘）
在jQuery Mobile的布局中,控件大多都是单独占据页面中的一行,按钮自然也不例外,但是仍然有一些方法能够让多个按钮组成一行,比如说在范例6-5中就利用按钮分组的方法使4个按钮并列在一行中,如图 ...
- jqueryMobile应用第一课《构建跨平台APP：jQuery Mobile移动应用实战》连载一（Hello World）
有人说每个程序员都曾经有过改变世界的梦想,笔者认为,这与程序员年轻时编写的第一个程序有着莫大的关系.简简单单的一句“hello world”让年轻的心开始相信梦想,用一种低调的壮志凌云向世界展示自己的 ...
随机推荐
- MySQL HINT：Straight_JOIN
来自生产环境的朋友.可能都会碰到: 原本运行良好的查询语句,过了一段时间后,可能会突然变得很糟糕 一个很大可能的原因就是数据分布情况发生了变化 从而导致MySQL优化 ...
- MySQLdb的安装与使用
一.安装 安装已编译版本号(此方法简便快捷): http://www.codegood.com/downloads 依据自己系统下载,双击安装,搞定 然后import MySQLdb.查看是否成功 我 ...
- 函数式编程很难，这正是你要学习它的原因 | 外刊IT评论网
函数式编程很难,这正是你要学习它的原因 | 外刊IT评论网 函数式编程很难,这正是你要学习它的原因 156 次分享 新浪微博 腾讯微博 Tweet 人人网 QQ空间 很奇怪不是,很少有人每天都使用函数 ...
- 基于TFTP协议的远程升级设计
说明:因为CSDN博客编辑器对word格式近乎不支持.因此对表格使用了图片方式(最后一个表格未使用图片格式.大家能够看看效果),CSDN博客编辑器上传图片十分不人性化(直接复制图片是不显示的),因此本 ...
- 【Android小应用】颈椎保健操Android开源项目
前段时间在知乎上回答已入 IT 行业的前辈,有哪些关于保护身体健康的知识分享给 IT 新人? ,回复了一张图片,评论里面有知友希望通过程序可以实现,我后面尝试着通过程序实现了效果,现开源出来,大家可以 ...
- ARM架构和编程-4
ARM中断异常处理: ARM系统中止品种:按中断处理降序排列优先级:重置.数据访问中止.高速中断请求.外部中断请求.预取中止.令.软件中断. ARM体系中的异常中断向量表: 0x0 复位 0x4 没有 ...
- Domain Model（领域模型）
Domain Model(领域模型) 上一篇:<DDD 领域驱动设计-如何 DDD?> 开源地址:https://github.com/yuezhongxin/CNBlogs.Apply. ...
- xcode中找不到XXX.dylib
xcode中找不到 XXX.dylib 了,比如libz.tbd 如果要用到 libz.dylib,可以用下面的办法,来自 Stack Overflow. Go to Build Phases > ...
- H.O.T candy
candy是什么意思_candy在线翻译_英语_读音_用法_例句_海词词典 candy
- Java学习之道：空指针错误求解救？？？？？？？？？？？？
运行下面这个主方法红色代码的地方就报如下错: https://api.weibo.com/2/users/show.json?access_token=2.00szM9cCc4R_EC6ebcf150 ...