HTML5的結構和語義(5):交互

作者：Eve Cole 更新時間：2025-06-09 19:48:02

點評： HTML 5 也被稱為Web Applications 1.0。為了實現這個目標，增加了幾個為Web 頁面提供交互體驗的新元素： details datagrid menu command 這些元素都可以根據用戶的

HTML 5 也被稱為Web Applications 1.0。為了實現這個目標，增加了幾個為Web 頁面提供交互體驗的新元素：

details

datagrid

command

這些元素都可以根據用戶的操作和選擇改變顯示的內容，而不需要從服務器裝載新頁面。

details

details 元素表示在默認情況下可能不顯示的詳細信息。可選的legend 元素可以提供詳細信息的摘要。

details 元素的用途之一是提供腳註和尾註。例如：

The bill of a Craveri's Murrelet is about 10% thinner

than the bill of a Xantus's Murrelet.

<legend>[Sibley, 2000]</legend>

<p>Sibley, David Allen, The Sibley Guide to Birds,

(New York: Chanticleer Press, 2000) p. 247

</p>

</details>

沒有指定具體的顯示方式。瀏覽器可以選用腳註、尾註和工具提示等方式。

每個details 元素可以有一個open 屬性。如果設置了這個屬性，那麼詳細信息在最初就顯示出來。如果沒有設置這個屬性，那麼會隱藏它們，直到用戶要求顯示它們。無論是哪種情況，用戶都可以通過單擊一個圖標或其他控件來顯示或隱藏詳細信息。

datagrid

datagrid 元素提供一個網格控件。可以用它顯示樹、列表和表格，用戶和腳本可以更新這些界面元素。與之相反，傳統的表格主要用來顯示靜態數據。

datagrid 從它的內容（一個table、select 或其他HTML 元素）獲得初始數據。例如，代碼9 中的datagrid 包含一張成績表。在這個示例中，datagrid 的數據來自一個table。更簡單的一維datagrid 可以從select 元素獲得數據。如果使用其他HTML 元素，那麼每個子元素成為網格中的一行。

<table>

<tr><td>Jones</td><td>Allison</td><td>A-</td><td>B </td><td>A</td></tr>

<tr><td>Smith</td><td>Johnny</td><td>A</td><td>C </td><td>A</td></tr>

<tr><td>Willis</td><td>Sydney</td><td>C-</td><td>D</td><td>F</td></tr>

<tr><td>Wilson</td><td>Frank</td><td>B-</td><td>B </td><td>A</td></tr>

</table>

</datagrid>

這個元素與常規表格的區別在於，用戶可以選擇行、列和單元格；把行、列和單元格折疊起來；編輯單元格；刪除行、列和單元格；對網格排序；以及在客戶機瀏覽器中直接進行其他數據操作。可以用JavaScript 代碼監視更新。 Document Object Model（DOM）中增加了HTMLDataGridElement 接口以支持這個元素（代碼10 HTMLDataGridElement）。

interface HTMLDataGridElement : HTMLElement {

attribute DataGridDataProvider data;

readonly attribute DataGridSelection selection;

attribute boolean multiple;

attribute boolean disabled;

void updateEverything();

void updateRowsChanged(in RowSpecification row, in unsigned long count);

void updateRowsInserted(in RowSpecification row, in unsigned long count);

void updateRowsRemoved(in RowSpecification row, in unsigned long count);

void updateRowChanged(in RowSpecification row);

void updateColumnChanged(in unsigned long column);

void updateCellChanged(in RowSpecification row, in unsigned long column);

};

還可以使用DOM 在網格中動態地裝載數據。也就是說，datagrid 可以不包含那些提供初始數據的子元素。可以用一個DataGridDataProvider 對象設置它（代碼11 DataGridDataProvider）。這樣就可以從數據庫、XmlHttpRequest 或者JavaScript 代碼能夠訪問的任何資源裝載數據。

interface DataGridDataProvider {

void initialize(in HTMLDataGridElement datagrid);

unsigned long getRowCount(in RowSpecification row);

unsigned long getChildAtPosition(in RowSpecification parentRow,

in unsigned long position);

unsigned long getColumnCount();

DOMString getCaptionText(in unsigned long column);

void getCaptionClasses(in unsigned long column, in DOMTokenList classes);

DOMString getRowImage(in RowSpecification row);

HTMLMenuElement getRowMenu(in RowSpecification row);

void getRowClasses(in RowSpecification row, in DOMTokenList classes);

DOMString getCellData(in RowSpecification row, in unsigned long column);

void getCellClasses(in RowSpecification row, in unsigned long column,

in DOMTokenList classes);

void toggleColumnSortState(in unsigned long column);

void setCellCheckedState(in RowSpecification row, in unsigned long column,

in long state);

void cycleCell(in RowSpecification row, in unsigned long column);

void editCell(in RowSpecification row, in unsigned long column, in DOMString data);

};

menu 和command

menu 元素實際上在HTML 2 中就出現了。在HTML 4 中廢棄了它，但是HTML 5 又恢復了它並指定了新的意義。在HTML 5 中，menu 包含command 元素，每個command 元素引發一個操作。例如，代碼12 HTML 5 菜單是一個彈出警告框的菜單。

<menu>

</menu>

還可以用checked=checked 屬性將命令轉換為複選框。通過指定radiogroup 屬性，可以將復選框轉換為單選按鈕，這個屬性的值是互相排斥的按鈕的組名。

除了簡單的命令列表之外，還可以使用menu 元素創建工具欄或彈出式上下文菜單，這需要將type 屬性設置為toolbar 或popup。例如，代碼13. HTML 5 工具欄顯示一個與WordPress 等blog 編輯器相似的工具欄。它使用icon 屬性鏈接到按鈕的圖片。

</menu>

label 屬性提供菜單的標題。例如，代碼14. HTML 5 Edit 菜單顯示一個Edit 菜單。

</menu>

菜單可以嵌套在其他菜單中，形成層次化的菜單結構。