《html5各种页面切换效果和模态对话框用法总结》由会员分享，可在线阅读，更多相关《html5各种页面切换效果和模态对话框用法总结（10页珍藏版）》请在金锄头文库上搜索。
1、html5各种页面切换效果和模态对话框用法 总结本文详细总结了 html5各种页面切换效果和模态对话框 用法。分享给大家供大家参考。具体分析如下：页面动画：data-transition属性可以定义页面切换是的动画效果。例如：Ill pop data-transition参数表：参数说明slide 从右侧向左滑入页面slideup 从底部向上滑入 slidedown 从上向下滑入 pop从中心渐显展开fade 渐显flip 翻转备注：如果想要在目标页面中显示后退按钮，可以在链接中加入 data-direction=reverse 属性，这个属性和原 来的data-back=true 相同，不知
2、道在正式版本中将会保 留哪个属性。模态对话框模态对话框是一种带有圆角标题栏和关闭按钮的伪浮动层，用于独占事件的应用。任何结构化的页面都可以用 data-rel=dialog链接的方式实现模态对话框应用。例如：Open dialog这个页面切换效果同样可以使用标准页面的 data-transition参数效果。建议使用pop、slideup 和flip 参数以达到更好的效果。这个模态对话框会默认生成关闭按钮，用于回到父级页 面。在脚本能力较弱的设备上也可以添加一个带有 data-rel=back的链接来实现关闭按钮。针对支持脚本的设备可以直接使用href= ” # ”或者data-rel=bac
3、k 来实现关闭。还可以使用内置的” close ” 方法来关闭模态对话框，例如： $(.ui-dialog).dialog(close)。由于模态对话框是动态显示的临时页面，所以这个页面 不会被保存在哈希表内，这就意味着我们讲无法后退到这个 页面，例如你在 A页面中点击一个链接打开B对话框,操作完成并关闭对话框，然后跳转到C页面,这时候你点击浏 览器的后退按钮，这时候将回到A页面，而不是B页面。工具条工具条主要用于” header” , ” footer ”等区域，用来 支撑和实现页面中业务功能的应用。jQuery Mobile 提供了一个相对完整的解决方案。工具条分为：标题（header b
4、ar ）,页脚（footer bar ） 和导航（nav bar ）这三中应用。其中标题和页脚在页面中有一些不同的应用方式，默认 工具条是以嵌入（inline ）的方式定位的，这种定位方式可 以实现最大限度的兼容性，包括在对脚本和css兼容性不佳的设备都有很好的优化。另一种是浮动（fixed ）定位的方式，也可以成为“静 态“定位，这种定位方式可以让工具条始终保持在屏幕的顶 部或者底部。并可以接受点击事件来显示/隐藏工具条，已达到最大化利用屏幕空间的目的。实现方式：在标题和页脚区域加入data-position=fixed 属性。标题容器标题容器是页面页眉区域的显示控件，主要用来显示标题和主要
5、操作的区域。结构代码：复制代码代码如下：Page Title为了方便页面的交互在页面切换后会在标题容器的左 侧自动生成一个后退按钮，这样可以简化我们的开发复杂程 度，但是有些时候我们会因为应用的需求而不需要这个后退按钮，可以在标题容器上添加data-backbtn=false 属性用来阻止后退按钮的自动创建。标题容器的左侧和右侧分别可以放置一个按钮，在阻止 自动生成的后退按钮后，我们就可以在后退按钮的位置来自 定义按钮了。例如：复制代码代码如下：CancelEdit ContactSave如果需要自定义默认的后退按钮中的文本，可以用 data-back-btn-text=previous属性来
6、实现，或者通过扩展的方式实现：复 制 代 码 代 码 如下 ：$.mobile.page.prototype.options.backBtnText=previous如果你没有使用标准的结构来创建标题区域，那么框架 将不会自动生成默认的按钮。页脚容器页脚容器的结构和标题容器的结构基本相同，只要把data-role属性的参数设置为”footer例如：复制代码代码如下Footer content与标题容器相比页脚容器有更多的灵活度，它不会想标题容器一样只允许放置两个按钮，并且也不会默认的把按钮放置在左右的顶端，页脚的按钮默认是从左到右依次排列的，并且何以放置更多的按钮。在页脚容器上只要添加一个cl
7、ass=ui-bar就可以将页脚变成一个工具条，你可以不用设置任何的布局样式就可 以在其中添加整齐的按钮。例如：复制代码代码如下：RemoveAddUpDown如果我们需要一组链接效果，我们可以这样写:复制代码代码如下：RemoveAddUpDown技巧：通过使用 data-id属性可以让多个页面使用相同的页脚。导航导航容器是一个可以每行容纳最多5个按钮的按钮组控件，用一个拥有 data-role=navbar属性的div 来容纳这些按钮。例子：复制代码代码如下：OneTwo在默认的按钮上添加class=ui-btn-active如果按钮的数量超过5个，导航容器将会自动以合适 的数量分配成多行
8、显示。按钮你可以将页面中 的任何一个链接通过 data-role=button来声明成为按钮的显示风格。为了风格统一，框架会在页面加载时自动将form 类的按钮格式化为jQuery Mobile风格的按钮，不需要添加data-role 属性。框架中包含了一组常用的图标可以用于按钮，用 data-icon属性中的参数来定义显示不同的图标效果。例如：复制代码代码如下:Deletedata-icon原生参数列表除了可以默认显示左侧的图标之外，还可以用 data-iconpos属性来定义图标与文字的位置关系。data-iconpos 参数列表：参数效果：right图标在文字的右侧top图标在文字上面b
9、ottom图标在文字下面data-ic o pos=notext属性可以让按钮隐藏文字。内联样式在框架中默认情况下按钮是横向独占根据屏幕宽度横 向自适应的，但是我们在应用的应用中经常需要在一行中显示多个按钮，这时候我们就需要知道一个新的叫做内联模式 的属性了data-inline=true 。例如：复制代码代码如下：CancelSave按钮组jQuery Mobile框架可以将几个按钮以组的方式显示，data-role=controlgroup用以展示按钮间的紧凑关系。例如：复制代码代码如下：YesNoMaybe如果需要按钮横向排列可以增加data-type=horizontal 属性。表单应
10、用jQuery Mobile框架为原生的html表单元素封装了新 的表现形式，对触屏设备的操作进行了优化。在框架的页面 中会自动将form 元素渲染成jQuery Mobile 风格的元素。form元素的使用和默认的 html方式使用相同，可以 同样使用Post和get方式提交数据，但是需要注意的是 元素的ID 命名问题，在常规的规范中同一个页面中是不允 许出现相同的ID命名的，在jQuery Mobile中由于其允许 在同一个DOM中存在多个页面，所以建议form元素的ID命名在整个项目中是唯一的，防止由于ID问题引发的错误。默认情况下框架会自动渲染在标准页面中的form 元素的风格，一旦成
11、功渲染后，这个控件元素将可以使用 jQuery中的函数进行操作。在某些情况下，我们需要使用 html原生的form 元素，为了阻止 mobile 框架对该元素 的自动渲染，在框架中我们在data-role属性中引入了一个控制参数”none ”。使用这个属性参数就会让该元素以html原生的状态显示。例如：复制代码代码如下：AB列表应用信息列表是开发应用中使用频率相对比较高的控件，用 于数据显示、导航，数据列表等。为了适应不同的信息内容， 列表的表现形式也多种多样。列表的代码结构是以有序和无序列表来实现的，只要在 ul或ol 上声明data-role=listview就可以让框架以列表的方式渲染了，例如：复制代码代码如下：AcuraAudiBMW如果需要在列表里添加数据，则需要在数据加载后执行 refresh方法对列表进行数据更新。例如：复制代码代码如下：$(ul).listview(refresh);以上是运用jQuery Mobile进行界面构建的基础规则。希望本文所述对大家的HTML5程序设计有所帮助。
