爱问知识人 爱问教育 医院库

HTML5-交互

首页

HTML5-交互


        

提交回答
好评回答
  • 2023-03-25 03:30:00
      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, 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 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);};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 菜单。
      
    菜单可以嵌套在其他菜单中,形成层次化的菜单结构。

    相***

    2023-03-25 03:30:00

类似问题

换一换
  • 电脑/网络 相关知识

  • 电脑网络技术
  • 电脑网络

相关推荐

正在加载...
最新资料 推荐信息 热门专题 热点推荐
  • 1-20
  • 21-40
  • 41-60
  • 61-80
  • 81-100
  • 101-120
  • 121-140
  • 141-160
  • 161-180
  • 181-200
  • 1-20
  • 21-40
  • 41-60
  • 61-80
  • 81-100
  • 101-120
  • 121-140
  • 141-160
  • 161-180
  • 181-200
  • 1-20
  • 21-40
  • 41-60
  • 61-80
  • 81-100
  • 101-120
  • 121-140
  • 141-160
  • 161-180
  • 181-200
  • 1-20
  • 21-40
  • 41-60
  • 61-80
  • 81-100
  • 101-120
  • 121-140
  • 141-160
  • 161-180
  • 181-200

热点检索

  • 1-20
  • 21-40
  • 41-60
  • 61-80
  • 81-100
  • 101-120
  • 121-140
  • 141-160
  • 161-180
  • 181-200
返回
顶部
帮助 意见
反馈

确定举报此问题

举报原因(必选):