程序博客网 > effective java的缺点

4. jQuery Mobile 过渡(transitions)

来源：互联网 发布：effective java的缺点 编辑：程序博客网 时间：2024/06/05 23:00

在jQuery Mobile中，我们可以设置从一个页面到另一个页面的效果，那就是过渡(transitions)，过渡效果可应用于任意链接或通过使用 data-transition属性进行的表单提交。

<a href="index.html"  data-transition="pop">I'll pop</a>
下面的表格展示了可与data-transition 属性一同使用的可用过渡：

过渡

描述

fade

默认。淡入淡出到下一页。

pop

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

flip

从后向前翻动到下一页。

turn

转向下一页

flow

抛出当前页面，引入下一页。

slidefade

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

slide

从右向左滑动到下一页。

slidedown

从上到下滑动到下一页。

slideup

从下到上滑动到下一页。

none

无过渡效果

 

提示：以上所有效果同时支持反向动作，例如，如果您希望页面从左向右滑动，而不是从右向左，请使用值为"reverse" 的data-direction 属性。在后退按钮上是默认的。

示例：

fade效果：淡入淡出到下一页

 

pop效果：像弹出窗口那样转到下一页

 

flip效果：从后向前翻动到下一页

 

turn效果：转向下一页

 

flow效果：抛出当前页面，引入下一页

 

slidefade效果：从右向左滑动并淡入到下一页

 

slide效果：从右向左滑动到下一页

 

slidedown效果：从上到下滑动到下一页

 

slideup效果：从下到上滑动到下一页

 

none效果：无过渡效果

 

示例代码如下：

<!DOCTYPEhtml>

<html>

    <head>

       <metacharset="UTF-8">

       <title>过渡页面</title>

       <linkrel="stylesheet"href="css/jquery.mobile-1.4.5.css"/>

       <scripttype="text/javascript"src="js/jquery.min.js"></script>

       <scripttype="text/javascript"src="js/jquery.mobile-1.4.5.min.js"></script>

    </head>

    <body>

       <divdata-role="page"id="firstPage">

           <divdata-role="header">

              <h1>这是页面1标题</h1>

           </div>

           <divdata-role="content">

              <p><ahref="#secondPage"data-transition="fade">fade跳转到页面2</a></p>

              <p><ahref="#secondPage"data-transition="pop">pop跳转到页面2</a></p>

              <p><ahref="#secondPage"data-transition="flip">flip跳转到页面2</a></p>

              <p><ahref="#secondPage"data-transition="turn">turn跳转到页面2</a></p>

              <p><ahref="#secondPage"data-transition="flow">flow跳转到页面2</a></p>

              <p><ahref="#secondPage"data-transition="slidefade">slidefade跳转到页面2</a></p>

              <p><ahref="#secondPage"data-transition="slide">slide跳转到页面2</a></p>

              <p><ahref="#secondPage"data-transition="slidedown">slidedown跳转到页面2</a></p>

              <p><ahref="#secondPage"data-transition="slideup">slideup跳转到页面2</a></p>

              <p><ahref="#secondPage"data-transition="none">none跳转到页面2</a></p>

           </div>

           <divdata-role="footer">

              <h1>这里是页面1底部</h1>

           </div>

       </div>

       <divdata-role="page"id="secondPage">

           <divdata-role="header">

              <h1>这是页面2标题</h1>

           </div>

           <divdata-role="content">

              <p><ahref="#firstPage"data-transition="fade">fade跳转到页面1</a></p>

              <p><ahref="#firstPage"data-transition="pop">pop跳转到页面1</a></p>

              <p><ahref="#firstPage"data-transition="flip">flip跳转到页面1</a></p>

              <p><ahref="#firstPage"data-transition="turn">turn跳转到页面1</a></p>

              <p><ahref="#firstPage"data-transition="flow">flow跳转到页面1</a></p>

              <p><ahref="#firstPage"data-transition="slidefade">slidefade跳转到页面1</a></p>

              <p><ahref="#firstPage"data-transition="slide">slide跳转到页面1</a></p>

              <p><ahref="#firstPage"data-transition="slidedown">slidedown跳转到页面1</a></p>

              <p><ahref="#firstPage"data-transition="slideup">slideup跳转到页面1</a></p>

              <p><ahref="#firstPage"data-transition="none">none跳转到页面1</a></p>

           </div>

           <divdata-role="footer">

              <h1>这里是页面2底部</h1>

           </div>

       </div>

    </body>

</html>

效果如下：


0 0
effective java的缺点 effective java的缺点
原创粉丝点击
热门IT博客
java在线教育系统源码java在线教育系统源码
淘宝 Jesus calling淘宝 Jesus calling
ff14好看的捏脸数据
淘宝订单流程图
淘宝买家钻石号多少钱
淘宝客真的挣钱吗
软件测试报告的内容
linux ctrl alt f7
mysql入门经典在线阅读
吴宗宪淘宝直播回放
北大青鸟java培训教材
网络推广网站
手机软件分类软件
2016dnf登陆就网络中断
淘宝店铺介绍是啥
来宾用户 安装软件
单片机光耦隔离电路
最好的打车软件
农业科技网络书
dx10 for windows xp
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 以信念为题的作文 坚定理想信念演讲稿 关于理想信念的诗 坚定理想信念心得 理想信念缺失的原因 关于理想信念的名言 关于信念的作文题目 理想信念方面的原因 关于人生信念的名言 关于坚定信念的名言 理想信念学习心得 理想信念存在的问题 你的理想信念是什么 理想与信念的事例 什么是理想信念教育 关于理想信念的故事 党的理想信念是什么 关于理想信念的诗句 形容信念坚定的成语 理想和信念的作文 信仰 理想 信念 有关理想信念的名言 关于理想信念的作文 关于理想信念的诗歌 青少年理想信念教育 对理想信念的认识 坚定理想信念的故事 理想信念教育班会 理想信念是总开关 信念作文600字 有关信念的名人事例 信念的重要性 关于信念的名人故事 信念600字作文 理想信念教育主题班会 坚定信念 放飞理想 理想与信念的名言 居里夫人信念 议论文范文600字 如何坚定理想信念 2018坚定理想信念三分钟演讲稿

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里