购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

3.2.3 原生弹层与popover属性

虽然<dialog>元素强大好用,但是对于一些需要敏捷交互的场景,它就显得有些笨重,例如当要实现点击按钮预览图片的效果时。

如果用<dialog>元素实现,那么我们需要给按钮绑定点击事件,将图片元素放在<dialog>元素之中,最后还需要专门写一个弹框关闭的方法。

在移动端开发中,由于屏幕尺寸有限,很多交互效果都是通过弹层实现的,其中有个重要的行为就是点击空白区域隐藏弹层,而<dialog>元素的模态层点击是没有隐藏行为的,因此预览图片的效果并不适合使用<dialog>元素实现。

基于种种现实的需求,一个全新的HTML属性出现了,这个属性就是popover,目前已经被各大现代浏览器支持,并且是一个全局HTML属性。所谓全局HTML属性,就是所有元素都可以设置的属性,例如id、class或性能监控相关的elementtiming属性。

有了popover属性,我们只需要使用简单的CSS和HTML代码,就可以在不使用任何JavaScript代码的情况下实现任意的基于屏幕定位的弹层效果。

1.popover属性的基本使用

popover属性的使用极为简单,使用一个简单的案例就一目了然:

给需要弹出的元素设置popover属性,给触发显示的按钮元素设置popovertarget属性,其值等同于弹出元素的id属性值即可。

此时,点击该按钮,图片就会以弹出框的形式出现,其默认样式和<dialog>元素极为相似,都有个粗的黑色边框,如图3-24所示。

图3-24 popover属性显示图片效果

你可以通过在浏览器中输入地址https://www.htmlapi.cn/3/2-5.html或扫码访问来体验。

虽说相似,但仔细一看,在具体的细节上还是有差异的,包括:

· popover弹层的内间距更小。

· popover弹层默认窗体居中,且popover弹层元素是顶层元素,如图3-25所示。

图3-25 popover弹层元素顶层特性

· popover弹层默认的模态背景是透明且可穿透的,如果希望有黑色半透明背景,则需要使用::backdrop伪元素自定义,例如:

· popover弹层内容之外的区域点击后会自动关闭当前弹层,无须额外的DOM事件支持,注意,此行为是可以自定义的。

2.原生弹层相关的属性和方法

除popover属性外,还有一些相关的属性和方法。

首先介绍一下全局属性popover的语法及几个全局的、和弹层显隐相关的API。

popover属性支持两个值,分别是'auto'和'manual',表示弹层的隐藏是自动触发的还是手动执行的。

如果设置popover="manual",则弹层的隐藏需要手动执行,此属性值多用在多个弹层同时出现的场景下。

弹层的显示与隐藏除通过特定的元素外加特定的属性触发外,还可以使用下面这三个全局方法。

· HTMLElement.hidePopover()

· HTMLElement.showPopover()

· HTMLElement.togglePopover()

看API名称就可以知道什么意思了,因此,不展开介绍。

接下来介绍触发弹层显示的几个HTML属性,注意,下面这两个HTML属性只能用在<button>元素和<input>元素上。

· popovertarget:指向目标弹层元素的id属性值。如果希望知道目标弹层元素的DOM对象,可以访问当前元素对象的popoverTargetElement属性获取。

· popovertargetaction:支持'hide'、'show或'toggle'这三个值,表示点击按钮后,弹层是显示还是隐藏,对应的DOM对象属性是popoverTargetAction。

最后,我们还可以使用CSS:popover-open伪类匹配显示中的弹层元素(不包括强制设置display:block)让弹层显示的情况,以及使用beforetoggle和toggle事件感知弹层显隐状态的变化。

3.popover属性模拟移动端下拉框

了解了popover的特性和语法,接下来就是实践环节了,看如何模拟一个在移动端很常见的、如图3-26所示的下拉框效果。

图3-26 popover属性模拟移动端下拉框效果

在过去,这种效果需要耗费大量的JavaScript代码,而如今,主要的工作则是在CSS样式的设置上,包括将默认的居中效果改为居底,以及设置黑色半透明背景色。假设HTML结构如下:

其中,上半部分HTML是原生下拉框,通过覆盖一个透明度为0的按钮来触发弹层的显示,下半部分则是弹层部分,使用radio类型的选择框模拟选择行为。

接下来只需要下面几行JavaScript代码就足够了:

和过去的实现相比,简单了不知道多少个数量级,并且语义良好,性能优异,是绝对的最佳实践。

对了,差点忘记了,最终的效果你可以通过在浏览器中输入地址https://www.htmlapi.cn/3/2-6.html或扫码访问来体验。 qbub2EO9FvuCTte5xZP9mpsQwy+PHCBu6RYz2WAsv5irYq0b2Uhr092xuvWXsjs2

点击中间区域
呼出菜单
上一章
目录
下一章
×