jQuery Mobile 过渡

来源：互联网发布：做名片的软件编辑：程序博客网时间：2024/06/06 00:41

jQuery Mobile 包含 CSS3 效果让您选择页面打开的方式。jQuery Mobile 提供了各种页面切换到下一个页面的效果。注意：为了实现页面切换效果，浏览器必须支持 CSS3 3D 切换：

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

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

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

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

过渡

描述

fade

默认。淡入到下一页

flip

从后向前翻转到下一页

flow

抛出当前页，进入下一页

pop

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

slide

从右向左滑动到下一页。

slidefade

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

slideup

从下到上滑动到下一页。

slidedown

从上到下滑动到下一页。

turn

转向下一页。

none

无过渡效果。

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" /><script src="../js/jquery.js"></script><script src="../js/jquery.mobile-1.4.5.min.js"></script></head><body><div data-role="page" id="pageone">  <div data-role="header">    <h1>欢迎来到我的主页</h1>  </div>  <div data-role="main" class="ui-content">   <p>点击链接查看页面抛出效果。</p>    <a href="#pagetwo" data-transition="flow">抛出当前页，进入下一页</a>  </div>  <div data-role="footer">    <h1>底部文本</h1>  </div></div><div data-role="page" id="pagetwo">  <div data-role="header">    <h1>欢迎来到我的主页</h1>  </div> <div data-role="main" class="ui-content">    <p>点击链接返回上一个页面。<b>注意</b>: fade（淡入）效果是默认的</p>    <a href="#pageone">返回第一个页面</a> </div>  <div data-role="footer">    <h1>底部文本</h1>  </div></div></body></html>

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

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" /><script src="../js/jquery.js"></script><script src="../js/jquery.mobile-1.4.5.min.js"></script></head><body><div data-role="page" id="pageone">  <div data-role="header">    <h1>欢迎来到我的主页</h1>  </div>  <div data-role="main" class="ui-content">    <p>点击链接查看淡入效果 (页面从右至左淡入)。</p>    <a href="#pagetwo" data-transition="slide">淡入第二个页面</a>  </div>  <div data-role="footer">    <h1>底部文本</h1>  </div></div><div data-role="page" id="pagetwo">  <div data-role="header">    <h1>欢迎来到我的主页</h1>  </div>  <div data-role="main" class="ui-content">    <p>点击链接查看相反方向的淡入效果 (页面从左至右淡入)。</p>    <a href="#pageone" data-transition="slide" data-direction="reverse">淡入第一个页面(reversed)</a>  </div>  <div data-role="footer">    <h1>底部文本</h1>  </div></div></body></html>

0 0