Jquery Mobile实现页面切换

2019独角兽企业重金招聘Python工程师标准>>>

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

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

切换	描述
fade	默认，淡入到下一页
filp	从后向前翻转到下一页
flow	抛出当前页，进入下一页
pop	像弹出窗口一样转到下一页
slide	从右向左滑动到下一页
sildefade	从右向左滑动并淡入到下一页
sildeup	从下到上滑动到下一页
slidedown	从上到下滑动到下一页
turn	转向下一页
none	无切换效果

 

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

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

运行结果

 

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

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

转载于:https://my.oschina.net/u/2971691/blog/883081