| 网站首页 | 本站新闻 | 康复医疗 | 人间真情 | 起来商务 | 就业指导 | 学习资料 | 站起来论坛 | 

您现在的位置: 站起来公益网 >> 学习资料 >> 网页制作 >> 正文
HTML5的结构和语义(6):交互
作者:站起来    文章来源:本网站    点击数:    更新时间:2008-5-28【字体:

    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 updat9 7 3 1 2 3 4 8 :

文章录入:admin    责任编辑:admin 
  • 上一篇文章:

  • 下一篇文章:
  • 最新文章 热点新闻 相关文章
    HTML5的结构和语义(5):内嵌媒
    HTML5的结构和语义(4):语义性
    HTML5的结构和语义(3):语义性
    HTML5的结构和语义(2):结构
    HTML5的结构和语义(1):前言