【HTML 教程】其他标签
共 2306字,需浏览 5分钟
·
2020-12-12 10:01
作者 | 阮一峰
1、
1.1、基本用法
<dialog>
Hello world
dialog>
上面就是一个最简单的对话框。
默认情况下,对话框是隐藏的,不会在网页上显示。如果要让对话框显示,必须加上open属性。
<dialog open>
Hello world
dialog>
上面代码会在网页显示一个方框,内容是Hello world。
<dialog open>
<form method="dialog">
<input type="text">
<button type="submit" value="foo">提交button>
form>
dialog>
上面的对话框里面,有一个输入框和提交按钮。
注意,上例中
1.2、JavaScript API
const modal = document.querySelector('dialog');
// 对话框显示,相当于增加 open 属性
modal.showModal();
// 对话框关闭,相当于移除 open 属性
modal.close();
开发者可以提供关闭按钮,让其调用Dialog.close()方法,关闭对话框。
Dialog.close()方法可以接受一个字符串作为参数,用于传递信息。
modal.close('Accepted');
modal.returnValue // "Accepted"
Dialog.showModal()方法唤起对话框时,会有一个透明层,阻止用户与对话框外部的内容互动。CSS 提供了一个 Dialog 元素的::backdrop伪类,用于选中这个透明层,因此可以编写样式让透明层变得可见。
dialog {
padding: 0;
border: 0;
border-radius: 0.6rem;
box-shadow: 0 0 1em black;
}
dialog::backdrop {
/* make the backdrop a semi-transparent black */
background-color: rgba(0, 0, 0, 0.4);
}
上面代码不仅为
1.3、事件
close:对话框关闭时触发
cancel:用户按下esc键关闭对话框时触发
如果希望用户点击透明层,就关闭对话框,可以用下面的代码。
modal.addEventListener('click', (event) => {
if (event.target === modal) {
modal.close('cancelled');
}
});
2、,
2.1、基本用法
<details>
这是一段解释文本。
details>
上面的代码在浏览器里面,会折叠起来,显示Details,前面有一个三角形,就像下面这样。
▶ Details
用户点击这段文本,折叠的文本就会展开,显示详细内容。
▼ Details
这是一段解释文本。
再点击一下,展开的文本又会重新折叠起来。
<details open>
这是一段解释文本。
details>
上面代码默认打开折叠。
<details>
<summary>这是标题summary>
这是一段解释文本。
details>
上面的代码显示结果如下。
▶ 这是标题
点击后,展示的效果如下。
▼ 这是标题
这是一段解释文本。
通过 CSS 设置summary::-webkit-details-marker,可以改变标题前面的三角箭头。
summary::-webkit-details-marker {
background: url(https://example.com/foo.svg);
color: transparent;
}
下面的样式是另一种替换箭头的方法。
summary::-webkit-details-marker {
display: none;
}
summary:before {
content: "\2714";
color: #696f7c;
margin-right: 5px;
}
2.2、JavaScript API
Details元素的open属性返回
const details = document.querySelector('details');
if (detail.open === true) {
// 展开状态
} else {
// 折叠状态
}
Details元素有一个toggle事件,打开或关闭折叠时,都会触发这个事件。
details.addEventListener('toggle', event => {
if (details.open) {
/* 展开状况 */
} else {
/* 折叠状态 */
}
});