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


Posted in HTML / CSS onDecember 15, 2014

本文详细总结了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>

与标题容器相比页脚容器有更多的灵活度,它不会想标题容器一样只允许放置两个按钮,并且也不会默认的把按钮放置在左右的顶端,页脚的按钮默认是从左到右依次排列的,并且何以放置更多的按钮。
在页脚容器上只要添加一个 class="ui-bar"就可以将页脚变成一个工具条,你可以不用设置任何的布局样式就可以在其中添加整齐的按钮。
例如:
复制代码
代码如下:
<div data-role="footer" class="ui-bar">
<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>

如果我们需要一组链接效果,我们可以这样写:
复制代码
代码如下:
<div data-role="footer" class="ui-bar" data-position="inline">
<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-icon="delete">Remove</a>
<a href="index.html" data-icon="plus">Add</a>
<a href="index.html" data-icon="arrow-u">Up</a>
<a href="index.html" data-icon="arrow-d">Down</a>
</div>
</div>

技巧:通过使用 data-id 属性可以让多个页面使用相同的页脚。

导航

导航容器是一个可以每行容纳最多 5 个按钮的按钮组控件,用一个拥有 data-role="navbar"
属性的 div 来容纳这些按钮。
例子:

复制代码
代码如下:
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="a.html" class="ui-btn-active">One</a></li>
<li><a href="b.html">Two</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->

在默认的按钮上添加 class="ui-btn-active"
如果按钮的数量超过 5 个,导航容器将会自动以合适的数量分配成多行显示。

按钮

你可以将页面中的任何一个链接通过 data-role="button"来声明成为按钮的显示风格。为了风格统一,框架会在页面加载时自动将 form 类的按钮格式化为 jQuery Mobile 风格的按钮,不需要添加 data-role 属性。
框架中包含了一组常用的图标可以用于按钮,用 data-icon 属性中的参数来定义显示不同的图标效果。
例如:

复制代码
代码如下:
<a href="index.html" data-role="button" data-icon="delete">Delete</a>

data-icon 原生参数列表

除了可以默认显示左侧的图标之外,还可以用 data-iconpos 属性来定义图标与文字的位置关系。
data-iconpos 参数列表:

参数效果:
right 图标在文字的右侧
top 图标在文字上面
bottom 图标在文字下面
data-iconpos="notext"属性可以让按钮隐藏文字。

内联样式

在框架中默认情况下按钮是横向独占根据屏幕宽度横向自适应的,但是我们在应用的应用中经常需要在一行中显示多个按钮,这时候我们就需要知道一个新的叫做内联模式的属性了
data-inline="true"。
例如:

复制代码
代码如下:
<div data-inline="true">
<a href="index.html" data-role="button">Cancel</a>
<a href="index.html" data-role="button" data-theme="b">Save</a>
</div>

 
按钮组

jQuery Mobile 框架可以将几个按钮以组的方式显示,data-role="controlgroup"用以展示按钮间的紧凑关系。例如:

复制代码
代码如下:
<div data-role="controlgroup">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
</div>

如果需要按钮横向排列可以增加 data-type="horizontal"属性。

表单应用

jQuery Mobile 框架为原生的 html 表单元素封装了新的表现形式,对触屏设备的操作进行了优化。在框架的页面中会自动将 form 元素渲染成 jQuery Mobile 风格的元素。
form 元素的使用和默认的 html 方式使用相同,可以同样使用 Post 和 get 方式提交数据,但是需要注意的是元素的 ID 命名问题,在常规的规范中同一个页面中是不允许出现相同的 ID命名的,在 jQuery Mobile 中由于其允许在同一个 DOM 中存在多个页面,所以建议 form 元素的 ID 命名在整个项目中是唯一的,防止由于 ID 问题引发的错误。
默认情况下框架会自动渲染在标准页面中的 form 元素的风格,一旦成功渲染后,这个控件元素将可以使用 jQuery 中的函数进行操作。在某些情况下,我们需要使用 html 原生的 form 元素,为了阻止 mobile 框架对该元素的自动渲染,在框架中我们在 data-role 属性中引入了一个控制参数”none”。使用这个属性参数就会让该元素以 html 原生的状态显示。
例如:

复制代码
代码如下:
<select name="foo" id="foo" data-role="none">
<option value="a" >A</option>
<option value="b" >B</option>
<option value="c" >C</option>
</select>

 
列表应用

信息列表是开发应用中使用频率相对比较高的控件,用于数据显示、导航, 数据列表等。为了适应不同的信息内容,列表的表现形式也多种多样。
列表的代码结构是以有序和无序列表来实现的,只要在 ul 或 ol 上声明 data-role="listview"就可以让框架以列表的方式渲染了,例如:

复制代码
代码如下:
<ul data-role="listview" data-theme="g">
<li><a href="acura.html">Acura</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="bmw.html">BMW</a></li>
</ul>

如果需要在列表里添加数据,则需要在数据加载后执行 refresh()方法对列表进行数据更新。
例如:
复制代码
代码如下:
$('ul').listview('refresh');

以上是运用 jQuery Mobile 进行界面构建的基础规则。

希望本文所述对大家的HTML5程序设计有所帮助。

HTML / CSS 相关文章推荐
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
CSS3制作酷炫的三维相册效果
Jul 01 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 HTML / CSS
css3 中translate和transition的使用方法
Mar 26 HTML / CSS
HTML5 与 XHTML2
Oct 17 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
使用html5 canvas 画时钟代码实例分享
Nov 11 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
Feb 18 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 HTML / CSS
聊聊CSS粘性定位sticky案例解析
Jun 01 HTML / CSS
td 内容自动换行 table表格td设置宽度后文字太多自动换行
Dec 24 HTML / CSS
2014年圣诞节倒计时网页的制作过程
Dec 05 #HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 #HTML / CSS
HTML5中drawImage用法分析
Dec 01 #HTML / CSS
html5+css3气泡组件的实现
Nov 21 #HTML / CSS
5 个强大的HTML5 API 函数推荐
Nov 19 #HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
Nov 05 #HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
Nov 05 #HTML / CSS
You might like
php编写一个简单的路由类
2011/04/13 PHP
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
JavaScript 字符编码规则
2009/05/04 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
vue--点击当前增加class,其他删除class的方法
2018/09/15 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
[06:53]2018DOTA2国际邀请赛寻真——为复仇而来的Newbee
2018/08/15 DOTA
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
用Python进行TCP网络编程的教程
2015/04/29 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
Python解决N阶台阶走法问题的方法分析
2017/12/28 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
详解Python做一个名片管理系统
2019/03/14 Python
django认证系统 Authentication使用详解
2019/07/22 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
创建无烟单位实施方案
2014/03/29 职场文书
化学专业自荐信
2014/05/28 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
故宫的导游词
2015/01/31 职场文书