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


Posted in HTML / CSS onOctober 17, 2008

https://3water.com/html_xhtml/20080306/html_xhtml_4688.html

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

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

HTML / CSS 相关文章推荐
使用CSS3来实现滚动视差效果的教程
Aug 24 HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 HTML / CSS
css3弹性盒子flex实现三栏布局的实现
Nov 12 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
Jun 16 HTML / CSS
Canvas globalCompositeOperation
Dec 18 HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 HTML / CSS
解析CSS 提取图片主题色功能(小技巧)
May 12 HTML / CSS
html form表单基础入门案例讲解
Jul 15 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 HTML / CSS
HTML5 语义化结构化规范化
Oct 17 #HTML / CSS
HTML5 与 XHTML2
Oct 17 #HTML / CSS
X/HTML5 和 XHTML2
Oct 17 #HTML / CSS
HTML5: Web 标准最巨大的飞跃
Oct 17 #HTML / CSS
详解Html5中video标签那些属性和方法
Jul 01 #HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 #HTML / CSS
浅谈pc和移动端的响应式的使用
Jan 03 #HTML / CSS
You might like
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
JavaScript中几种排序算法的简单实现
2015/07/29 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
Python实现把xml或xsl转换为html格式
2015/04/08 Python
Python教程之全局变量用法
2016/06/27 Python
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
python3模块smtplib实现发送邮件功能
2018/05/22 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
python入门之井字棋小游戏
2020/03/05 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
程序员岗位职责
2013/11/11 职场文书
简历中的自我评价怎么写
2014/01/29 职场文书
社区工作者演讲稿
2014/05/23 职场文书
工程负责人任命书
2014/06/06 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
部门2014年度工作总结
2014/11/12 职场文书
司机岗位职责
2015/02/04 职场文书
党支部评议意见
2015/06/02 职场文书
Hive日期格式转换方法总结
2022/06/25 数据库