html怎么用ui打开,HTML5教程 如何使用原生UI
本篇教程探讨了HTML5教程 如何使用原生UI,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。
<
原生UI的设计目的
HTML和css有一个优势就是灵活的样式设计。在大多数情况下,我们都应该使用HTML+css来负责UI。但是有些情况下,我们发现HTML+css的UI不满足需求。
1. 绝对置顶HTML的video等元素,以及5+的map等原生元素,这些原生控件的层级高于div。对于一些弹出的需要置顶的控件,会造成div模式的控件无法绝对置顶,就像在web开发里弹出的div被flash遮住一样。使用div方式开发的如下弹出控件:alert、confirm、actionSheet、waiting、date、time、prompt、toast,都存在这个问题。为此,HTML5+扩展了上述native级别的UI控件,保证可以绝对置顶。
2. 跨webview如果界面使用webview方式的tab选项卡,但想从底部弹出一个菜单actionsheet,此时使用div方式的弹出菜单由于无法跨webview,只能看到一部分。此时就需要使用nativeUI里的actionsheet才能跨webview。
3. 全屏遮罩弹出控件时,需要对整个屏幕的其他部分做阴影遮罩。使用div遮罩,同样无法蒙住video、map等原生控件,也无法跨webview。而且原生的遮罩还可以蒙住手机顶部状态条,这都是div遮罩做不到的。HTML5+扩展的nativeUI控件,保证可以全屏遮罩。
原生UI的特点
为解决上述问题,HTML5+提供了原生ui,分别在
1. plus.nativeUI规范。plus.nativeUI对原生的常用弹出型UI控件做了封装,包括警告框、确认框、弹出输入框、弹出底部菜单、等待框、可自动消失的提示条等。参考:http://www.html5plus.org/#specification#/specification/nativeUI.html2. plus.nativeobj规范。与nativeUI不同plus.nativeobj提供的是底层的绘图和写字功能, 参考:http://html5plus.org/doc/zh_cn/nativeobj.htmlhttp://ask.dcloud.net.cn/article/665
原生UI的特点有:1. 绝对置顶,不担心被其他原生控件遮挡2. 可以跨webview显示3. 全屏遮罩,保证手机屏幕其他部分处于蒙灰状态4. 原生样式及高性能体验nativeUI的特点是,调用OS的UI控件,确保和本机体验一致。在iOS6、iOS7+、Android2.3、Android4.x、Android5上,OS是不同的设计风格,但弹出框和当前OS风格一致。并且原生的控件展示,比div+css的方式执行效率更高。
nativeUI的局限性
相比div+css,plus.nativeUI也有一个缺点就是可定制性差。开发者无法使用css修饰这些弹出控件的样式,它们长的、且只能长得和本机OS的风格一样。所以在需要个性化设计控件且不在意绝对置顶、跨webview、全屏遮罩这些问题时,也可以使用div+css方式制作弹出控件。plus.nativeobj的view由于可以自己贴图写字,定制型比较强,但使用较复杂。这里有对nativeobj的view的描述http://ask.dcloud.net.cn/article/665
mui框架的封装
与nativeUI不同,mui同时也补充封装了一些div方式的弹出控件。包括div方式的alert、confirm、actionSheet、popover...,可以在nativeUI遇到限制时使用。另外如果要同时多端发布到非5+环境下比如微信公众号里时,则使用mui.alert会自动判断切换,在5+环境下调用plus.nativeUI.alert,在非5+环境下则使用div模式。
弹出半透明的webview,万能但消耗内存
有时我们发现nativeUI弹出的东西没法满足定制需求,而div方式的弹出控件又无法绝对置顶。除了nativeobj的view外,还有一种办法,就是多消耗点内存,即干脆弹出一个非全屏半透明webview。webview的WebviewStyle对象中可以设置zindex来置顶,可以设置高宽,可以设置遮罩,可以设置透明度。在webview里可以随便自定义界面,然后通过webview的evaljs方法做webview之间的窗体通讯并返回结果。
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道!
html怎么用ui打开,HTML5教程 如何使用原生UI相关推荐
- Element UI极简教程(1):Element UI的安装
Java大联盟 致力于最高效的Java学习 关注 B 站搜索:楠哥教你学Java 获取更多优质视频教程 Element UI 简介 Element UI 是一套基于 Vue 的桌面端组件库,封装好 ...
- Figma UI UX设计教程
Figma UI UX设计教程 使用 Figma 获得 UI 设计.用户界面.用户体验设计.UX 设计和网页设计方面的工作 课程英文名:Figma UI UX Design Essentials 此视 ...
- react-native调用Android原生UI组件
当react-native的UI组件不能满足需求时,可以考虑在原生自定UI组件,让RN调用.使用原生UI所考虑的问题: 一.原生UI被调用; 二.修改原生UI属性值; 三.捕捉原生UI的响应; 四.R ...
- mui打开新的html页面跳转,HTML5教程 mui页面跳转
本篇教程探讨了HTML5教程 mui页面跳转,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 1 2 mui.init(); 3 ...
- html 移动设备不显示,IT兄弟连 HTML5教程 在移动设备上设置原始大小显示
原标题:IT兄弟连 HTML5教程 在移动设备上设置原始大小显示 在iPhone系列和iPod Touch中使用的是Safari浏览器,它支持前面介绍的媒体查询表达式.例如,使用iPhone 320p ...
- html5获取当前坐标,HTML5教程 如何获取当前位置的经纬度
本篇教程探讨了HTML5教程 如何获取当前位置的经纬度,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 是想让地图的定位用户位置更准确一些. 查看了介绍: h ...
- HTML5超链接和多媒体,IT兄弟连 HTML5教程 多媒体应用 创建图像和链接
原标题:IT兄弟连 HTML5教程 多媒体应用 创建图像和链接 指引 多媒体来自多种不同的格式.它可以是您听到或看到的任何内容,文字.图片.音乐.音效.录音.电影.动画等等.在因特网上,您会经常发现嵌 ...
- GEE引擎传奇UI界面修改教程
还记得明杰之前给大家分享了gom引擎UI界面编辑教程,今天给大家分享一下gee引擎UI界面修改教程 首先打开登录器生成器-客户端界面设置 在客户端界面设置这里可以自定义UI素材,也可以直接在原素材上编 ...
- html5的教程pdf,html5 教程pdf
html5 教程pdf [2021-02-11 11:54:39] 简介: php去除nbsp的方法:首先创建一个PHP代码示例文件:然后通过"preg_replace("/(\ ...
最新文章
- SLAM综述(3)-视觉与惯导,视觉与深度学习SLAM
- Java程序员从笨鸟到菜鸟之(五)java开发常用类(包装,数字处理集合等)(下)...
- SQL Server-表表达式基础回顾(二十四)
- P3244-[HNOI2015]落忆枫音【dp】
- zabbix监控suse linux,SuSE 系统之部署 Zabbix 监控服务
- GOF之行为型模式Ⅱ(重点)
- C语言文件指针的基本函数介绍包含了fpoen、fclose、fgetc、fputc、fscanf、fprintf、fgets、fputs、fread、fwrite函数以及文件定位函数.
- Oracle列直方图的问题隐患
- Android 应用开发---Android状态栏微技巧
- 220万电商人竞相参与,阿里巴巴认证解决企业人才难题
- c java python php_php c java python 语言对比
- 中文知识图谱研讨会的学习总结 (上) 图谱引入、百度知心、搜狗知立方
- 用PC机实现与ATV12变频器Modbus通信控制电机
- 卡方检验python程序_卡方检验及其python实现
- MySQL中character的意思_mysql 中 character set 与 collation 的点滴理解
- 硕士毕业论文模板(专业硕士)
- Mysql创建自增序列方案(模拟Oracle序列)
- 微信小程序---实现tab选项卡
- 基于springboot在线考试报名系统毕业设计源码031706
- 选择云服务器主要看那方面的参数和性能
热门文章
- [Elasticsearch2.x] 多字段搜索 (三) - multi_match查询和多数字段 译
- 金山毒霸2012正式公测 首次实现新病毒99秒查杀
- Environment.CurrentDirectory 的一个坑
- Druid数据库连接池使用
- js window.open()实现打印,如何在关闭打印窗口时刷新父窗口
- 利用WebService实现远程服务器文件的上传和下载
- .net 调用 sql server 自定义函数,并输出返回值
- JDK8-lambda表达式四种forEach性能对比
- 20200817-Mysql 底层数据结构及Explain详解
- django-2-目录结构