html5各种页面切换效果和模态对话框用法总结

这篇文章主要为大家介绍了html5各种页面切换效果和模态对话框用法总结,较为详细的介绍了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属性。

标题容器是页面页眉区域的显示控件，主要用来显示标题和主要操作的区域。

结构代码：