HTML5的结构和语义(5):交互

https://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.

<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、lect 或其他 html 元素）获得初始数据。例如，代码 9 中的 datagrid 包含一张成绩表。在这个示例中，datagrid 的数据来自一个 table。更简单的一维 datagrid 可以从 lect 元素获得数据。如果使用其他 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 datagridlection lection;

attribute boolean multiple;

attribute boolean disabled;

void updateeverything();

void updaterowschanged(in rowspecification row, in unsigned long count);

void updaterowsinrted(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 getcaptionclass(in unsigned long column, in domtokenlist class);

domstring getrowimage(in rowspecification row);

htmlmenuelement getrowmenu(in rowspecification row);

void getrowclass(in rowspecification row, in domtokenlist class);

domstring getcelldata(in rowspecification row, in unsigned long column);

void getcellclass(in rowspecification row, in unsigned long column,

in domtokenlist class);

void togglecolumnsortstate(in unsigned long column);

void tcellcheckedstate(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>

<command onclick=”alert(‘first command’)” label=”do 1st command”/>

<command onclick=”alert(‘cond command’)” label=”do登黄鹤楼古诗 2nd command”/>

<command onclick=”alert(‘third command’)” label=”do 3rd command”/>

</menu>

　　还可以用 checked=”checked” 属性将命令转换为复选框。通过指定 radiogroup 属性，可以将复选框转换为单选按钮，这个属性的值是互相排斥的按钮的组名。

　　除了简单的命令列表之外，还可以使用 menu 元素创建工具栏或弹出式上下文菜单，这需要将 type 属性设置为 toolbar 或 popup。例如，代码　13. html 5 工具栏　显示一个与 wordpress 等 blog 编辑器相似的工具栏。它使用 icon 属性链接到按钮的图片。

<menu type=”toolbar”>

<command onclick=”inrttag(buttons, 0);” label=”strong” icon=”bold.gif”/>

<command onclick=”inrttag(buttons, 1);” label=”em” icon=”italic.gif”/>

<command onclick=”inrtlink(buttons, 2);” label=”link” icon=”link.gif”/>

<command onclick=”inrttag(buttons, 3);” label=”b-quote” icon=”blockquote.gif”/>

<command onclick=”inrttag(buttons, 4);” label=”del” icon=”del.gif”/>

<command onclick=”inrttag(buttons, 5);” label=”ins” icon=”inrt.gif”/>

<command onclick=”inrtimage(buttons);” label=”img” icon=”image.gif”/>

<command onclick=”inrttag(buttons, 7);” label=”ul” icon=”bullet.gif”/>

<command onclick=”inrttag(buttons, 8);” label=”ol” icon=”number.gif”/>

<command onclick=”inrttag(buttons, 9);” label=”li” icon=”item.gif”/>

<command onclick=”inrttag(buttons, 10);” label=”code” icon=”code.gif”/>

<command onclick=”inrttag(buttons, 11);” label=”cite” icon=”cite.gif”/>

<command onclick=”inrttag(buttons, 12);” label=”abbr” icon=”abbr.gif”/>

<command onclick=”inrttag(buttons, 13);” label=”acronym” icon=”acronym.gif”/>

</menu>

　　l不吃晚饭减肥效果abel 属性提供菜单的标题。例如，代码14. html 5 edit 菜单　显示一个 edit 菜单。

<menu type=”popup” label=”edit”>

<command onclick=”undo()” label=”undo”/>

<command onclick=”redo()” label=”redo”/>

<command onclick=”cut()” label=”cut”/>

<command onclick=”copy()” label=”copy”/>

<command onclick=”paste()” label=”paste”/>

<command onclick=”delete()” label=”clear”/>

</menu>

　　菜单可以嵌套在其他菜单中，形成层次化的菜单结构。