Comment: HTML 5 is also known as Web Applications 1.0. To achieve this goal, several new elements are added to provide interactive experiences for web pages: details datagrid menu command These elements can be based on the user's
HTML 5 is also known as Web Applications 1.0. To achieve this, several new elements are added to provide interactive experiences for web pages:
details
datagrid
menu
Command
These elements can all change the displayed content based on user actions and selections without loading a new page from the server.
details
The details element represents details that may not be displayed by default. The optional legend element can provide 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.
<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. The browser can choose footnotes, endnotes and tooltips.
Each details element can have an open property. If this property is set, the details are displayed initially. If this property is not set, they are hidden until the user asks them to be displayed. In either case, users can display or hide details by clicking an icon or other control.
datagrid
The datagrid element provides a grid control. It can be used 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 score sheet. In this example, the datagrid's data comes from a table. Simpler 1D datagrid can get data from the 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>B </td><td>A</td></tr>
</table>
</datagrid>
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 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 load data dynamically in the grid. That is, datagrid may not contain children that provide the initial data. It can be set with a DataGridDataProvider object (code 11 DataGridDataProvider). This allows data to be loaded 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 was abandoned in HTML 4, but HTML 5 restored it and specified a new meaning. In HTML 5, menu contains the command element, each command element throws an operation. For example, the Code 12 HTML 5 menu is a menu with a warning box popup.
<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 property to convert the command to a checkbox. By specifying the radiogroup property, you can convert a check box to a radio button, and the value of this property is the group name of the mutually exclusive button.
In addition to a simple command list, you can also create a toolbar or pop-up context menu using the menu element, which requires setting the type property to toolbar or popup. For example, Code 13. HTML 5 toolbar displays a toolbar similar to blog editors such as WordPress. It uses the icon property to link to the image of the button.
<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 property provides the title of the menu. For example, Code 14. HTML 5 Edit menu displays an 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>
Menu can be nested in other menus to form a hierarchical menu structure.