全屏

jQuery Mobile 过渡


jQuery Mobile 包含 CSS3 效果让您选择页面打开的方式。


jQuery Mobile 页面切换效果

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

注意:为了实现页面切换效果,浏览器必须支持 CSS3 3D 切换:






12.010.016.04.015.0

表格中的数字为支持 3D 旋转的最小浏览器版本号。

页面过渡效果可被应用于任何使用 data-transition 属性的链接或表单:

页面切换效果可被应用于任何使用 data-transition 属性的链接或表单提交:

<a href="#anylink" data-transition="slide">切换到第二个页面</a>

下面的表格显示了通过使用 data-transition 属性后可用的页面切换:

过渡描述页面对话框
fade默认。淡入到下一页

运行结

单击链接查看淡入效果。
淡入第二个页面


尝试一下

点击链接查看淡入效果。
淡入对话框页面


flip从后向前翻转到下一页运行结果
点击链接查看flip(翻转)效果。
 flip effect.
翻转到第二页
运行结果
点击链接查看翻转效果。
翻转出对话框页面
flow抛出当前页,进入下一页运行结果
点击链接查看页面抛出效果。
抛出当前页,进入下一页
运行结果
点击链接查看页面抛出效果。
抛出对话框页面
pop像弹出窗口那样转到下一页。运行结果
点击链接查看窗口弹出效果。
弹出第二个页面
运行结果
点击链接查看窗口弹出效果。
弹出对话框页面
slide从右向左滑动到下一页。运行结果
点击链接查看滑动效果。
滑动到第二个页面
尝试一下
点击链接查看滑动效果。
通过滑动效果显示对话框。
slidefade从右向左滑动并淡入到下一页。尝试一下
点击链接查看右到左滑动效果。
右到左滑动到下一页
尝试一下
点击链接查看右到左滑动效果。
通过滑动来显示对话框。
slideup从下到上滑动到下一页。尝试一下
点击链接查看从上滑到下效果。
从上滑到下进入第二个页面
尝试一下
点击链接查看从上滑到下效果。
通过从上滑到下效果显示对话框。
slidedown从上到下滑动到下一页。尝试一下
点击链接查看从上到下滑动效果。
从上到下滑动到下一页
尝试一下
点击链接查看从上到下滑动效果。
通过从上到下滑动效果显示对话框。
turn转向下一页。尝试一下
点击链接查看翻页效果。
翻到下一页
尝试一下
点击链接查看翻页效果。
通过翻页效果显示对话框。
none无过渡效果。尝试一下
链接设置属性 
data-transition="none" 。
进入第二页 (无添加效果)
尝试一下
链接设置属性 data-transition="none" 。
弹出对话框 (无添加效果)


lamp在 jQuery Mobile 的所有链接上,默认使用淡入淡出的效果(如果浏览器支持)。

提示:上面的所有效果支持后退行为。例如,如果您想要页面从左向右滑动,而不是从右向左滑动,请使用带有 "reverse" 值的 data-direction 属性。在后退按钮上这是默认的。

实例

<a href="#pagetwo" data-transition="slide" data-direction="reverse">切换</a>


运行结果

1.png

2.png


分类导航
点击按住视频可拖动

缩小

关闭

  • 正在学习
  • 北京总部地址:北京市海淀区西三旗街道建材城西路中腾建华商务大厦东侧二层尚学堂
  • 咨询电话:400-009-1906 010-56233821
  • 网站维护:北京尚学堂科技有限公司昌平分公司
  • Copyright 2007-2015 北京尚学堂科技有限公司
  • 京ICP备13018289号-1 京公网安备11010802015183