HTML5 structure and semantics (5): Interaction

Comments: Http://www.webjx.com/html_xhtml/20080306/html_xhtml_4688.html HTML 5 is also known as Web Applications 1.0. To achieve this goal, several new elements are added to provide interactive experience for Web pages: The details datagrid menu command can all be used based on the user's
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 are added to provide interactive experience for Web pages:
Details
Datagrid
Menu
Command
These elements can be changed based on user operations and selection, without loading a new page from the server.
Details
The details element indicates details that may not be displayed by default. The optional legend element provides a summary of detailed information.
One of the purposes of the details element is to provide the footer and end note. 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. You can use footer, tail injection, and tooltip in the browser.
Each details element can have an open attribute. If this attribute is set, the detailed information is displayed at the beginning. If this attribute is not set, it will be hidden until the user asks to display them. In either case, you can click an icon or another control to display or hide details.
Datagrid
The datagrid element provides a grid control. You can use it to display trees, lists, and tables. Users and scripts can update these interface elements. In contrast, traditional tables are mainly used to display static data.
The datagrid obtains initial data from its content (a table, select, or other HTML elements. For example, the datagrid in code 9 contains a two-dimensional table. In this example, the data of the datagrid comes from a table. A simpler one-dimensional datagrid can obtain data from the select element. If other HTML elements are used, 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> </td> </tr>
<Tr> <td> Smith </td> <td> Johnny </td> <td> A </td> <td> C </td> <td> A </td> </tr>
<Tr> <td> Willis </td> <td> sysydney </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> </td> </tr>
</Table>
</Datagrid>
This element differs from a regular table in that you can select rows, columns, and cells, fold rows, columns, and cells, edit cells, and delete rows, columns, and cells; sort the grids, and perform other data operations directly in the client browser. You can use JavaScript code to monitor updates. The HTMLDataGridElement interface is 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 mesh. That is to say, the datagrid can not contain child elements that provide initial data. You can use a DataGridDataProvider object to set it (Code 11 DataGridDataProvider ). In this way, you can load data from any resource that can be accessed by the database, XmlHttpRequest, or JavaScript code.
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 is discarded in HTML 4, but HTML 5 restores it and specifies a new meaning. In HTML 5, the menu contains the command element, and each command element triggers an operation. For example, the Code 12 HTML 5 menu is a pop-up warning box menu.
<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>
You can also use the checked = "checked" attribute to convert commands to check boxes. By specifying the radiogroup attribute, you can convert the check box to a single-choice button. The value of this attribute is the group name of the mutually exclusive button.
In addition to a simple command list, you can also use the menu element to create a toolbar or pop-up context menu. You need to set the type attribute to toolbar or popup. For example, the Code 13. HTML 5 toolbar displays a toolbar similar to the blog editor such as WordPress. It uses the icon attribute to link to the button image.
<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>
The label attribute provides the menu title. For example, Code 14. HTML 5 shows an Edit menu in the Edit menu.
<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>
Menus can be nested in other menus to form a hierarchical menu structure.