本文主要介绍HTML5各种页面切换的效果以及模式对话框的使用总结。 还更详细地介绍了各种HTML5页面元素的使用方法。 具有很大的实用价值。 有需要的同学可以参考以下
本文详细总结了html5中各种页面切换的效果以及模式对话框的使用。 分享给大家，供大家参考。 具体分析如下：
页面动画：
data-transition属性可以定义页面切换的动画效果。
例如：我会弹出
数据传输参数表：
参数说明
Slide 从两侧向左滑入页面
Slideup 从顶部向下滑动
Slidedown 从上到上滑入
弹出窗口出现并从中心展开
褪色
翻转翻转
备注：如果要在目标页面显示后退按钮，可以在链接中添加 data-direction="reverse" 属性。 该属性与原来的data-back="true"相同。 不知道后续版本中是否会出现。 保留该财产。
模式对话框是一个伪浮动层，带有圆形标题栏和专用的关闭按钮。 任何结构化页面都可以以 data-rel="dialog" 链接的形式实现模式对话框应用程序。
例如：打开对话框
该页面切换效果还可以使用标准页面的数据转换参数效果。 建议使用“pop”、“slideup”、“flip”参数，效果更佳。
该模态对话框默认会生成一个关闭按钮，返回父页面。 在可编写脚本较少的设备上，还可以添加带有 data-rel="back" 的链接来关闭按钮。
对于支持脚本的设备，可以直接使用href="#"或data-rel="back"将其关闭。 您还可以使用外部“close”方法关闭模式对话框，例如：$('.ui-dialog').dialog('close')。
由于模态对话框是一个动态显示的临时页面html5 弹出框，这个页面不会被保存在哈希表中，这意味着我们很难再回到这个页面。 例如，您在A页面中点击一个链接，打开B对话框，操作完成并关闭对话框，然后跳转到C页面。此时，如果您点击浏览器的后退按钮，则会出现返回页面 A 而不是页面 B。
工具栏
工具栏主要用在“页眉”、“页脚”等区域，支持和实现页面中业务功能的应用。 jQuery Mobile 提供了一个相对完整的解决方案。
工具栏分为：title（标题栏）、footer（页脚栏）和navigation（导航栏）。
其中，标题和页码在页面中有一些不同的应用方法。 默认工具栏以内联的形式定位。 这种定位方式可以实现最大的兼容性，包括对脚本和css兼容性较差的设备都进行了很好的优化。
另一种方法是浮动（固定）定位，也可称为“静态”定位。 这种定位方法可以使工具栏保持在屏幕的底部或顶部。 并且可以通过点击暴风来显示/隐藏工具栏，达到了最大化利用屏幕空间的目的。
实现方法：在标题和页码区域添加data-position="fixed"属性。
标题容器
标题容器是页面页脚区域的显示控件，主要用于显示标题和主要操作区域。
结构代码：
复制代码
代码如下所示：
页面标题
为了方便页面交互，页面切换后会在标题容器一侧手动生成一个后退按钮，这样可以简化我们的开发复杂度，但有时我们由于应用需求不需要这个后退按钮。 您可以在标题容器上添加 data-backbtn="false" 属性，以防止手动创建后退按钮。
可以在标题容器的右侧和左侧分别放置一个按钮。 抑制掉手动生成的后退按钮后，我们可以在后退按钮的位置自定义按钮。
例如：
复制代码
代码如下所示：
取消
更改联系资料
节省
如果需要自定义默认后退按钮中的文本，可以使用 data-back-btn-text="previous" 属性来实现，或者以扩展形式实现：
复制代码
代码如下所示：
$.mobile.page.prototype.options.backBtnText = "上一页"
如果您不使用标准结构来创建标题区域，框架将不会手动生成默认按钮。
页脚容器
页脚容器的结构与页眉容器基本相同，只要将data-role属性的参数设置为“footer”即可。
例如：
复制代码
代码如下所示：
页脚内容
与标题容器相比，脚注容器具有更大的灵活性。 它不允许像标题容器那样只有两个按钮，并且默认情况下不会将按钮放置在左右顶部。 页脚的按钮默认从左侧开始。 向右依次排列，以及如何放置更多按钮。
只需在页码容器上添加一个，即可将脚注变成工具栏，并且无需设置任何布局样式即可为其添加整洁的按钮。
例如：
复制代码
代码如下所示：
消除
添加
向上
向下
如果我们需要一组链接效果，可以这样写：
复制代码
代码如下所示：
消除
添加
向上
向下
提示：通过使用 data-id 属性，多个页面可以使用相同的页码。
导航
导航容器是一个按钮组控件，每行最多可容纳 5 个按钮，其中 data-role="navbar"
用于保存这些按钮的 div 的属性。
例子：
复制代码
代码如下所示：
添加默认按钮
如果按键数量超过 5 个，导航容器将被手动分配到具有适当数量的多行。
按钮
您可以通过 data-role="button" 声明页面中的任意链接为按钮的显示样式。 为了统一风格，框架会在页面加载时手动将表单类的按钮转换为 jQuery Mobile 风格的按钮，不需要添加 data-role 属性。
框架包含一组常用的图标，可用于按钮，data-icon属性中的参数用于定义不同图标的效果。
例如：
复制代码
代码如下所示：
删除
data-icon 本机参数列表
除了默认在右侧显示图标外，还可以使用 data-iconpos 属性来定义图标与文字的位置关系。
data-iconpos参数列表：
参数功效：
文本左侧的右侧图标
文本前面的顶部图标
底部图标位于文字下方
data-iconpos="notext" 属性允许按钮隐藏文本。
内联样式
默认情况下，框架中的按钮是垂直排他的，并且根据屏幕的长度自适应，但是我们经常需要在应用程序中连续显示多个按钮，这时候我们需要知道一个新的叫做内联模式属性
数据内联=“真”。
例如：
复制代码
代码如下所示：
取消
节省
按钮组
jQuery Mobile 框架可以分组显示多个按钮，data-role="controlgroup" 用于显示按钮之间的紧凑关系。 例如：
复制代码
代码如下所示：
是的
不
或许
如果需要垂直排列按键，可以减少 data-type="horizontal" 属性。
表格申请
jQuery Mobile框架封装了原生html表单元素的新表达形式，并优化了触摸屏设备的操作。 表单元素将被手动渲染为框架页面上的 jQuery Mobile 样式元素。
form元素的使用和默认的html方法一样，也可以使用Post和Get方法提交数据，但是需要注意元素的ID命名。 在同一个页面中，常规规范中不允许有相同的ID命名是的，由于jQuery Mobile允许同一个DOM中的多个页面，因此建议表单元素的ID命名在整个项目中是唯一的，以防止导致错误通过身份问题。
默认情况下，框架会手动渲染标准页面中表单元素的样式。 成功渲染后，将使用 jQuery 中的函数来操作该控制元素。 在某些情况下，我们需要使用原始的html表单元素。 为了防止移动框架手动渲染元素，我们在框架中的data-role属性中引入了一个控制参数“none”。 使用此属性参数将使元素以 html 的本机状态显示。
例如：
复制代码
代码如下所示：
列出申请
信息列表是开发应用中使用比较频繁的控件html5 弹出框，用于数据显示、导航、数据列表等，为了适应不同的信息内容，列表的形式也是多种多样的。
列表的代码结构被实现为有序列表和无序列表。 只要在ul或ol上声明data-role="listview"，框架就可以以列表的形式渲染，例如：
复制代码
代码如下所示：
如果需要向列表中添加数据，则需要在数据加载后执行refresh()方法来更新列表。
例如：
复制代码
代码如下所示：
$('ul').listview('刷新');
以上是使用 jQuery Mobile 创建界面的基本规则。
希望本文对您的HTML5程序设计有所帮助。
相关文章
