Struktur und Semantik von HTML5 (5): Interaktion_HTML5-Tutorial-Fähigkeiten

http://www.jb51.net/html_xhtml/20080306/html_xhtml_4688.html
　HTML 5 ist auch als Web Applications 1.0 bekannt. Um dieses Ziel zu erreichen, wurden mehrere neue Elemente hinzugefügt, die ein interaktives Erlebnis für Webseiten bieten:
Details
Datagrid
Menü
Befehl
Diese Elemente können den angezeigten Inhalt entsprechend den Vorgängen und Auswahlmöglichkeiten des Benutzers ändern, ohne eine neue Seite vom Server laden zu müssen.
Details
Das Detailelement stellt detaillierte Informationen dar, die möglicherweise nicht standardmäßig angezeigt werden. Das optionale Legendenelement kann eine Zusammenfassung detaillierter Informationen bereitstellen.
Das Detailelement wird unter anderem dazu verwendet, Fußnoten und Endnoten bereitzustellen. Zum Beispiel:
Der Schnabel eines Craveri-Murrelet ist etwa 10 % dünner
als der Schnabel eines Xantus-Murrelet

[Sibley, 2000]

Sibley, David Allen, The Sibley Guide to Birds,
(New York: Chanticleer Press, 2000) S. 247

Es ist keine spezifische Anzeigemethode angegeben. Browser können zwischen Fußnoten, Endnoten und Tooltips wählen.
Jedes Detailelement kann ein offenes Attribut haben. Wenn diese Eigenschaft gesetzt ist, werden zunächst Details angezeigt. Wenn diese Eigenschaft nicht festgelegt ist, werden sie ausgeblendet, bis der Benutzer die Anzeige anfordert. In beiden Fällen können Benutzer Details ein- oder ausblenden, indem sie auf ein Symbol oder ein anderes Steuerelement klicken.
Datenraster
Das Datagrid-Element stellt eine Rastersteuerung bereit. Sie können damit Bäume, Listen und Tabellen anzeigen und Benutzer und Skripte können diese Oberflächenelemente aktualisieren. Im Gegensatz dazu werden herkömmliche Tabellen hauptsächlich zur Darstellung statischer Daten verwendet.
Das Datagrid erhält anfängliche Daten aus seinem Inhalt (einer Tabelle, einer Auswahl oder einem anderen HTML-Element). Das Datagrid in Code 9 enthält beispielsweise eine Notentabelle. In diesem Beispiel stammen die Daten des Datagrids aus einer Tabelle. Ein einfacheres eindimensionales Datengitter kann Daten aus ausgewählten Elementen abrufen. Wenn andere HTML-Elemente verwendet werden, wird jedes untergeordnete Element zu einer Zeile im Raster.

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

Der Unterschied zwischen diesem Element und einer normalen Tabelle besteht darin, dass Benutzer Zeilen, Spalten und Zellen auswählen und das Raster bearbeiten können Datenoperationen direkt im Client-Browser. Updates können mithilfe von JavaScript-Code überwacht werden. Die HTMLDataGridElement-Schnittstelle wurde zum Document Object Model (DOM) hinzugefügt, um dieses Element zu unterstützen (Code 10 HTMLDataGridElement).
Schnittstelle HTMLDataGridElement : HTMLElement {
Attribut DataGridDataProvider-Daten;
schreibgeschütztes Attribut DataGridSelection-Auswahl;
Attribut boolean multiple;
Attribut boolean deaktiviert;
void updateEverything();
void updateRowsChanged (in RowSpecification-Zeile, in unsigned long count);
void updateRowsInserted(in RowSpecification-Zeile, in unsigned long count);
void updateRowsRemoved(in RowSpecification-Zeile, in unsigned long count);
void updateRowChanged(in RowSpecification row);
void updateColumnChanged(in unsigned long columns);
void updateCellChanged(in RowSpecification row, in unsigned long columns);
};
Sie können DOM auch verwenden, um Daten dynamisch in das Raster zu laden. Das heißt, das Datagrid darf keine untergeordneten Elemente enthalten, die die Anfangsdaten bereitstellen. Sie können es mit einem DataGridDataProvider-Objekt festlegen (Listing 11 | DataGridDataProvider). Dadurch können Sie Daten aus einer Datenbank, XmlHttpRequest oder einer beliebigen Ressource laden, auf die Ihr JavaScript-Code zugreifen kann.
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 columns);
void getCaptionClasses(in unsigned long columns, in DOMTokenList-Klassen);
DOMString getRowImage(in RowSpecification row);
HTMLMenuElement getRowMenu(in RowSpecification-Zeile);
void getRowClasses(in RowSpecification-Zeile, in DOMTokenList-Klassen);
DOMString getCellData(in RowSpecification-Zeile, in vorzeichenloser langer Spalte);
void getCellClasses(in RowSpecification-Zeile, in vorzeichenlose lange Spalte,
in DOMTokenList-Klassen);
void toggleColumnSortState(in vorzeichenlose lange Spalte);
void setCellCheckedState(in RowSpecification-Zeile, in vorzeichenloser langer Spalte,
im langen Zustand);
voidcycleCell(in RowSpecification-Zeile, in vorzeichenloser langer Spalte);
void editCell(in RowSpecification-Zeile, in vorzeichenloser langer Spalte, in DOMString-Daten);
};
Menü und Befehl
Das Menüelement erschien tatsächlich in HTML 2. Es war in HTML 4 veraltet, aber HTML 5 hat es wiederbelebt und ihm eine neue Bedeutung zugewiesen. In HTML 5 enthält das Menü Befehlselemente und jedes Befehlselement löst eine Aktion aus. Beispiel: Code 12 „HTML 5-Menü“ ist ein Menü, das ein Warnfeld öffnet.





Sie können das Attribut „checked="checked" auch verwenden, um Befehle in Kontrollkästchen umzuwandeln. Kontrollkästchen können in Optionsschaltflächen umgewandelt werden, indem das Radiogroup-Attribut angegeben wird, dessen Wert der Gruppenname sich gegenseitig ausschließender Schaltflächen ist.
Zusätzlich zu einer einfachen Befehlsliste können Sie das Menüelement auch zum Erstellen einer Symbolleiste oder eines Popup-Kontextmenüs verwenden, wofür das Festlegen des Typattributs auf Symbolleiste oder Popup erforderlich ist. Beispiel: Code 13. Die HTML 5-Symbolleiste zeigt eine Symbolleiste an, die der von Blog-Editoren wie WordPress ähnelt. Mithilfe des Symbolattributs wird eine Verknüpfung zum Bild der Schaltfläche hergestellt.
















Das Label-Attribut liefert den Titel des Menüs. Beispiel: Code 14. Das HTML 5-Bearbeitungsmenü zeigt ein Bearbeitungsmenü an.








Menüs können in anderen Menüs verschachtelt werden, um eine hierarchische Menüstruktur zu bilden.