html5.2之 — dialog简介

2017年12月24号,HTML5.2标准固化,也代表着移动端进入HTML5.3规划阶段,虽然HTML5.2固化了,但内部的一些新规范,在移动端的浏览器中的支持性还有待提高,这里我们来看一个算是常用的新被纳入标准的标签吧,它就是dialog标签。

1. 写在前面

说起dialog标签,可能很多人都比较陌生,毕竟这个标签直到HTML5.2标准固定,也只是chrome的浏览器才支持的,那至于该标签的用处,根据语义也可以很明显的理解到,会话。

这里我们可能会想到的是,alertconfirm等弹窗,是的,它们是同一个家族的,都是弹出框,接下来我们就简单的看看,dialog标签的一些属性与使用场景。

2. 标签使用


  
    

Title

Content

既然是标签,那么其实与我们常用的divp等标签一样,如上面的示例代码所示,其内部支持任意的其他元素。

这里,你可能会注意到,在上面的示例代码中的open属性,是的,这个是用来控制这个弹窗的显示和隐藏的,当然,你也可以任性的使用css来控制,只是那样在一些设备的辅助功能时(比如无障碍访问,读屏软件等),就会出现异常了,所以建议还是使用标准中的显示与隐藏功能。

3. 支持的默认方法

首先,dialog标签是HTMLDialogElement的一个示例,继承自HTMLElement,所以,它与div这一的标签是属于同层次的标签,唯一不同的是,它比div有更多的默认功能,这一小节,我们就来看看,dialog有哪些默认的方法供我们使用。


var dialog = document.getElementById("dialog");
// 假设页面中,有一个id=dialog的dialog标签

// 关闭dialog
dialog.close();

// 以toast的形式显示dialog
dialog.show();

// 以模态框的形式显示dialog
dialog.showModal();

// dialog.close()调用时传入的参数值
dialog.returnVlaue;

// dialog的显示状态
dialog.open;


现在来看一个示例:dialog方法示例展示

你可以自己先去示例中,操作一下,然后看看有哪些特色,然后再回来对比一下,接下来的总结:

1: close方法,可以多次被调用,即便是隐藏状态,也可以再次被调用。

2: close可以传入一个变量,这个变量必须是字符串,在returnVlaue中表现。

3: show方法,也可以多次被调用,即便在隐藏状态,不会有任何问题。

4: show方法,不会更改toast的位置,弹出框原本在什么位置,show方法调用之后,依然在原有的位置。

5: show方法,显示位置紧挨着前一个元素后面,居中,没有背后的遮罩层,z-index的显示方式与relative不设置z-index的类似(如果在此之前,没有调用过showModal的话)。

6: 如果调用过showModal后,那么show方法后,元素显示在showModal显示的位置,不会变动(即便内容高度变化了很多)。

7: 如果有两个dialog元素,都调用show方法,在html结构中,后面的dialog会永远覆盖在前面的那个上层(不管那个dialog先调用了show方法)。

8: showModal的显示,背后会有遮罩层,显示层级是浏览器webview级别的,怎么理解呢,你可以设置一个元素,级别非常高,在使用showModal显示出dialog属性后,dialog都是在最前面的,这一点特别适合做模态框,肯定不会在弹出框出现之后,出现层级混乱的情况。

9: showModal只能调用一次,这里的一次是说,如果dialog在显示状态,那么在再次调用showModal,就会报错,并且不能直接执行,或者说,只要open属性存在的情况下,再次调用,都会报错,所以还是使用默认的open属性来做dialog的显示隐藏更好。

10: 如果页面上有两个dialog元素,都在调用showModal方法的话,不论他们在HTML中的结构,后调用的dialog的层级会高于之前调用的dialog的层级。

11: dialog.returnVlaue的取值,是dialog.close(string)调用时传入的值,只支持字符串,只有在dialog的显示的情况下,调用dialog.close传入的值,才有效。

12: 如果一直没有在close中传值,那么returnVlaue的值为空,如果某次传值dialog.close("1"),再下次show之后,dialog.close()关闭,returnVlaue依然等于“1”。

13: open的返回值是:true/false

4. 支持的默认事件

dialog还有一个好处就是,它支持出click等基础事件之外的,额外两个针对于dialog的特殊事件:


var dialog = document.getElementById("dialog");
// 假设页面中,有一个id=dialog的dialog标签

// 当调用close方法时
dialog.onclose = function(){};

// 当在pc端按下esc按键时。不过在chrome版本之后,好像不管用了。
dialog.oncancel = function(){};


现在来看一个示例:dialog事件示例展示。

也有几个问题,这里来列举一下:

1: 只要调用dialog.close()来隐藏的dialog,才能触发onclose事件。

2: cancel事件触发之后,必定会继续触发close事件,chrome64版本之后,cancel的触发,不是esc按键了。

3: 如果有多种关闭dialog的按钮,那么在每次调用close的时候传入不同的值,在close事件的回调里面,使用returnVlaue的取值,来判断,是哪个按钮用来触发的关闭事件。

5. 其他

前面把dialog的一些表现进了说明,可能有不全,不准确的情况,也可能随着时间的推移,有更新的特性出现,欢迎提出补充。

在看前面的示例时,我们也看到了一下不足的地方,比如:样式特别丑,关于这点,我们可以完全使用CSS把样式reset掉,不影响语义,和其他的任何东西,放心重构就可以了。

这里只是想说一下,dialog的表现,所以就不做这些了。

6. 总结

dialog毕竟属于弹窗对话的语义化标签,并且有一些独有的优势(比如webview层级的高度),虽然现在只是chrome支持,但对于以后的使用,依然是很看好的,甚至现在也可以自己兼容一下,在其他浏览器,自己去实现一套dialog的机制(也许已经有这套实现方案了,这里就不去找了)。

如有疑问,欢迎留言讨论。

本文地址:http://www.zhangyunling.com/?p=796

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>