开发者社区> 异步社区> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

《jQuery Mobile快速入门》—— 2.4 转换

简介:
+关注继续查看

本节书摘来异步社区《jQuery Mobile快速入门》一书中的第2章,第2.4节,作者:【美】Brad Broulik,更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.4 转换

jQuery Mobile快速入门
在页面之间进行转换时,jQuery Mobile有6个可供选择的基于CSS的转换效果。默认情况下,框架会为所有的转换应用“滑动”效果。通过为任意链接、按钮或表单添加data-transition属性,我们可以设置其他的转换效果。

0c3c2c07d4e24b8fcfa7c7003de73d6dc8af868330be370ff843b792c5feae26e3443c7ba107b2d6

页面到页面的转换过程按照如下步骤发生。

1.用户轻敲按钮,以导航到下一个页面(见图2-5)。

2.框架使用一个Hijax请求载入下一个页面,然后添加到当前页面的DOM中。当前页面和下一个页面实际上是并排放置的,因此准备发生一个平滑转换(见图2-6)。

3.框架转换到下一个页面(见图2-7)。该示例使用了默认的“滑动”转换。

4.下一个页面得以显示,转换完成(见图2-8)。

7ddfab0ea46ca10d5ea09728572058a0355e1e2a8b8703d05da0fc939bbff30477c932ceace9ff1e

提示:

通过为你的链接添加data-direction=“reverse”属性,可以设置一个“向后(backward)”转换。向前的“滑动”转换是向左滑动,因此向后的“滑动”转换是向右滑动。例如,当向历史访问页面转换时,默认情况下使用的是向后转换。但是,如果你的标题上有一个“home”链接,你需要应用data-direction=“reverse”属性,否则将会产生默认的“向前”转换效果。

78ed44791921f51257e1710ca765bdb938679faf

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《jQuery Mobile入门经典》—— 导读
毫无疑问,当前我们在获取、使用和分享网上的资源时,所采用的方式正在不断变得越来越移动化。每个月都会有数以千计的新智能手机被激活,并被它们的主人带到包括杂货店或山野远足在内的每个地方。随着我们对网络连接的渴求延伸到了几年之前还不能到达的区域,我们需要可以简单快速传递信息的网站,而且不管我们使用何种设备访问网站,它都可以正常运作。
1181 0
jQuery Mobile入门教程
  简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的、可跨设备的Web应用程序。我们将后续的介绍中向大家介绍大量的代码及实例。       jQuery一直以来都是非常流行的富客户端及Web应用程序开发中使用的JavaScript类库,然而一直以来它都是为桌面浏览器设计的,没有特别为移动应用程序设计。
1112 0
jquery mobile小经验
[size=medium]现在网站上关于jquery mobile的demo和帖子可真少啊,我刚开始接触,遇到了一些问题,都找不到人请教。  这是我的个人经验总结,或多或少会对刚入门的童鞋有点帮助吧。
800 0
jquery mobile 记录
1、刷新radio选中状态 $("input[type='checkbox']").attr("checked",true).checkboxradio("refresh"); 2、加载dom后刷新样式 $("#list").
687 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
12049
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载