【HTML 教程】其他標(biāo)簽
作者 |?阮一峰
1、
1.1、基本用法
<dialog>
Hello world
dialog>
上面就是一個最簡單的對話框。
默認(rèn)情況下，對話框是隱藏的，不會在網(wǎng)頁上顯示。如果要讓對話框顯示，必須加上open屬性。
<dialog open>
Hello world
dialog>
上面代碼會在網(wǎng)頁顯示一個方框，內(nèi)容是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');
// 對話框顯示，相當(dāng)于增加 open 屬性
modal.showModal();
// 對話框關(guān)閉，相當(dāng)于移除 open 屬性
modal.close();
開發(fā)者可以提供關(guān)閉按鈕，讓其調(diào)用Dialog.close()方法，關(guān)閉對話框。
Dialog.close()方法可以接受一個字符串作為參數(shù)，用于傳遞信息。
modal.close('Accepted');
modal.returnValue // "Accepted"
Dialog.showModal()方法喚起對話框時，會有一個透明層，阻止用戶與對話框外部的內(nèi)容互動。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：對話框關(guān)閉時觸發(fā)
cancel：用戶按下esc鍵關(guān)閉對話框時觸發(fā)
如果希望用戶點(diǎn)擊透明層，就關(guān)閉對話框，可以用下面的代碼。
modal.addEventListener('click', (event) => {
if (event.target === modal) {
modal.close('cancelled');
}
});
2、，
2.1、基本用法
<details>
這是一段解釋文本。
details>
上面的代碼在瀏覽器里面，會折疊起來，顯示Details，前面有一個三角形，就像下面這樣。
? Details
用戶點(diǎn)擊這段文本，折疊的文本就會展開，顯示詳細(xì)內(nèi)容。
▼ Details
這是一段解釋文本。
再點(diǎn)擊一下，展開的文本又會重新折疊起來。
<details open>
這是一段解釋文本。
details>
上面代碼默認(rèn)打開折疊。
<details>
<summary>這是標(biāo)題summary>
這是一段解釋文本。
details>
上面的代碼顯示結(jié)果如下。
? 這是標(biāo)題
點(diǎn)擊后，展示的效果如下。
▼ 這是標(biāo)題
這是一段解釋文本。
通過 CSS 設(shè)置summary::-webkit-details-marker，可以改變標(biāo)題前面的三角箭頭。
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) {
// 展開狀態(tài)
} else {
// 折疊狀態(tài)
}
Details元素有一個toggle事件，打開或關(guān)閉折疊時，都會觸發(fā)這個事件。
details.addEventListener('toggle', event => {
if (details.open) {
/* 展開狀況 */
} else {
/* 折疊狀態(tài) */
}
});