Shulou(Shulou.com)06/03 Report--

This article is about how HTML5 interacts with each other. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

HTML 5 is also known as Web Applications 1.0. To achieve this goal, several new elements have been added to provide an interactive experience for Web pages:

Details

Datagrid

Menu

Command

These elements can change what is displayed according to the user's actions and choices without having to load a new page from the server.

Details

The details element represents details that may not be displayed by default. The optional legend element provides a summary of the details.

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.

[Sibley, 2000]

Sibley, David Allen, The Sibley Guide to Birds

(New York: Chanticleer Press, 2000) p. 247

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

Each details element can have an open attribute. If this property is set, the details are displayed initially. If this property is not set, they are hidden until the user requests them to be displayed. In either case, users can show or hide details by clicking an icon or other 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 mainly used to display static data.

Datagrid gets the initial data from its content (a table, select, or other HTML element). For example, the datagrid in code 9 contains a grade sheet. In this example, datagrid's data comes from a table. A simpler one-dimensional datagrid can get data from the select element. If you use other HTML elements, each child element becomes a row in the grid.

JonesAllisonA-B A

SmithJohnnyAC A

WillisSydneyC-DF

WilsonFrankB-B A

This element differs from regular tables in that users 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 has been added to Document Object Model (DOM) to support this element (code 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)

}

You can also use DOM to load data dynamically in the grid. That is, the datagrid may not contain child elements that provide the initial data. You can set it with a DataGridDataProvider object (code 11 DataGridDataProvider). This allows you to load data from any resource that the database, XmlHttpRequest, or JavaScript code can access.

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

The menu element actually appears in HTML 2. It was discarded in HTML 4, but HTML 5 restored it and assigned a new meaning. In HTML 5, menu contains command elements, and each command element triggers an operation. For example, the code 12 HTML 5 menu is a menu that pops up a warning box.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.