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

2020-03-24 18:22:37

字体：大中小

来源：转载

供稿：网友

本文详细总结了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 属性来实现，或者通过扩展的方式实现：
复制代码代码如下:$.mobile.page.prototype.options.backBtnText = "previous"
如果你没有使用标准的结构来创建标题区域，那么框架将不会自动生成默认的按钮。页脚容器页脚容器的结构和标题容器的结构基本相同，只要把 data-role 属性的参数设置为 footer 。
例如：

复制代码代码如下: div data-role="footer"
h4 Footer content /h4
/div
与标题容器相比页脚容器有更多的灵活度，它不会想标题容器一样只允许放置两个按钮，并且也不会默认的把按钮放置在左右的顶端，页脚的按钮默认是从左到右依次排列的，并且何以放置更多的按钮。
在页脚容器上只要添加一个 >例如：

复制代码代码如下: div data-role="footer"
a href="index.html" data-role="button" data-icon="delete" Remove /a
a href="index.html" data-role="button" data-icon="plus" Add /a
a href="index.html" data-role="button" data-icon="arrow-u" Up /a
a href="index.html" data-role="button" data-icon="arrow-d" Down /a
/div
如果我们需要一组链接效果，我们可以这样写：

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：详谈HTML中script标签（附代码）

下一篇：html下拉菜单怎么做