15年来,为全国50万+企业提供互联网数字化基础应用服务。
微网小程序
电商运营
关于我们
付款方式
荣誉资质
业务提交
代理合作
知 识
400-1100-266
9:00-24:00(工作日)
首 页
企业400电话
Hot
网站建设
商标✡知产
网络优化推广
热
AI电话机器人
呼叫中心
彩铃•短信
增值拓展业务
新
主页
>
知识库
> HTML5的结构和语义(5):交互
HTML5的结构和语义(5):交互
热门标签:
美图手机
百度竞价点击价格的计算公式
检查注册表项
阿里云
硅谷的囚徒呼叫中心
使用U盘装系统
智能手机
网站建设
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 元素的用途之一是提供脚注和尾注。例如:
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>
菜单可以嵌套在其他菜单中,形成层次化的菜单结构。
标签:
怀化
通辽
山南
烟台
湖北
黄山
贺州
湘潭
巨人网络通讯声明:本文标题《HTML5的结构和语义(5):交互》,本文关键词 HTML5,的,结构,和,语义,交互,https,www.jb51.net,html,;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
相关文章
电销机器人到底如何运作的?
很多人对 电销 机器人到底如何运作存在着巨大的好奇心,那么今天,小编就带大家看一下机器人的运作流程! 电销...
10-24
电话机器人的兴起对电销行业来说是“惊喜”还
随着互联网 大数据 的普及,许多 电销 行业如雨后春笋般争先恐后地冒出来。而今电销行业的混乱,让各位涉足电销...
10-24
雷霆电话机器人是如何转接人工的?
当我们在拨通移动、联通或电信 运营商 的客服电话时,总会要先经过一些机械化的选择,然后成功连接人工坐席反馈...
10-24
智能电话机器人的实现原理,使用安全吗?
随着科学技术的进步和 人工智能 的发展,越来越多的智能产品已经进入我们的工作和生活。智能手机、智能电视、智...
10-24
福州有研发电话机器人的公司吗?
随着 人工智能 的快速发展,越来越多的智能产品出现在我们的生活中,最常见的要数智能机器人。从流水线上的机器...
10-24
国内电销行业现状与未来,电销员真的要失业了
国内 电销 行业现状与未来电销员真的要失业了! 企业的发展离不开销售团队对市场的开发拓展,电话销售一份人人...
10-24
厦门灵声电销机器人,电销业的秘密武器!
厦门 灵声 电销 机器人,电销业的秘密武器! 传统电销 行业,为实现公司业绩最大化,只能增加更多的电话销售人员...
10-24
龙岩有电话机器人定制开发的公司吗?
您的企业在传统电话销售中是否遇到这些难题? 1、人力 成本 高,人员流动大,培训周期长 2、人工外拨拒接率、挂...
10-24
福建电销机器人加盟有合适的公司吗?
福建 电销 机器人加盟有合适的公司吗? 有人说现在的中国有一种野蛮的味道,人们带着贪婪的眼睛警觉扫视四周,...
10-24
2019年智能电话机器人的市场前景如何?
事实上,在语音通信领域,智能 电销 机器人已经投入使用,比如智创良品的 百应 机器人。目前, 房地产 、 金融...
10-24
知名的电销机器人公司有哪些?
在电话销售行业,智能 电话机器人 和人工客服搭配的工作方式正在慢慢成为主流。 电话机器人是 人工智能 大背景下...
10-24
代理电销机器人的利润有多高?
说到 人工智能 电话机器人 ,不得不惊叹人工智能的迅速发展。在国家的重视下,人工智能产业的规模以接近两倍的...
10-24
“AI+电话”智能交互的无限可能
据Gartner预测,到2020年,美国90%的商业互动行为都由数字助手来完成,在我国以AI+语音交互技术为核心的智能产品也正...
10-24
下个十年的BAT,人工智能会是重启键吗?
摘要:这一次互联网不仅需要与传统行业共患难,还要同享安乐。授人以鱼不如授人以渔,在AI主导的后互联网智能时...
10-24
2018AIIA人工智能开发者大会:AI语音的供需矛盾
2018AIIA 人工智能 开发者大会于10月15日-16日在苏州国际博览中心如期举办。应邀而来的人工智能领域大咖,组成天团级...
10-24
推荐文章
c#加密类使用方法示例
关于知识产权民事纠纷的受案范围
保护未注册商标的合理性
什么是电话营销
ASP.NET中RadioButtonList绑定后台数据后触发点击事件
如何搭建安装型呼叫中心系统
品牌奶茶店都有商标吗?奶茶属于哪一种类型的商标?
vbs实现右键菜单中添加CMD HERE
上一篇:
HTML5 语义化结构化规范化
下一篇:
HTML5中语义化 b 和 i 标签
一起分享吧
版权所有:巨人网络(扬州)科技有限公司——拥有网站建设十年经验,具备独立网站开发能力,能够提供完善的网站设计及相关的网站制作服务! 全国统一服务热线:400-1100-266
展开
收缩
QQ咨询
在线咨询
客服小董
客服小张
客服小刘
客服小李
客服小王
招商加盟
财务查询
微信客服
电话咨询
400-1100-266