Structure et sémantique de HTML5 (5) : compétences du didacticiel interaction_html5

http://www.jb51.net/html_xhtml/20080306/html_xhtml_4688.html
　HTML 5 est également connu sous le nom d'applications Web 1.0. Pour atteindre cet objectif, plusieurs nouveaux éléments ont été ajoutés pour offrir une expérience interactive aux pages Web :
détails
grille de données
menu
commande
Ces éléments peuvent modifier le contenu affiché en fonction des opérations et sélections de l'utilisateur sans charger une nouvelle page depuis le serveur.
détails
L'élément détails représente des informations détaillées qui peuvent ne pas être affichées par défaut. L'élément de légende facultatif peut fournir un résumé d'informations détaillées.
L'une des utilisations de l'élément détails est de fournir des notes de bas de page et des notes de fin. Par exemple:
Le bec d'un Guillemot de Craveri est environ 10 % plus fin
que celui d'un Guillemot de Xantus

[Sibley, 2000]

Sibley, David Allen, Le Guide Sibley des oiseaux,

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

Aucune méthode d'affichage spécifique n'est spécifiée. Les navigateurs peuvent choisir parmi des notes de bas de page, des notes de fin et des info-bulles.
Chaque élément de détails peut avoir un attribut ouvert. Si cette propriété est définie, les détails sont affichés initialement. Si cette propriété n'est pas définie, ils seront masqués jusqu'à ce que l'utilisateur demande à les afficher. Dans les deux cas, les utilisateurs peuvent afficher ou masquer les détails en cliquant sur une icône ou un autre contrôle.
grille de données
L'élément datagrid fournit un contrôle de grille. Vous pouvez l'utiliser pour afficher des arborescences, des listes et des tableaux, et les utilisateurs et les scripts peuvent mettre à jour ces éléments d'interface. En revanche, les tableaux traditionnels sont principalement utilisés pour afficher des données statiques.
La grille de données obtient les données initiales de son contenu (une table, une sélection ou un autre élément HTML). Par exemple, la grille de données du Code 9 contient un tableau des notes. Dans cet exemple, les données de la grille de données proviennent d'une table. Une grille de données unidimensionnelle plus simple peut obtenir des données à partir d'éléments sélectionnés. Si d'autres éléments HTML sont utilisés, chaque élément enfant devient une ligne dans la grille.

Jones

Allison

A-

B

A

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

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

La différence entre cet élément et un tableau ordinaire est que les utilisateurs peuvent sélectionner des lignes, des colonnes et des cellules ; réduire les lignes, les colonnes et les cellules ; supprimer des lignes, des colonnes et des cellules ; opérations de données directement dans le navigateur client. Les mises à jour peuvent être surveillées à l'aide du code JavaScript. L'interface HTMLDataGridElement a été ajoutée au modèle d'objet de document (DOM) pour prendre en charge cet élément (code 10 HTMLDataGridElement).
interface HTMLDataGridElement : HTMLElement {
attribut DataGridDataProvider data;
attribut en lecture seule sélection DataGridSelection;
attribut booléen multiple;
attribut booléen désactivé;
void updateEverything();
void updateRowsChanged (dans la ligne RowSpecification, dans un nombre long non signé);
void updateRowsInserted(dans la ligne RowSpecification, dans un nombre long non signé);
void updateRowsRemoved(dans la ligne RowSpecification, dans un nombre long non signé);
void updateRowChanged(dans RowSpecification row);
void updateColumnChanged(dans une colonne longue non signée);
void updateCellChanged(dans la ligne RowSpecification, dans une colonne longue non signée);
};
Vous pouvez également utiliser DOM pour charger dynamiquement des données dans la grille. Autrement dit, la grille de données ne peut pas contenir d'éléments enfants fournissant les données initiales. Vous pouvez le définir avec un objet DataGridDataProvider (Listing 11 | DataGridDataProvider). Cela vous permet de charger des données à partir d'une base de données, de XmlHttpRequest ou de toute ressource à laquelle votre code JavaScript peut accéder.
interface DataGridDataProvider {
void initialize (dans la grille de données HTMLDataGridElement);
unsigned long getRowCount (dans la ligne RowSpecification);
unsigned long getChildAtPosition (dans RowSpecification parentRow,
en position longue non signée);
unsigned long getColumnCount();
DOMString getCaptionText(dans une colonne longue non signée);
void getCaptionClasses(dans une colonne longue non signée, dans les classes DOMTokenList);
DOMString getRowImage(dans la ligne RowSpecification);
HTMLMenuElement getRowMenu(dans la ligne RowSpecification);
void getRowClasses(dans la ligne RowSpecification, dans les classes DOMTokenList);
DOMString getCellData(dans la ligne RowSpecification, dans une colonne longue non signée);
void getCellClasses(dans la ligne RowSpecification, dans colonne longue non signée,
dans les classes DOMTokenList);
void toggleColumnSortState(dans une colonne longue non signée);
void setCellCheckedState(dans la ligne RowSpecification, dans une colonne longue non signée,
dans un état long);
void cycleCell(dans la ligne RowSpecification, dans une colonne longue non signée);
void editCell(dans la ligne RowSpecification, dans une colonne longue non signée, dans les données DOMString);
};
menu et commande
L'élément de menu est effectivement apparu en HTML 2. Il était obsolète dans HTML 4, mais HTML 5 l'a relancé et lui a attribué une nouvelle signification. En HTML 5, le menu contient des éléments de commande et chaque élément de commande déclenche une action. Par exemple, le code 12 HTML 5 Menu est un menu qui affiche une boîte d'alerte.





Vous pouvez également utiliser l'attribut vérifié="checked" pour convertir les commandes en cases à cocher. Les cases à cocher peuvent être converties en boutons radio en spécifiant l'attribut radiogroup, dont la valeur est le nom du groupe de boutons mutuellement exclusifs.
En plus d'une simple liste de commandes, vous pouvez également utiliser l'élément menu pour créer une barre d'outils ou un menu contextuel contextuel, ce qui nécessite de définir l'attribut type sur barre d'outils ou popup. Par exemple, Code 13. HTML 5 Toolbar affiche une barre d'outils similaire à celle des éditeurs de blogs tels que WordPress. Il renvoie à l'image du bouton à l'aide de l'attribut icon.
















L'attribut label fournit le titre du menu. Par exemple, Code 14. HTML 5 Edit Menu affiche un menu Edition.








Les menus peuvent être imbriqués dans d'autres menus pour former une structure de menu hiérarchique.