其他標簽 · HTML 教程

# 其他標簽本章介紹一些最新引入標準的標簽。 ## `<dialog>` ### 基本用法 `<dialog>`標簽表示一個可以關閉的對話框。 ```html <dialog> Hello world </dialog> ``` 上面就是一個最簡單的對話框。默認情況下，對話框是隱藏的，不會在網頁上顯示。如果要讓對話框顯示，必須加上`open`屬性。 ```html <dialog open> Hello world </dialog> ``` 上面代碼會在網頁顯示一個方框，內容是`Hello world`。 `<dialog>`元素里面，可以放入其他 HTML 元素。 ```html <dialog open> <form method="dialog"> <input type="text"> <button type="submit" value="foo">提交</button> </form> </dialog> ``` 上面的對話框里面，有一個輸入框和提交按鈕。注意，上例中`<form>`的`method`屬性設為`dialog`，這時點擊提交按鈕，對話框就會消失。但是，表單不會提交到服務器，瀏覽器會將表單元素的`returnValue`屬性設為 Submit 按鈕的`value`屬性（上例是`foo`）。 ### JavaScript API `<dialog>`元素的 JavaScript API 提供`Dialog.showModal()`和`Dialog.close()`兩個方法，用于打開/關閉對話框。 ```javascript const modal = document.querySelector('dialog'); // 對話框顯示，相當于增加 open 屬性 modal.showModal(); // 對話框關閉，相當于移除 open 屬性 modal.close(); ``` 開發者可以提供關閉按鈕，讓其調用`Dialog.close()`方法，關閉對話框。 `Dialog.close()`方法可以接受一個字符串作為參數，用于傳遞信息。`<dialog>`接口的`returnValue`屬性可以讀取這個字符串，否則`returnValue`屬性等于提交按鈕的`value`屬性。 ```javascript modal.close('Accepted'); modal.returnValue // "Accepted" ``` `Dialog.showModal()`方法喚起對話框時，會有一個透明層，阻止用戶與對話框外部的內容互動。CSS 提供了一個 Dialog 元素的`::backdrop`偽類，用于選中這個透明層，因此可以編寫樣式讓透明層變得可見。 ```css 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); } ``` 上面代碼不僅為`<dialog>`指定了樣式，還將對話框的透明層變成了灰色透明。 `<dialog>`元素還有一個`Dialog.show()`方法，也能喚起對話框，但是沒有透明層，用戶可以與對話框外部的內容互動。 ### 事件 `<dialog>`元素有兩個事件，可以監聽。 - `close`：對話框關閉時觸發 - `cancel`：用戶按下`esc`鍵關閉對話框時觸發如果希望用戶點擊透明層，就關閉對話框，可以用下面的代碼。 ```javascript modal.addEventListener('click', (event) => { if (event.target === modal) { modal.close('cancelled'); } }); ``` ## `<details>`，`<summary>` ### 基本用法 `<details>`標簽用來折疊內容，瀏覽器會折疊顯示該標簽的內容。 ```html <details> 這是一段解釋文本。 </details> ``` 上面的代碼在瀏覽器里面，會折疊起來，顯示`Details`，前面有一個三角形，就像下面這樣。 ```html ? Details ``` 用戶點擊這段文本，折疊的文本就會展開，顯示詳細內容。 ```html ▼ Details 這是一段解釋文本。 ``` 再點擊一下，展開的文本又會重新折疊起來。 `<details>`標簽的`open`屬性，用于默認打開折疊。 ```html <details open> 這是一段解釋文本。 </details> ``` 上面代碼默認打開折疊。 `<summary>`標簽用來定制折疊內容的標題。 ```html <details> <summary>這是標題</summary> 這是一段解釋文本。 </details> ``` 上面的代碼顯示結果如下。 ```html ? 這是標題 ``` 點擊后，展示的效果如下。 ```html ▼ 這是標題這是一段解釋文本。 ``` 通過 CSS 設置`summary::-webkit-details-marker`，可以改變標題前面的三角箭頭。 ```css summary::-webkit-details-marker { background: url(https://example.com/foo.svg); color: transparent; } ``` 下面的樣式是另一種替換箭頭的方法。 ```css summary::-webkit-details-marker { display: none; } summary:before { content: "\2714"; color: #696f7c; margin-right: 5px; } ``` ### JavaScript API `Details`元素的`open`屬性返回`<details>`當前是打開還是關閉。 ```javascript const details = document.querySelector('details'); if (detail.open === true) { // 展開狀態 } else { // 折疊狀態 } ``` `Details`元素有一個`toggle`事件，打開或關閉折疊時，都會觸發這個事件。 ```javascript details.addEventListener('toggle', event => { if (details.open) { /* 展開狀況 */ } else { /* 折疊狀態 */ } }); ``` ## 參考鏈接 - [Meet the New Dialog Element](https://keithjgrant.com/posts/2018/meet-the-new-dialog-element/), Keith J. Grant - [The dialog element: The way to create tomorrow’s modal windows](https://blog.logrocket.com/the-dialog-element-the-way-to-create-tomorrows-modal-windows-f1d4ab14380b), Abhishek Jakhar - [Details/Summary is the Easiest Way Ever to Make an Accordion](https://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion/), Chris Coyier