Commentaire: HTML 5 est également connu sous le nom d'applications Web 1.0. Pour atteindre cet objectif, plusieurs nouveaux éléments sont ajoutés pour fournir des expériences interactives pour les pages Web: Détails Commande de menu DataGrid Ces éléments peuvent être basés sur les utilisateurs
HTML 5 est également connu sous le nom d'applications Web 1.0. Pour y parvenir, plusieurs nouveaux éléments sont ajoutés pour fournir des expériences interactives pour les pages Web:
détails
dataGrid
menu
Commande
Ces éléments peuvent tous modifier le contenu affiché en fonction des actions et des sélections de l'utilisateur sans charger une nouvelle page du serveur.
détails
L'élément de détails représente les détails qui peuvent ne pas être affichés par défaut. L'élément de légende en option peut fournir un résumé des détails.
L'une des utilisations de l'élément de détails consiste à fournir des notes de bas de page et des notes de fin. Par exemple:
Le projet de loi de Caveri's Murrelet est à environ 10% de mince
que le projet de loi de Murrelet d'un Xantus.
<Dettots>
<Legend> [Sibley, 2000] </gend>
<p> sibley, David Allen, The Sibley Guide to Birds,
(New York: Chanticleer Press, 2000) p. 247
</p>
</fords>
Aucune méthode d'affichage spécifique n'est spécifiée. Le navigateur peut choisir des notes de bas de page, des notes de fin et des infractions.
Chaque élément de détails peut avoir une propriété ouverte. Si cette propriété est définie, les détails sont affichés initialement. Si cette propriété n'est pas définie, ils sont cachés jusqu'à ce que l'utilisateur lui demande de s'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.
dataGrid
L'élément DataGrid fournit un contrôle de la grille. Il peut être utilisé pour afficher les arbres, les listes et les tables, et les utilisateurs et les scripts peuvent mettre à jour ces éléments d'interface. En revanche, les tables traditionnelles sont principalement utilisées pour afficher des données statiques.
DataGrid obtient les données initiales de son contenu (une table, une sélection ou un autre élément HTML). Par exemple, le dataGrid dans le code 9 contient une feuille de score. Dans cet exemple, les données de DataGrid proviennent d'un tableau. DataGrid 1D plus simple peut obtenir des données de l'élément sélectionné. Si vous utilisez d'autres éléments HTML, chaque élément enfant devient une ligne dans la grille.
<dataGrid>
<ballage>
<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>
La différence entre cet élément et un tableau régulier est que les utilisateurs peuvent sélectionner des lignes, des colonnes et des cellules; Effondrer les rangées, les colonnes et les cellules; modifier les cellules; supprimer les lignes, les colonnes et les cellules; trier les grilles; et effectuer d'autres opérations de données directement dans le navigateur client. Vous pouvez utiliser le code JavaScript pour surveiller les mises à jour. L'interface htmldatagridelement est 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;
Readonly Attribut DataGridSelection Selection;
attribut booléen multiple;
Attribut booléen désactivé;
void updateEverything ();
void updaterowschanged (dans la ligne de spécification de lignes, dans le nombre long non signé);
void updaterowsinserted (dans la ligne de spécification de lignes, dans le nombre long non signé);
void updaterowsReMoved (dans la ligne de spécification des lignes, dans le nombre long non signé);
void updaterowChanged (dans la ligne de spécification en ligne);
void updateColumnChanged (dans une longue colonne non signée);
void updateCellChanged (dans la ligne de révision des lignes, dans une longue colonne non signée);
};
Vous pouvez également utiliser DOM pour charger les données dynamiquement dans la grille. Autrement dit, DataGrid peut ne pas contenir d'enfants qui fournissent les données initiales. Il peut être défini avec un objet DataGridDataProvider (code 11 DataGridDataprovider). Cela permet de charger les données à partir de toute ressource accessible par la base de données, XMLHTTPRequest ou JavaScript Code.
interface dataGridDataprovider {
void initialize (dans htmldatagridelement dataGrid);
Long GetrowCount (dans la ligne de spécification de RowsPecification non signée);
Long GetchildAt-position (dans Parentrow en ligne de Rows spécification,
en position longue non signée);
unsigned long getColumnCount ();
DomString getCaptionText (dans une longue colonne non signée);
void getCaptionClasses (dans une longue colonne non signée, dans les classes DomTokenList);
DOMSTRING GetRowImage (dans la ligne de spécification en ligne);
HTMLMenuelement GetrowMenu (dans la ligne de spécification en ligne);
void getrowClasses (dans la ligne de révision des lignes, dans les classes DomTokenList);
DOMSTRING GetCellData (dans la ligne de révision des lignes, dans une longue colonne non signée);
void getCellClasses (dans la ligne de spécification des lignes, dans une longue colonne non signée,
dans les classes DomTokenList);
void toggleColumnSortState (dans une longue colonne non signée);
void setCellCheckEdState (dans la ligne de spécification Rows, dans une longue colonne non signée,
à l'état long);
void CycleCell (dans la ligne de spécification des lignes, dans une longue colonne non signée);
void EditCell (dans la ligne de dispecification Rows, dans une longue colonne non signée, dans les données DOMString);
};
menu et commande
L'élément de menu apparaît en fait dans HTML 2. Il a été abandonné dans HTML 4, mais HTML 5 l'a restauré et a spécifié une nouvelle signification. Dans HTML 5, le menu contient l'élément de commande, chaque élément de commande lance une opération. Par exemple, le menu Code 12 HTML 5 est un menu avec une fenêtre contextuelle de la boîte d'avertissement.
<menu>
<commande onclick = alert ('première commande') label = do 1st Command />
<commande onclick = alert ('deuxième commande') label = do 2nd Command />
<commande onclick = alert ('troisième commande') label = do 3rd Command />
</ menu>
Vous pouvez également utiliser la propriété cochée = coché pour convertir la commande en case à cocher. En spécifiant la propriété radiogroup, vous pouvez convertir une case à cocher en bouton radio et la valeur de cette propriété est le nom de groupe du bouton mutuellement exclusif.
En plus d'une liste de commandes simple, vous pouvez également créer une barre d'outils ou un menu contextuel contextuel à l'aide de l'élément de menu, qui nécessite de définir la propriété Type sur la barre d'outils ou la fenêtre contextuelle. Par exemple, le code 13. La barre d'outils HTML 5 affiche une barre d'outils similaire aux éditeurs de blog tels que WordPress. Il utilise la propriété icône pour créer un lien vers l'image du bouton.
<type de menu = barre d'outils>
<commande onclick = insertag (boutons, 0); Label = Strong Icon = Bold.gif />
<commande onclick = insertag (boutons, 1); Label = EM icon = italic.gif />
<commande onClick = insertLink (boutons, 2); label = link icon = link.gif />
<commande onclick = insertag (boutons, 3); Label = B-Quote icon = Blockquote.gif />
<commande onclick = insertag (boutons, 4); étiquette = icône del = del.gif />
<commande onclick = insertag (boutons, 5); label = INS icon = insert.gif />
<commande onclick = insertimage (boutons); label = iMg icon = image.gif />
<commande onclick = insertag (boutons, 7); Label = ul icon = Bullet.gif />
<commande onclick = insertag (boutons, 8); label = ol icon = number.gif />
<commande onclick = insertag (boutons, 9); Label = li icon = item.gif />
<commande onclick = insertag (boutons, 10); label = code icon = code.gif />
<commande onclick = insertag (boutons, 11); étiquette = cite icon = cite.gif />
<commande onclick = insertag (boutons, 12); étiquette = icône abbr = abbr.gif />
<commande onclick = insertag (boutons, 13); étiquette = acronyme icon = acronym.gif />
</ menu>
La propriété Label fournit le titre du menu. Par exemple, le code 14. HTML 5 Menu Edit Affiche un menu d'édition.
<Menu Type = Popup Label = Edit>
<commande onclick = undo () label = undo />
<commande onclick = redo () label = redo />
<commande onClick = Cut () label = Cut />
<commande onclick = copy () label = copy />
<commande onclick = col () label = colzre />
<commande onclick = delete () label = clear />
</ menu>
Le menu peut être imbriqué dans d'autres menus pour former une structure de menu hiérarchique.