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

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

2.4 转换

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

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

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

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

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

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

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

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

提示:

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

《jQuery Mobile快速入门》—— 2.4 转换
上一篇:《jQuery Mobile快速入门》—— 1.5 响应式设计


下一篇:浅谈机器学习时代的哈希算法(二)