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

2024-09-05 07:11:27

字體：大中小

來源：轉載

供稿：網友

http://www.companysz.com/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.
<details>
<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 元素，那么每個子元素成為網格中的一行。

<datagrid>
<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);
};