全国服务热线:4008-888-888

技术知识

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 元素的主要用途之1是出示脚注和尾注。比如:
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 元素能够有1个 open 特性。假如设定了这个特性,那末详尽信息内容在最开始就显示信息出来。假如沒有设定这个特性,那末会掩藏它们,直至客户规定显示信息它们。不管是哪样状况,客户都可以以根据点击1个标志或别的控制来显示信息或掩藏详尽信息内容。
datagrid
  datagrid 元素出示1个网格控制。能够用它显示信息树、目录和报表,客户和脚本制作能够升级这些页面元素。与之相反,传统式的报表关键用来显示信息静态数据数据信息。
  datagrid 从它的內容(1个 table、select 或别的 HTML 元素)得到原始数据信息。比如,编码 9 中的 datagrid 包括1张考试成绩表。在这个示例中,datagrid 的数据信息来自1个 table。更简易的1维 datagrid 能够从 select 元素得到数据信息。假如应用别的 HTML 元素,那末每一个子元素变成网格中的1行。
<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 updateRowChanged(in RowSpecification row);
void updateColumnChanged(in unsigned long column);
void updateCellChanged(in RowSpecification row, in unsigned long column);
};
  还能够应用 DOM 在网格中动态性地装载数据信息。也便是说,datagrid 能够不包括那些出示原始数据信息的子元素。能够用1个 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 元素引起1个实际操作。比如,编码 12 HTML 5 菜单 是1个弹出警示框的菜单。
<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 专用工具栏 显示信息1个与 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 菜单 显示信息1个 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>
  菜单能够嵌套循环在别的菜单中,产生层级化的菜单构造。


在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服