html对话框跳转页面,html5各种页面切换效果和模态对话框用法总结
这篇文章主要为大家介绍了html5各种页面切换效果和模态对话框用法总结,较为详细的介绍了HTML5的各种页面元素的使用技巧,非常具有实用价值,需要的朋友可以参考下
本文详细总结了html5各种页面切换效果和模态对话框用法。分享给大家供大家参考。具体分析如下:
页面动画:
data-transition 属性可以定义页面切换是的动画效果。
例如:I'll pop
data-transition 参数表:
参数说明
slide 从右侧向左滑入页面
slideup 从底部向上滑入
slidedown 从上向下滑入
pop 从中心渐显展开
fade 渐显
flip 翻转
备注:如果想要在目标页面中显示后退按钮,可以在链接中加入 data-direction="reverse"属性,这个属性和原来的 data-back="true"相同,不知道在正式版本中将会保留哪个属性。
模态对话框
模态对话框是一种带有圆角标题栏和关闭按钮的伪浮动层,用于独占事件的应用。任何结构化的页面都可以用 data-rel="dialog"链接的方式实现模态对话框应用。
例如:Open dialog
这个页面切换效果同样可以使用标准页面的 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"属性。
标题容器
标题容器是页面页眉区域的显示控件,主要用来显示标题和主要操作的区域。
结构代码:
复制代码
代码如下:
Page Title
为了方便页面的交互在页面切换后会在标题容器的左侧自动生成一个后退按钮,这样可以简化我们的开发复杂程度,但是有些时候我们会因为应用的需求而不需要这个后退按钮,可以在标题容器上添加 data-backbtn="false"属性用来阻止后退按钮的自动创建。
标题容器的左侧和右侧分别可以放置一个按钮,在阻止自动生成的后退按钮后,我们就可以在后退按钮的位置来自定义按钮了。
例如:
复制代码
代码如下:
Cancel
Edit Contact
Save
如果需要自定义默认的后退按钮中的文本,可以用data-back-btn-text="previous"属性来实现,或者通过扩展的方式实现:
复制代码
代码如下:
$.mobile.page.prototype.options.backBtnText = "previous"
如果你没有使用标准的结构来创建标题区域,那么框架将不会自动生成默认的按钮。
页脚容器
页脚容器的结构和标题容器的结构基本相同,只要把 data-role 属性的参数设置为”footer”。
例如:
复制代码
代码如下:
Footer content
与标题容器相比页脚容器有更多的灵活度,它不会想标题容器一样只允许放置两个按钮,并且也不会默认的把按钮放置在左右的顶端,页脚的按钮默认是从左到右依次排列的,并且何以放置更多的按钮。
在页脚容器上只要添加一个 class="ui-bar"就可以将页脚变成一个工具条,你可以不用设置任何的布局样式就可以在其中添加整齐的按钮。
例如:
复制代码
代码如下:
Remove
Add
Up
Down
如果我们需要一组链接效果,我们可以这样写:
复制代码
代码如下:
Remove
Add
Up
Down
技巧:通过使用 data-id 属性可以让多个页面使用相同的页脚。
导航
导航容器是一个可以每行容纳最多 5 个按钮的按钮组控件,用一个拥有 data-role="navbar"
属性的 div 来容纳这些按钮。
例子:
复制代码
代码如下:
- One
- Two
在默认的按钮上添加 class="ui-btn-active"
如果按钮的数量超过 5 个,导航容器将会自动以合适的数量分配成多行显示。
按钮
你可以将页面中的任何一个链接通过 data-role="button"来声明成为按钮的显示风格。为了风格统一,框架会在页面加载时自动将 form 类的按钮格式化为 jQuery Mobile 风格的按钮,不需要添加 data-role 属性。
框架中包含了一组常用的图标可以用于按钮,用 data-icon 属性中的参数来定义显示不同的图标效果。
例如:
复制代码
代码如下:
Delete
data-icon 原生参数列表
除了可以默认显示左侧的图标之外,还可以用 data-iconpos 属性来定义图标与文字的位置关系。
data-iconpos 参数列表:
参数效果:
right 图标在文字的右侧
top 图标在文字上面
bottom 图标在文字下面
data-iconpos="notext"属性可以让按钮隐藏文字。
内联样式
在框架中默认情况下按钮是横向独占根据屏幕宽度横向自适应的,但是我们在应用的应用中经常需要在一行中显示多个按钮,这时候我们就需要知道一个新的叫做内联模式的属性了
data-inline="true"。
例如:
复制代码
代码如下:
Cancel
Save
按钮组
jQuery Mobile 框架可以将几个按钮以组的方式显示,data-role="controlgroup"用以展示按钮间的紧凑关系。例如:
复制代码
代码如下:
Yes
No
Maybe
如果需要按钮横向排列可以增加 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 原生的状态显示。
例如:
复制代码
代码如下:
A
B
C
列表应用
信息列表是开发应用中使用频率相对比较高的控件,用于数据显示、导航, 数据列表等。为了适应不同的信息内容,列表的表现形式也多种多样。
列表的代码结构是以有序和无序列表来实现的,只要在 ul 或 ol 上声明 data-role="listview"就可以让框架以列表的方式渲染了,例如:
复制代码
代码如下:
- Acura
- Audi
- BMW
如果需要在列表里添加数据,则需要在数据加载后执行 refresh()方法对列表进行数据更新。
例如:
复制代码
代码如下:
$('ul').listview('refresh');
以上是运用 jQuery Mobile 进行界面构建的基础规则。
希望本文所述对大家的HTML5程序设计有所帮助。
html对话框跳转页面,html5各种页面切换效果和模态对话框用法总结相关推荐
- html5各种页面切换效果和模态对话框
页面动画: data-transition 属性可以定义页面切换是的动画效果. 例如:<a href="index.html" data-transition="p ...
- html如何添加子页面,html5 父页面调用子页面js方法
父页面代码: var randid=result.rows.item(0)['id']; plus.webview.close("test_order_detail");//创建之 ...
- html5滚动文字切换效果代码,js+div实现文字滚动和图片切换效果代码
本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了 ...
- 模态对话框和非模态对话框的区别
模态对话框和非模态对话框的区别 假设对话框类名为:CTestDlg 1,如果是模态对话框: CTestDlg ctd;//创建该对话框对像 ctd.DoModale(); 2,如果是非模态的: C ...
- JavaScrip高级应用:操作模态与非模态对话框
JavaScrip高级应用:操作模态与非模态对话框 本文出自:http://www.computerworld.com.cn 作者: 甘冀平 (2002-01-29 20:41:38) 我们知道, ...
- java 非模态_JavaScrip高级应用:操作模态与非模态对话框
http://www.computerworld.com.cn 作者: 甘冀平 (2002-01-29 20:41:38) 我们知道,对话框一般分为两种类型:模态类型(modal)与非模态类型(mod ...
- 来个模态kuang_模态对话框(modal dialogue box)中模态一词的意思是什么?
这个问题也困扰了我很久.最近整理了下资料,写了一篇文章<5 分钟设计指南:对话框>,希望能帮上忙. 对话框 (dialogs) 是叠加在应用主视图上的弹出 (pop-up) 视图,一般会要 ...
- MFC应用模态对话框和非模态对话框
关于对话框呢 第一个了解的就是模态对话框和非模态对话框 定义的话: 1.模态对话框工作状态:当它获得焦点时,将垄断用户的输入,在完成本对话框之前,用户无法对本程序的其他部分进行操作. 2.非模态对话框 ...
- mfc入门基础(六)创建模态对话框与非模态对话框
参考博客: VS2010/MFC编程入门之十一(对话框:模态对话框及其弹出过程)-软件开发-鸡啄米 一.创建模态对话框 1.接着上节中的test02的例子来讲,找到test02.cpp文件,找到函数I ...
最新文章
- iOS保存model数据(自定义Model 可以存放到本地)
- Spring AOP 源码分析 - 拦截器链的执行过程
- Ninject(二)——Modules和Kernel
- 用友互联网战略的变与不变
- hdfs数据均衡操作命令
- 脉脉第一干货贴,互联网职场那点事,关于面试、绩效、晋升、职业规划。
- 常见python爬虫框架_常用高效的Python爬虫框架
- linux下mysql 8.0配置大小写不敏感
- Kalman Filter—Extended Kalman Filter(EKF)
- 第133天:移动端开发的一些总结
- 替换字符串中全部斜杠
- 未来教育计算机二级题库如何更新,未来教育的计算机二级题库准吗?
- 有道智云(表格OCR)API调用流程
- Mosquitto修改默认端口port
- 全球红外(IR)LED行业收入预计2028年达到13.699亿美元
- MOOC中国大学慕课C语言期末编程试题
- 剪辑画中画视频,如何用视频实现画中画效果
- 【ZZ】从入门到高阶,你需要刷哪些书?丨高中物理竞赛辅导书推荐
- Qt中SQL QSqlQuery 对象中prepare() 函数的用法
- python中元组拆包_Python 元组拆包和具名元组解析
热门文章
- linux添加nginx启动脚本_linux环境开机自启动nginx
- 华为修改优先级命令_华为配置命令大全
- vba 数组赋值_VBA数组与字典解决方案第31讲:VBA数组声明及赋值后的回填方法
- 最好电脑操作系统_操作系统都有哪些呢
- clickhouse原理解析与应用实践 pdf_阿里专家分享内部绝密RocketMQ核心原理与最佳实践PDF...
- django再windows下测试命令总结
- synchronized的用法介绍
- 用电脑更新手机ios系统_macOS 11 正式版体验:大更新!苹果把 iOS 风格搬到了电脑上...
- python颜色识别原理_用opencv-python实现颜色检测
- OpenShift 4 - 通过Maven镜像加速Java应用构建速度