Jquery Mobile实现页面切换

时间:2022-11-30 11:42:28

现在移动设备已经是手机和平板的天下了,在使用手机和平板的时候,我们应该有这样的经历,通过手势触摸或者点击,可以实现页面的来回切换,这些功能同样可以使用jquery mobile来实现。

jQuery Mobile 提供了各种页面切换到下一个页面的效果。

切换

描述

fade

默认,淡入到下一页

filp

从后向前翻转到下一页

flow

抛出当前页,进入下一页

pop

像弹出窗口一样转到下一页

slide

从右向左滑动到下一页

sildefade

从右向左滑动并淡入到下一页

sildeup

从下到上滑动到下一页

slidedown

从上到下滑动到下一页

turn

转向下一页

none

无切换效果

 

上面表格中页面的切换效果都可使用data-transition属性实现

下面我们使用sildefade为例来实现页面的切换

Jquery Mobile实现页面切换

运行结果

Jquery Mobile实现页面切换 

点击第一个页面的链接会从右向左滑动并淡入到第2个页面。

如果想更多的了解这些页面的切换效果,只需要把data-transition属性值改变即可。