没有合适的资源?快使用搜索试试~ 我知道了~
本文详细总结了html5各种页面切换效果和模态对话框用法。分享给大家供大家参考。具体分析如下: 页面动画: data-transition 属性可以定义页面切换是的动画效果。例如:<a>I’ll pop</a>data-transition 参数表: 参数说明 slide 从右侧向左滑入页面slideup 从底部向上滑入slidedown 从上向下滑入pop 从中心渐显展开fade 渐显flip 翻转 备注:如果想要在目标页面中显示后退按钮,可以在链接中加入 data-direction="reverse"属性,这
资源详情
资源评论
资源推荐
html5各种页面切换效果和模态对话框用法总结各种页面切换效果和模态对话框用法总结
本文详细总结了html5各种页面切换效果和模态对话框用法。分享给大家供大家参考。具体分析如下:
页面动画页面动画:
data-transition 属性可以定义页面切换是的动画效果。
例如:<a href="index.html" data-transition="pop">I’ll pop</a>
data-transition 参数表:
参数说明
slide 从右侧向左滑入页面
slideup 从底部向上滑入
slidedown 从上向下滑入
pop 从中心渐显展开
fade 渐显
flip 翻转
备注:如果想要在目标页面中显示后退按钮,可以在链接中加入 data-direction="reverse"属性,这个属性和原来的 data-
back="true"相同,不知道在正式版本中将会保留哪个属性。
模态对话框模态对话框
模态对话框是一种带有圆角标题栏和关闭按钮的伪浮动层,用于独占事件的应用。任何结构化的页面都可以用 data-
rel="dialog"链接的方式实现模态对话框应用。
例如:<a href="foo.html" data-rel="dialog">Open dialog</a>
这个页面切换效果同样可以使用标准页面的 data-transition 参数效果。建议使用"pop"、"slideup" 和"flip"参数以达到更好的效
果。
这个模态对话框会默认生成关闭按钮,用于回到父级页面。在脚本能力较弱的设备上也可以添加一个带有 data-rel="back"的
链接来实现关闭按钮。
针对支持脚本的设备可以直接使用 href=”#”或者 data-rel="back"来实现关闭。还可以使用内置的”close”方法来关闭模态对话
框,例如:$(‘.ui-dialog’).dialog(‘close’)。
由于模态对话框是动态显示的临时页面,所以这个页面不会被保存在哈希表内,这就意味着我们讲无法后退到这个页面,例如
你在 A 页面中点击一个链接打开 B 对话框,操作完成并关闭对话框,然后跳转到 C 页面,这时候你点击浏览器的后退按钮,这时
候将回到 A 页面,而不是 B 页面。
工具条工具条
工具条主要用于”header”,”footer”等区域,用来支撑和实现页面中业务功能的应用。jQuery Mobile 提供了一个相对完整的解决
方案。
工具条分为:标题(header bar),页脚(footer bar)和导航(nav bar)这三中应用。
其中标题和页脚在页面中有一些不同的应用方式,默认工具条是以嵌入(inline)的方式定位的,这种定位方式可以实现最大
限度的兼容性,包括在对脚本和 css 兼容性不佳的设备都有很好的优化。
另一种是浮动(fixed)定位的方式,也可以成为“静态“定位,这种定位方式可以让工具条始终保持在屏幕的顶部或者底部。并
可以接受点击事件来显示/隐藏工具条,已达到最大化利用屏幕空间的目的。
实现方式:在标题和页脚区域加入 data-position="fixed"属性。
标题容器标题容器
标题容器是页面页眉区域的显示控件,主要用来显示标题和主要操作的区域。
结构代码:
复制代码代码如下:<div data-role=”header”>
<h1>Page Title</h1>
</div>
为了方便页面的交互在页面切换后会在标题容器的左侧自动生成一个后退按钮,这样可以简化我们的开发复杂程度,但是有些
时候我们会因为应用的需求而不需要这个后退按钮,可以在标题容器上添加 data-backbtn="false"属性用来阻止后退按钮的自
动创建。
标题容器的左侧和右侧分别可以放置一个按钮,在阻止自动生成的后退按钮后,我们就可以在后退按钮的位置来自定义按钮
了。
例如:
复制代码代码如下:<div data-role=”header” data-position=”inline” data-backbtn=”false” >
<a href=”index.html” data-icon=”delete”>Cancel</a>
<h1>Edit Contact</h1>
<a href=”index.html” data-icon=”check”>Save</a>
</div>
如果需要自定义默认的后退按钮中的文本,可以用data-back-btn-text="previous"属性来实现,或者通过扩展的方式实现:
weixin_38719540
- 粉丝: 6
- 资源: 908
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 基于python实现的三次样条插值和均值插值法实现
- Python语言教程2-python批量图片大小处理-多文件夹
- Python语言教程1-python批量图片重命名,将后缀某几个不想要的字去除
- Space Combat Kit 太空战斗套件Unity游戏开发插件资源unitypackage C#
- Universal Device Preview 通用设备预览Unity游戏开发插件资源unitypackage
- Paladin Anim Set 圣骑士动画集Unity游戏动作动画插件资源unitypackage
- 计算机财务管理期末考报表部分题目及答案.doc
- 计算机软件维护论文.doc
- 计算机软件著作权授权书.docx
- 计算机键盘教学案例.doc
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0