Kommentar: HTML 5 ist auch als Webanwendungen 1.0 bekannt. Um dieses Ziel zu erreichen, werden mehrere neue Elemente hinzugefügt, um interaktive Erlebnisse für Webseiten bereitzustellen: Details DataGrid -Menübefehl Diese Elemente können auf dem Benutzer basieren
HTML 5 ist auch als Webanwendungen 1.0 bekannt. Um dies zu erreichen, werden mehrere neue Elemente hinzugefügt, um interaktive Erfahrungen für Webseiten zu bieten:
Details
DataGrid
Speisekarte
Befehl
Diese Elemente können alle den angezeigten Inhalt basierend auf Benutzeraktionen und Auswahlen ändern, ohne eine neue Seite vom Server zu laden.
Details
Das Detailelement enthält Details, die möglicherweise standardmäßig nicht angezeigt werden. Das optionale Legendelement kann eine Zusammenfassung der Details liefern.
Eine der Verwendungen des Detailelements besteht darin, Fußnoten und Endnoten bereitzustellen. Zum Beispiel:
Die Rechnung eines Craveri -Murrelet ist etwa 10% dünner
als die Rechnung eines Xantus -Murrelet.
<details>
<Legend> [Sibley, 2000] </legend>
<p> Sibley, David Allen, der Sibley -Leitfaden für Vögel,
(New York: Chanticleer Press, 2000) p. 247
</p>
</detail>
Es wird keine spezifische Anzeigemethode angegeben. Der Browser kann Fußnoten, Endnoten und Tooltips auswählen.
Jedes Detailelement kann eine offene Eigenschaft haben. Wenn diese Eigenschaft festgelegt ist, werden die Details zunächst angezeigt. Wenn diese Eigenschaft nicht festgelegt ist, sind sie versteckt, bis der Benutzer sie auffordert, angezeigt zu werden. In beiden Fällen können Benutzer Details anzeigen oder ausblenden, indem sie auf ein Symbol oder eine andere Steuerung klicken.
DataGrid
Das DataGrid -Element bietet eine Gittersteuerung. Es kann verwendet werden, um Bäume, Listen und Tabellen anzuzeigen, und Benutzer und Skripte können diese Schnittstellenelemente aktualisieren. Im Gegensatz dazu werden herkömmliche Tabellen hauptsächlich zur Anzeige statischer Daten verwendet.
DataGrid erhält die ersten Daten aus dem Inhalt (eine Tabelle, auswählen oder ein anderes HTML -Element). Zum Beispiel enthält der DataGrid in Code 9 ein Score -Blatt. In diesem Beispiel stammen die Daten des Datagrid aus einer Tabelle. Einfacher 1D -DataGrid kann Daten aus dem Element auswählen abrufen. Wenn Sie andere HTML -Elemente verwenden, wird jedes untergeordnete Element zu einer Zeile im Netz.
<Datagrid>
<tabelle>
<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>
Der Unterschied zwischen diesem Element und einer regulären Tabelle besteht darin, dass Benutzer Zeilen, Spalten und Zellen auswählen können. Kollapsreihen, Säulen und Zellen; Zellen bearbeiten; Zeilen, Säulen und Zellen löschen; sortieren Gitter; und andere Datenvorgänge direkt im Clientbrowser durchführen. Sie können JavaScript -Code verwenden, um Updates zu überwachen. Die HTMLDATAGRIDELEMENT -Schnittstelle wird dem DOCUM -Model (DOM) (DOM) hinzugefügt, um dieses Element zu unterstützen (Code 10 HTMLDATAGRIDELEMENT).
Schnittstelle htmldatagridelement: htmlelement {
Attribut DataGridDataprovider -Daten;
Readonly Attribut DataGridSelection Auswahl;
Attribut Boolean Multiple;
Attribut boolean deaktiviert;
void updateverything ();
void updaterowschanged (in der RowSpecification -Zeile in nicht signierter langer Anzahl);
void updaterowSInserted (in der RowSpecification -Zeile in nicht signierter langer Anzahl);
void updaterowsRemoved (in der RowSpecification -Zeile in nicht signierter langer Anzahl);
void updaterowchanged (in RowSpecification -Zeile);
void UpdateColumnchanged (in nicht signierter langer Spalte);
void UpdateCellChanged (in der RowSpecification -Zeile in der nicht signierten langen Spalte);
};
Sie können DOM auch verwenden, um Daten dynamisch im Netz zu laden. Das heißt, DataGrid enthält möglicherweise keine Kinder, die die anfänglichen Daten liefern. Es kann mit einem DataGridDataprovider -Objekt festgelegt werden (Code 11 DataGridDataprovider). Auf diese Weise können Daten aus jeder Ressource geladen werden, auf die von der Datenbank, XMLHTTPrequest oder JavaScript -Code zugegriffen werden kann.
Schnittstelle DataGridDataprovider {
void initialize (in htmldatagagridelement datagrid);
unsigned long getrowcount (in RowSpecification -Zeile);
nicht signierte lange GetChildatposition (in RowSpecification Parentrow,
in nicht signierter langer Position);
unsigned long getColumncount ();
DomString getCaptionText (in der nicht signierten langen Spalte);
void getCaptionClasses (in der nicht signierten langen Spalte in DomTokenlist -Klassen);
DomString GetRowimage (in RowSpecification -Zeile);
HtmlMenuelement getrowmenu (in RowSpecification Row);
void getrowclasses (in RowSpecification -Zeile in DomTokenList -Klassen);
Domstring getCellData (in der RowSpecification -Zeile in der nicht signierten langen Spalte);
void getCellclasses (in der RowSpecification -Zeile, in der nicht signierten langen Spalte,
in DomTokenList -Klassen);
void ToggleColumnSortState (in nicht signierter langer Säule);
void setCellCheckedState (in der RowSpecification -Zeile, in der nicht signierten langen Spalte,,
im langen Zustand);
void cyclecell (in der RowSpecification -Zeile in der nicht signierten langen Spalte);
void editcell (in der RowSpecification -Zeile in der nicht signierten langen Spalte in Domstring -Daten);
};
Menü und Befehl
Das Menüelement wird tatsächlich in HTML 2 angezeigt. Es wurde in HTML 4 aufgegeben, aber HTML 5 stellte es wieder her und spezifizierte eine neue Bedeutung. In HTML 5 enthält das Menü das Befehlselement. Jedes Befehlselement leistet eine Operation. Das Menü Code 12 HTML 5 ist beispielsweise ein Menü mit einem Warnbox -Popup.
<Meens>
<Befehl onclick = alert ('erster Befehl') Label = do 1st -Befehl/>
<Befehl onclick = alert ('zweiter Befehl') Label = do 2nd Command/>
<Befehl onclick = alert ('dritter Befehl') Label = do 3rd -Befehl/>
</Menü>
Sie können auch die checked = Checked -Eigenschaft verwenden, um den Befehl in ein Kontrollkästchen umzuwandeln. Durch Angeben der Röntgenbild -Eigenschaft können Sie ein Kontrollkästchen in ein Optionsfeld konvertieren, und der Wert dieser Eigenschaft ist der Gruppenname der gegenseitig ausschließlichen Taste.
Zusätzlich zu einer einfachen Befehlsliste können Sie auch ein Symbolleisten- oder Pop-up-Kontextmenü über das Menüelement erstellen, mit dem die Typ-Eigenschaft auf Symbolleiste oder Popup festgelegt werden muss. Beispielsweise zeigt Code 13. HTML 5 -Symbolleiste eine Symbolleiste an, die den Blog -Editoren wie WordPress ähnelt. Es wird die Symboleigenschaft verwendet, um mit dem Bild der Schaltfläche zu verlinken.
<Menü Typ = Symbolleiste>
<Befehl Onclick = Insertag (Schaltflächen, 0); label = strong icon = BOLD.GIF/>
<Befehl Onclick = Insertag (Schaltflächen, 1); label = em icon = italic.gif/>
<Befehl Onclick = InsertLink (Schaltflächen, 2); label = link icon = link.gif/>
<Befehl Onclick = Insertag (Schaltflächen, 3); label = b-quote icon = blockquote.gif/>
<Befehl Onclick = Insertag (Schaltflächen, 4); label = del icon = del.gif/>
<Befehl Onclick = Insertag (Schaltflächen, 5); label = iNS icon = insert.gif/>
<Befehl Onclick = InsertImage (Schaltflächen); label = img icon = image.gif/>
<Befehl Onclick = Insertag (Schaltflächen, 7); label = ul icon = bullet.gif/>
<Befehl Onclick = Insertag (Schaltflächen, 8); label = ol icon = number.gif/>
<Befehl Onclick = Insertag (Schaltflächen, 9); label = li icon = item.gif/>
<Befehl Onclick = Insertag (Schaltflächen, 10); label = code icon = code.gif/>
<Befehl Onclick = Insertag (Schaltflächen, 11); label = cite icon = cite.gif/>
<Befehl Onclick = Insertag (Schaltflächen, 12); label = abbr icon = abbr.gif/>
<Befehl Onclick = Insertag (Schaltflächen, 13); Label = Akronym icon = Acronym.gif/>
</Menü>
Die Etiketteneigenschaft bietet den Titel des Menüs. Zum Beispiel CODE 14. HTML 5 -Menü Bearbeiten zeigt ein Menü Bearbeiten an.
<Menü type = popup label = edit>
<Befehl Onclick = rückgängig () label = zuo/>
<Befehl Onclick = Redo () Label = Redo/>
<Befehl Onclick = cut () label = cut/>
<Befehl Onclick = Copy () Label = Copy/>
<Befehl onclick = paste () label = paste/>
<Befehl Onclick = Delete () Label = Clear/>
</Menü>
Das Menü kann in anderen Menüs verschachtelt werden, um eine hierarchische Menüstruktur zu bilden.