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

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

2.4　转换

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

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

1．用户轻敲按钮，以导航到下一个页面（见图2-5）。

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

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

4．下一个页面得以显示，转换完成（见图2-8）。

提示：

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