jQuery Mobile 过渡

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

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

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

//img.mukewang.com/wiki/5ba48e170995b9d800500034.jpg//img.mukewang.com/wiki/5ba48e2509bcee0c00500038.jpg//img.mukewang.com/wiki/5ba48e3609fdb11800460034.jpg//img.mukewang.com/wiki/5ba48e3f093089f900560038.jpg//img.mukewang.com/wiki/5ba48e450931106400570034.jpg
12.010.016.04.015.0

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

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

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

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

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

过渡说明页面对话框
fade默认。淡入到下一页。运行案例运行案例
flip从后向前翻转到下一页。运行案例运行案例
flow抛出当前页,进入下一页。运行案例运行案例
pop像弹出窗口那样转到下一页。运行案例运行案例
slide从右向左滑动到下一页。运行案例运行案例
slidefade从右向左滑动并淡入到下一页。运行案例运行案例
slideup从下到上滑动到下一页。运行案例运行案例
slidedown从上到下滑动到下一页。运行案例运行案例
turn转向下一页。运行案例运行案例
none无过渡效果。运行案例运行案例

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

实例:

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

运行案例

本内容均来自互联网,仅供参考,如有侵权请及时通知本站予以删除。邮箱:wiki#imooc.com (#改成@)

意见反馈 帮助中心 APP下载
官方微信