HTML5的結構與語意(5):互動_html5教學技巧

http://www.jb51.net/html_xhtml/20080306/html_xhtml_4688.html
　　HTML 5 也稱為 Web Applications 1.0。為了實現這個目標，增加了幾個為 Web 頁面提供互動體驗的新元素：
　　details
　　datagrid
　　menu
　　command
　　這些元素都可以根據使用者的操作和選擇改變顯示的內容，而不需要從伺服器裝載新頁面。
details
　　details 元素表示在預設情況下可能不顯示的詳細資訊。可選的 legend 元素可以提供詳細資訊的摘要。
　　details 元素的用途之一是提供註腳和尾註。例如：
The bill of a Craveri's Murrelet is about 10% thinner
than the bill of a Xantus's Murrelet.

[Sibley, 2000]Sibley, David Allen, The Sibley Guide to Birds,

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

　　並沒有指定特定的顯示方式。瀏覽器可選用註腳、尾註和工具提示等方式。
　　每個 details 元素可以有一個 open 屬性。如果設定了這個屬性，那麼詳細資訊在最初就顯示出來。如果沒有設定這個屬性，那麼就會隱藏它們，直到使用者要求顯示它們。無論是哪種情況，使用者都可以透過點擊圖示或其他控制項來顯示或隱藏詳細資訊。

datagrid
　　datagrid 元素提供一個網格控制項。可以用它顯示樹、列表和表格，使用者和腳本可以更新這些介面元素。與之相反，傳統的表格主要用來顯示靜態資料。
　　datagrid 從它的內容（一個 table、select 或其他 HTML 元素）獲得初始資料。例如，代碼 9 中的 datagrid 包含一張成績表。在這個範例中，datagrid 的資料來自一個 table。更簡單的一維 datagrid 可以從 select 元素取得資料。如果使用其他 HTML 元素，那麼每個子元素成為網格中的一行。

Jones	Allison	A-	B	A
Smith	Johnny	A	C	A
Willis	Sydney	C-	D td>	F

Jones	Allison	A-	B	A
Smith	Johnny	A	C	A
Willis	Sydney	C-	D	F
Wilson	Frank	B-	B	A

Wilson Frank B- B A

　　這個元素與常規表格的區別在於，使用者可以選擇行、列和單元格；把行、列和單元格折疊起來；編輯單元格；刪除行、列和單元格；對網格排序；以及在客戶機瀏覽器中直接進行其他資料操作。可以用 JavaScript 程式碼監視更新。 Document Object Model（DOM）中增加了 HTMLDataGridElement 介面以支援這個元素（程式碼 10　HTMLDataGridElement）。
interface HTMLDataGridElement : HTMLElement {
attribute DataGridDataProvider data;
readonly attribute DataGridSelection selection;
attribute boolean multiple; void updateRowsInserted(in RowSpecification row, in unsigned long count);
void updateRowsRemoved(in Rowupification row, in oidsed idroid; 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 getChildposition), 15%; 🎜> unsigned long getColumnCount();
DOMString getCaptionText(in unsigned long column);
void getCaptionClasses(in unsigned long column, in DOMTokenList classs); HTMLMenuElement getRowMenu(in RowSpecification row);
void getRowMenu(in RowSpecification row);
void getRowClasses(in RowSpecification row, in DOMTokenList classes);
DOMString getCellData(in Rowification row, inificsigned long Classlumnoids; unsigned。 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 選單　是一個彈出警告框的選單。










　　也可以用 checked="checked" 屬性將指令轉換為複選框。透過指定 radiogroup 屬性，可以將複選框轉換為單選按鈕，這個屬性的值是互相排斥的按鈕的群組名稱。
　　除了簡單的命令清單之外，還可以使用 menu 元素建立工具列或彈出式上下文選單，這需要將 type 屬性設為 toolbar 或 popup。例如，程式碼　13. HTML 5 工具列　顯示一個與 WordPress 等 blog 編輯器相似的工具列。它使用 icon 屬性連結到按鈕的圖片。










>










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








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