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

《html各种页面切换效果和模态对话框用法总结》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、★精品文档★html5各种页面切换效果和模态对话框用法总结　　本文详细总结了html5各种页面切换效果和模态对话框用法。分享给大家供大家参考。具体分析如下：　　页面动画：　　data-transition属性可以定义页面切换是的动画效果。　　例如：<ahref=“index.html”data-transition=“pop”I’llpop</a　　data-transition参数表：　　参数说明　　slide从右侧向左滑入页面　　slideup从底部向上滑入　　slidedown从上向下滑入

2、　　pop从中心渐显展开　　fade渐显　　flip翻转　　备注：如果想要在目标页面中显示后退按钮，可以在链接中加入data-direction=“reverse”属性，这个属性和原来的data-back=“true”相同，不知道在正式版本中将会保留哪个属性。2016全新精品资料-全新公文范文-全程指导写作–独家原创12/12★精品文档★模态对话框　　模态对话框是一种带有圆角标题栏和关闭按钮的伪浮动层，用于独占事件的应用。任何结构化的页面都可以用data-rel=“dialog”链接的方式实现模态对话框应用

3、。　　例如：<ahref=“foo.html”data-rel=“dialog”Opendialog</a　　这个页面切换效果同样可以使用标准页面的data-transition参数效果。建议使用”pop”、”slideup”和”flip”参数以达到更好的效果。　　这个模态对话框会默认生成关闭按钮，用于回到父级页面。在脚本能力较弱的设备上也可以添加一个带有data-rel=“back”的链接来实现关闭按钮。　　针对支持脚本的设备可以直接使用href=”#”或者data-rel=“back”来实现

4、关闭。还可以使用内置的”close”方法来关闭模态对话框，例如：$(‘.ui-dialog’).dialog(‘close’)。　　由于模态对话框是动态显示的临时页面，所以这个页面不会被保存在哈希表内，这就意味着我们讲无法后退到这个页面，例如你在A页面中点击一个链接打开B对话框,操作完成并关闭对话框,然后跳转到C页面,这时候你点击浏览器的后退按钮，这时候将回到A页面，而不是B页面。　　工具条　　工具条主要用于”header”,”footer”2016全新精品资料-全新公文范文-全程指导写作–独家原创12/1

5、2★精品文档★等区域，用来支撑和实现页面中业务功能的应用。jQueryMobile提供了一个相对完整的解决方案。　　工具条分为:标题（headerbar）,页脚（footerbar）和导航（navbar）这三中应用。　　其中标题和页脚在页面中有一些不同的应用方式，默认工具条是以嵌入（inline）的方式定位的，这种定位方式可以实现最大限度的兼容性，包括在对脚本和css兼容性不佳的设备都有很好的优化。　　另一种是浮动（fixed）定位的方式，也可以成为“静态“定位，这种定位方式可以让工具条始终保持在屏幕的顶部

6、或者底部。并可以接受点击事件来显示/隐藏工具条，已达到最大化利用屏幕空间的目的。　　实现方式：在标题和页脚区域加入data-position=“fixed”属性。　　标题容器　　标题容器是页面页眉区域的显示控件，主要用来显示标题和主要操作的区域。　　结构代码：　　代码如下:　　<divdata-role=“header”　　<h1Page2016全新精品资料-全新公文范文-全程指导写作–独家原创12/12★精品文档★Title</h1　　</div为了方便页面的交互在页面切换后会在标

7、题容器的左侧自动生成一个后退按钮，这样可以简化我们的开发复杂程度，但是有些时候我们会因为应用的需求而不需要这个后退按钮，可以在标题容器上添加data-backbtn=“false”属性用来阻止后退按钮的自动创建。　　标题容器的左侧和右侧分别可以放置一个按钮，在阻止自动生成的后退按钮后，我们就可以在后退按钮的位置来自定义按钮了。　　例如：　　代码如下:　　<divdata-role=“header”data-position=“inline”data-backbtn=“false”　　<ahref

8、=“index.html”data-icon=“delete”Cancel</a　　<h1EditContact</h1　　<ahref=“index.html”data-icon=“check”Save</a　　</div如果需要自定义默认的后退按钮中的文本，可以用data-back-btn-text=“previous”属性来实现，或者通过扩展的方式实现：　　2016全新精