HTML 5 Tutorial (vi)

HTML 5 is also known as WEB Applications 1.0. To achieve this goal, add a few new elements that provide an interactive experience for WEB pages:

Details

Datagrid

Menu

Command

These elements can change what is displayed based on the user's actions and selections, without having to load a new page from the server.

Details

The details element represents detailed information that may not be displayed by default. An optional legend element can provide a summary of the detailed information.

One of the uses of the details element is to provide footnotes and endnotes. For example:

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>

No specific display method is specified. Browsers can use footnotes, endnotes, and tooltips.

Each details element can have an open property. If this property is set, the details are displayed initially. If you do not set this property, they are hidden until the user requests that they be displayed. In either case, users can display or hide details by clicking an icon or another control.

Datagrid

The DataGrid element provides a grid control. You can use it to display trees, lists, and tables, and users and scripts can update these interface elements. In contrast, traditional tables are used primarily to display static data.

The DataGrid obtains initial data from its contents (a table, select, or other HTML element). For example, the DataGrid in Code 9 contains a score sheet. In this example, the DataGrid data comes from a table. A simpler one-dimensional DataGrid can obtain data from a SELECT element. If you use other HTML elements, each child element becomes a row in the grid.

<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>

The difference between this element and a regular table is that the user can select rows, columns, and cells, fold rows, columns, and cells, edit cells, delete rows, columns, and cells, sort the grid, and perform other data operations directly in the client browser. You can monitor updates with JavaScript code. The Htmldatagridelement interface is added to the Document Object Model (DOM) to support this element (code 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);
};