|
[tr][td] HTML 5 也被称为 Web Applications 1.0。为了实现这个目标，增加了几个为 Web 页面提供交互体验的新元素：
details datagrid menu command 这些元素都可以根据用户的操作和选择改变显示的内容，而不需要从服务器装载新页面。 details details 元素表示在默认情况下可能不显示的详细信息。可选的 legend元素可以提供详细信息的摘要。 details 元素的用途之一是提供脚注和尾注。例如： The bill of a Craveri'sMurrelet 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 元素，那么每个子元素成为网格中的一行。
这个元素与常规表格的区别在于，用户可以选择行、列和单元格；把行、列和单元格折叠起来；编辑单元格；删除行、列和单元格；对网格排序；以及在客户机浏览器中直接进行其他数据操作。可以用JavaScript 代码监视更新。Document ObjectModel（DOM）中增加了 HTMLDataGridElement 接口以支持这个元素（代码 10 HTMLDataGridElement）。 interface HTMLDataGridElement : HTMLElement { attributeDataGridDataProvider data; readonly attribute DataGridSelectionselection; attribute boolean multiple; attribute boolean disabled; voidupdateEverything(); void updateRowsChanged(in RowSpecification row, inunsigned long count); void updateRowsInserted(in RowSpecification row, inunsigned long count); void updateRowsRemoved(in RowSpecification row, inunsigned long count); void updateRowChanged(in RowSpecification row); voidupdateColumnChanged(in unsigned long column); void updateCellChanged(inRowSpecification row, in unsigned long column); }; 还可以使用 DOM在网格中动态地装载数据。也就是说，datagrid 可以不包含那些提供初始数据的子元素。可以用一个 DataGridDataProvider 对象设置它（代码11 DataGridDataProvider）。这样就可以从数据库、XmlHttpRequest 或者 JavaScript代码能够访问的任何资源装载数据。 interface DataGridDataProvider { void initialize(inHTMLDataGridElement datagrid); unsigned long getRowCount(in RowSpecificationrow); unsigned long getChildAtPosition(in RowSpecification parentRow, inunsigned long position); unsigned long getColumnCount(); DOMStringgetCaptionText(in unsigned long column); void getCaptionClasses(in unsignedlong column, in DOMTokenList classes); DOMString getRowImage(inRowSpecification row); HTMLMenuElement getRowMenu(in RowSpecificationrow); void getRowClasses(in RowSpecification row, in DOMTokenListclasses); DOMString getCellData(in RowSpecification row, in unsigned longcolumn); void getCellClasses(in RowSpecification row, in unsigned longcolumn, in DOMTokenList classes); void toggleColumnSortState(in unsignedlong column); void setCellCheckedState(in RowSpecification row, in unsignedlong column, in long state); void cycleCell(in RowSpecification row, inunsigned long column); void editCell(in RowSpecification row, in unsignedlong column, in DOMString data); }; menu 和 command menu 元素实际上在 HTML2 中就出现了。在 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 5Edit 菜单 显示一个 Edit 菜单。 菜单可以嵌套在其他菜单中，形成层次化的菜单结构。[/td][/tr] |
|||||||||||||||||||||
