现在移动设备已经是手机和平板的天下了,在使用手机和平板的时候,我们应该有这样的经历,通过手势触摸或者点击,可以实现页面的来回切换,这些功能同样可以使用jquery mobile来实现。
jQuery Mobile 提供了各种页面切换到下一个页面的效果。
切换 |
描述 |
fade |
默认,淡入到下一页 |
filp |
从后向前翻转到下一页 |
flow |
抛出当前页,进入下一页 |
pop |
像弹出窗口一样转到下一页 |
slide |
从右向左滑动到下一页 |
sildefade |
从右向左滑动并淡入到下一页 |
sildeup |
从下到上滑动到下一页 |
slidedown |
从上到下滑动到下一页 |
turn |
转向下一页 |
none |
无切换效果 |
上面表格中页面的切换效果都可使用data-transition属性实现
下面我们使用sildefade为例来实现页面的切换
运行结果
点击第一个页面的链接会从右向左滑动并淡入到第2个页面。
如果想更多的了解这些页面的切换效果,只需要把data-transition属性值改变即可。