Structure and semantics of HTML5 (5): interaction_html5 tutorial skills

http://www.jb51.net/html_xhtml/20080306/html_xhtml_4688.html
　HTML 5 is also known as Web Applications 1.0. To achieve this goal, several new elements were added that provide an interactive experience for web pages:
details
datagrid
menu
command
These elements can change the displayed content according to the user's operations and selections without loading a new page from the server.
details
The details element represents detailed information that may not be displayed by default. The optional legend element can provide a summary of 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.

[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, details are displayed initially. If this property is not set, they will be hidden until the user requests to show them. 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 primarily used to display static data.
The datagrid gets initial data from its content (a table, select, or other HTML element). For example, the datagrid in Code 9 contains a table of grades. In this example, the datagrid's data comes from a table. A simpler one-dimensional datagrid can obtain data from select elements. If other HTML elements are used, each child element becomes a row in the grid.

Jones	Allison	A-	B	A
Smith	Johnny	A	C	A
Willis	Sydney	C-	D	F
Wilson	Frank	B-	B	A

Jones Allison A- B A Smith Johnny A C A Willis Sydney C- D td> F Wilson Frank B- B A

The difference between this element and a regular table is that users can select rows, columns, and cells; collapse rows, columns, and cells; edit cells; delete rows, columns, and cells; sort the grid; and Perform other data operations directly in the client browser. Updates can be monitored using JavaScript code. The HTMLDataGridElement interface was added to the 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 dynamically load data 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 (Listing 11 | DataGridDataProvider). This allows you to load data from a database, XmlHttpRequest, or any resource that your 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 appeared in HTML 2. It was deprecated in HTML 4, but HTML 5 revived it and assigned a new meaning. In HTML 5, the menu contains command elements, and each command element triggers an action. For example, code 12 HTML 5 Menu is a menu that pops up an alert box.





You can also use the checked="checked" attribute to convert commands into checkboxes. Checkboxes can be converted into radio buttons by specifying the radiogroup attribute, whose value is the group name of mutually exclusive buttons.
In addition to a simple command list, you can also use the menu element to create a toolbar or pop-up context menu, which requires setting the type attribute to toolbar or popup. For example, Code 13. HTML 5 Toolbar displays a toolbar similar to that of blog editors such as WordPress. It links to the button's image using the icon attribute.
















The label attribute provides the title of the menu. For example, Code 14. HTML 5 Edit Menu displays an Edit menu.








Menus can be nested in other menus to form a hierarchical menu structure.