《jQuery Mobile快速入门》—— 2.4 转换

简介:

本节书摘来异步社区《jQuery Mobile快速入门》一书中的第2章,第2.4节,作者:【美】Brad Broulik,更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.4 转换

jQuery Mobile快速入门
在页面之间进行转换时,jQuery Mobile有6个可供选择的基于CSS的转换效果。默认情况下,框架会为所有的转换应用“滑动”效果。通过为任意链接、按钮或表单添加data-transition属性,我们可以设置其他的转换效果。

0c3c2c07d4e24b8fcfa7c7003de73d6dc8af8683 30be370ff843b792c5feae26e3443c7ba107b2d6

页面到页面的转换过程按照如下步骤发生。

1.用户轻敲按钮,以导航到下一个页面(见图2-5)。

2.框架使用一个Hijax请求载入下一个页面,然后添加到当前页面的DOM中。当前页面和下一个页面实际上是并排放置的,因此准备发生一个平滑转换(见图2-6)。

3.框架转换到下一个页面(见图2-7)。该示例使用了默认的“滑动”转换。

4.下一个页面得以显示,转换完成(见图2-8)。

7ddfab0ea46ca10d5ea09728572058a0355e1e2a 8b8703d05da0fc939bbff30477c932ceace9ff1e

提示:

通过为你的链接添加data-direction=“reverse”属性,可以设置一个“向后(backward)”转换。向前的“滑动”转换是向左滑动,因此向后的“滑动”转换是向右滑动。例如,当向历史访问页面转换时,默认情况下使用的是向后转换。但是,如果你的标题上有一个“home”链接,你需要应用data-direction=“reverse”属性,否则将会产生默认的“向前”转换效果。

78ed44791921f51257e1710ca765bdb938679faf
相关文章
|
JavaScript 前端开发 开发者
jQuery 下载与快速入门指南
jQuery 下载与快速入门指南
772 0
|
设计模式 JavaScript 前端开发
|
XML JavaScript 前端开发
【jQuery超快速入门教程】上篇
【jQuery超快速入门教程】上篇
272 0
|
JavaScript 前端开发 API
JavaWeb快速入门--jQuery
JavaWeb快速入门--jQuery
121 0
uiu
|
JavaScript 前端开发 开发者
【Jquery】 入门、快速上手、DOM/Jquery对象之间互相转换
【Jquery】 入门、快速上手、DOM/Jquery对象之间互相转换
uiu
308 0
【Jquery】 入门、快速上手、DOM/Jquery对象之间互相转换
|
设计模式 JavaScript 前端开发
学习JQuery的第一天(区分DOM与JQuery)(DOM与JQuery对象互相转换)
学习JQuery的第一天(区分DOM与JQuery)(DOM与JQuery对象互相转换)
205 0
学习JQuery的第一天(区分DOM与JQuery)(DOM与JQuery对象互相转换)
|
JavaScript
jquery和dom对象转换-7
jquery和dom对象转换-7
127 0
jquery和dom对象转换-7
|
设计模式 JavaScript 前端开发
【JQuery框架】JQuery对象和JS对象的区别和转换
【JQuery框架】JQuery对象和JS对象的区别和转换
352 0
【JQuery框架】JQuery对象和JS对象的区别和转换
|
JavaScript 索引
JavaWeb--快速入门jQuery(三)
JavaWeb--快速入门jQuery(三)
198 0
JavaWeb--快速入门jQuery(三)
|
JavaScript 前端开发 数据安全/隐私保护
JavaWeb--快速入门jQuery(二)
JavaWeb--快速入门jQuery(二)
235 0
JavaWeb--快速入门jQuery(二)