HTML 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>
<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);
};

时间: 2024-11-03 21:26:42

HTML 5教程(六)的相关文章

微信公众帐号开发教程(六) 文本消息的内容长度限制揭秘

相信不少朋友都遇到过这样的问题:当发送的文本消息内容过长时,微信将不做任何响应.那么到底微信 允许的文本消息的最大长度是多少呢?我们又该如何计算文本的长度呢?为什么还有些人反应微信好像支持的 文本消息最大长度在1300多呢?这篇文章会彻底解除大家的疑问. 接口文档中对消息长度限制为 2048 开发教程(六) 文本消息的内容长度限制揭秘-揭秘时政的微信公众号"> 可以看到,接口文档中写的很明确:回复的消息内容长度不超过2048字节.那为什么很多人测试反应消息 内容长度在1300多字节时,微信

Android简明开发教程六:用户界面设计

Activity是Android应用用户界面的基本组成部件.但Activity本身并不提供用户界面(User Interface).从程序结构层次上 来说,一个Android应用是类android.app.Application的一个实例, Application中可以包含多个android.app.Activity实例. 每个Activity 带一个Window类,这个类在Android平台上没有提供太多功能,主要可以用来控制标题栏(屏幕顶端).比如设置 UI全屏显示可以使用如下代码: req

MVC5+EF6 入门完整教程六

原文:MVC5+EF6 入门完整教程六 本篇我们谈谈分部视图(Partial View). 上篇文章提到过Partial和Action这两个helper, 本篇文章主要就结合这两个helper来讲解分部视图(Partial View)的应用. 文章提纲 理论基础 详细步骤 总结 理论基础 – 分部视图 Partial View指可以应用于View中以作为其中一部分的View的片段(类似于之前的user control), 可以像类一样,编写一次, 然后在其他View中被反复使用. 一般放在"Vi

黄聪:Microsoft Enterprise Library 5.0 系列教程(六) Security Application Block

原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(六) Security Application Block   开发人员经常编写需要安全功能的应用程序.这些应用程序通常需要执行一系列不同的安全操作,而且它们还经常与不同的基础安全提供程序(如 Microsoft Active Directory 目录服务.授权管理器.Active Directory 应用程序模式 (ADAM) 和自定义数据库等)进行交互.     安全应用程序块通过收集开发人员必须执行的许

MyBatis学习教程(六)-调用存储过程_java

一.提出需求 查询得到男性或女性的数量, 如果传入的是0就女性否则是男性 二.准备数据库表和存储过程 create table p_user( id int primary key auto_increment, name varchar(), sex char() ); insert into p_user(name,sex) values('A',"男"); insert into p_user(name,sex) values('B',"女"); insert

移动网站开发教程六,MySQL数据库基础

一.数据类型 1.整型 数据类型存储空间说明取值范围 TINYINT1字节非常小的整数带符号值:-128~127 无符号值:0~255 SMALLINT2字节较小的整数带符号值:-32768~32767 无符号值:0~65535 MEDIUMNT3字节中等大小的整数带符号值:-8388608~8388607 无符号值:0~16777215 INT4字节标准整数带符号值:-2147483648~2147483647 无符号值:0~4294967295 BIGINT8字节大整数 2.浮点型 数据类型

Dreamweaver 4 简明教程(六、建立超级链接)

dreamweaver|教程|链接 六.建立超级链接 超级链接(Link),简称链接,是页面与页面之间一个单向的关联关系.通过点击链接,我们可以从一个页面跳到另一个页面.我们可以在文字.图片建立链接. 1.文字链接 在页面中选取需要建立链接的文字,如下图: 在属性面板的Link一项,填写链接地址,当浏览者点击该链接的时候,浏览器就回跳转到该页面,例如这里填写的是:http://www.goeway.com 如果你希望该页面是在一个新窗口打开,可以在Target中选择"_balnk".

新手学习优化系列教程六:关键词优化

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 在前面讲了五课中,都是讲的新手怎么一步一步学习网站优化的,虽然有点罗嗦,但是每天都有很多的新人给笔者发信息说,这样的教程真的很实在.在这里笔者也很高兴能帮助新人快速掌握好网站优化基本知识,前五讲分别为<域名的选择>.<空间的选择>.<程序的选择>.<网站的基本设置>.<推广方法的选择>

DIV+CSS布局入门教程(六) -- 关于ID和CLASS

css|教程|入门教程 这半个月以来今天是头一天在20:00左右下班,想起关于这个教程一直没有完成,心里感觉非常不踏实.两个月前刚辞职,本想把教程全部完成,但是由于一次不幸,导致硬盘中的数据大部分丢失,本写了一半的教程也随之灰飞烟灭.但最近有许多的网友通过博客.QQ.MSN.E-MAIL等途径与我联系,希望能继续更新这个教程,甚至有网友居然拨打我的手机(我不知道大家是如何知道我的号码的,,哎~~)被大家所感动,时间虽然很紧,但还是抽点时间来尽量完成这个教程吧~~就像鲸鱼叔叔所说的,时间就是奶,越

JSP教程(六)-怎么在JSP中跳转到别一页面

js|教程|页面 在JSP中使用jsp forward Action来实现页面的跳转功能. 语法: <jsp:forward page="{relativeURL|<%= expression %>}"/> 或<jsp:forward page="{relativeURL|<%= expression %>}"><jsp:param name="parameterName"value=&quo