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

zhang4182410

zhang4182410

2016-02-19 17:59

只要你有一台电脑或者手机,都能关注图老师为大家精心推荐的HTML5的结构和语义(5):交互,手机电脑控们准备好了吗?一起看过来吧!

  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
pSibley, 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
    trtdJones/tdtdAllison/tdtdA-/tdtdB+/tdtdA/td/tr
    trtdSmith/tdtdJohnny/tdtdA/tdtdC+/tdtdA/td/tr
    trtdWillis/tdtdSydney/tdtdC-/tdtdD/tdtdF/td/tr
    trtdWilson/tdtdFrank/tdtdB-/tdtdB+/tdtdA/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 代码能够访问的任何资源装载数据。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

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 菜单 是一个弹出警告框的菜单。

menu
    command onclick="alert('first command')"  label="Do 1st Command"/
    command onclick="alert('second 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="insertTag(buttons, 0);"  label="strong" icon="bold.gif"/
    command onclick="insertTag(buttons, 1);"  label="em" icon="italic.gif"/
    command onclick="insertLink(buttons, 2);" label="link" icon="link.gif"/
    command onclick="insertTag(buttons, 3);"  label="b-quote" icon="blockquote.gif"/
    command onclick="insertTag(buttons, 4);"  label="del" icon="del.gif"/
    command onclick="insertTag(buttons, 5);"  label="ins" icon="insert.gif"/
    command onclick="insertImage(buttons);"   label="img" icon="image.gif"/ 
    command onclick="insertTag(buttons, 7);"  label="ul" icon="bullet.gif"/
    command onclick="insertTag(buttons, 8);"  label="ol" icon="number.gif"/
    command onclick="insertTag(buttons, 9);"  label="li" icon="item.gif"/
    command onclick="insertTag(buttons, 10);" label="code" icon="code.gif"/
    command onclick="insertTag(buttons, 11);" label="cite" icon="cite.gif"/
    command onclick="insertTag(buttons, 12);" label="abbr" icon="abbr.gif"/
    command onclick="insertTag(buttons, 13);" label="acronym" icon="acronym.gif"/
/menu 

  label 属性提供菜单的标题。例如,代码14. HTML 5 Edit 菜单 显示一个 Edit 菜单。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

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 

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

展开更多 50%)
分享

猜你喜欢

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

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

HTML5的结构和语义(2):结构

Web开发
HTML5的结构和语义(2):结构

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

HTML5的结构和语义(5):内嵌媒体

Web开发
HTML5的结构和语义(5):内嵌媒体

HTML5的结构和语义(1):前言

Web开发
HTML5的结构和语义(1):前言

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

HTML5 语义化结构化规范化

Web开发
HTML5 语义化结构化规范化

HTML5中语义化 b 和 i 标签

Web开发
HTML5中语义化 b 和 i 标签

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Excel中完美冻结第一行、第一列的技巧

Excel中完美冻结第一行、第一列的技巧

揭开HTML 5工作草稿的神秘面纱

揭开HTML 5工作草稿的神秘面纱
下拉加载更多内容 ↓