Share
Heute werde ich Ihnen zwei HTML5-Elemente vorstellen: und , Teil der Interactive Elements-Spezifikation. Das Web hat sich zu etwas mehr als nur verknüpften Dokumenten entwickelt. Seiten verhalten sich heutzutage zunehmend wie Apps. Daher ist es ein geeigneter Zeitpunkt, um standardmäßige Webinteraktivitätsfunktionen zu erstellen.
Diese beiden Elemente gehören zu den am wenigsten besprochenen Entwicklern, wahrscheinlich aufgrund ihrer fehlenden Unterstützung in wichtigen Browsern. Firefox ist der einzige Browser, der dieses Element zum Zeitpunkt des Schreibens implementiert hat.
Wenn wir darüber reden Speisekarte es ist wichtig, nicht mit verwechselt zu werden . Die Spezifikation ist gut geeignet, um den Unterschied zwischen diesen beiden unterschiedlichen Elementen zu bestimmen.
Das ist der HTML-Navigationselement. Es ist das Element, das den Webseiten-Navigationsblock darstellt. Es enthält im Allgemeinen eine Reihe von Links, über die Benutzer in Abschnitten auf der Seite oder zu einer anderen Seite der Website navigieren oder springen können.
Das , Auf der anderen Seite steht eine Reihe von Menübefehlen. Die Idee ähnelt Desktop- oder mobilen Anwendungen. Desktop-Anwendungen verwenden häufig Symbolleistenmenüs und Kontextmenüs, um verschiedene Aufgaben auszuführen. Nehmen Sie die Verwischen Menü in Photoshop zum Beispiel. Dadurch wird eine Aufgabe ausgeführt, bei der die ausgewählte Ebene unscharf wird.
Unschärfemenü in PhotoshopDies ist der grundlegende Unterschied zwischen diesen beiden Elementen. sollte Links enthalten, mit denen Benutzer durch Webseiten navigieren können Element soll Benutzern dabei helfen, bestimmte Aufgaben auszuführen.
Kurz gesagt, die Dieses Element dient zum Erstellen von Kontextmenüs, Symbolleisten- und Popup-Menüs. Die letzten beiden davon wurden jedoch noch nicht in einem Browser implementiert, einschließlich Firefox. Im Moment ist es schwer zu erraten, wie (wenn?) Browser sie implementieren und wie sie aussehen werden. Es besteht auch eine gute Chance, dass sich die Spezifikation der Symbolleiste und des Popup-Menüs bei der nächsten Iteration geringfügig ändert.
Im Moment konzentrieren wir uns auf die Kontextmenü Merkmal.
Ein Kontextmenü (oder Kontextmenü) wird angezeigt, wenn Sie mit der rechten Maustaste auf eine Anwendung klicken. Die angezeigten Optionen sind daher spezifisch für die Stelle, an der der Benutzer geklickt hat Kontext.
Natives Kontextmenü in OS X und UbuntuEs ist möglich, Kontextmenüs auf Webseiten über JavaScript oder ein jQuery-Plugin hinzuzufügen. Das Problem bei dieser Methode besteht darin, dass häufig ein starkes Markup erforderlich ist und das Skript das Browser-Kontextmenü entfernt. Dies kann die allgemeine Benutzererwartung stören, wenn es nicht ordnungsgemäß ausgeführt wird.
Angepasstes Kontextmenü in Google Drive zusammen mit Das Element enthält die neuen Menüelemente als Teil des nativen Kontextmenüs. In dem Beispiel unten werden wir unser hinzufügen ein neuer Kontextmenüpunkt namens "Hello World".
Die wesentlichen Bestandteile des obigen Ausschnitts sind die Attribute - Ich würde, Art und Kontextmenü - die den Menütyp als angeben Kontext Menü sowie den Bereich, in dem das neue Menü angezeigt werden soll.
In unserem Fall wird das neue Menü an einer beliebigen Stelle im Dokument angezeigt, wenn Sie mit der rechten Maustaste klicken, wie wir es mit dem zugewiesen haben Kontextmenü Attribut zum Karosserie.
Alternativ können Sie den Gültigkeitsbereich innerhalb eines bestimmten Abschnitts auf der Seite einschränken, indem Sie das Symbol zuweisen Wenn wir es im Browser betrachten (im Moment nur in Firefox), sollten Sie das sehen Untermenüs umfassen eine Gruppe von Elementen mit verwandten oder ähnlichen Aktionen. Der Photoshop Bilddrehung Menü ist ein perfektes Beispiel dafür. Das Bilddrehung Das Menü enthält mehrere Untermenüpunkte, mit denen der Benutzer den Grad der Drehung auswählen kann ( Verwendung der Wenn wir dies in einem unterstützenden Browser ausführen, finden wir ein neues Menü mit vier Untermenüs: Außerdem wird ein neues Attribut aufgerufen Und dort ist es das Symbol, wie Sie unten sehen können. Wir haben etwas erstellt, das wie ein Kontextmenü aussieht, aber es funktioniert noch nicht als solches. Benutzer erwarten, dass etwas passiert, wenn sie darauf klicken; Klicken Sie auf Kopieren sollte den Text oder Link kopieren, während Sie auf a klicken Neuer Ordner Menüelement sollte einen neuen Ordner erstellen. Wir können dies mit JavaScript tun. Hinweis: Bevor Sie fortfahren, empfehle ich Ihnen, den Kurs von Jeremy McPeak zu JavaScript Fundamentals anzuschauen. Ein guter Ausgangspunkt für alle, die JavaScript lernen. Nehmen Sie das obige Beispiel für "Bilddrehung". Fügen Sie eine Funktion hinzu, mit der das angeklickte Bild gedreht werden kann. CSS3 Transform and Transition kann die tatsächliche Drehung im Browser für uns ausführen. Hier ist der Stil, der das Bild um 90 Grad drehen wird: Wenn die Stilregel angegeben ist, müssen Sie eine Funktion schreiben, um dies auf das Bild anzuwenden: Fügen Sie diese Funktion in das jeweilige hinzu Zum Abschluss erstellen Sie die Stilregeln, mit denen das Bild um 180 Grad gedreht und das Bild gedreht werden. Fügen Sie jede Funktion innerhalb des jeweiligen Elements zusammen mit dem Parameter hinzu. Sehen Sie sich dieses Beispiel auf der Demo-Seite in Aktion an. Das Hoffentlich werden sich Safari, Chrome, Opera und Internet Explorer bald durchsetzen und auch die anderen Menütypen implementieren ( Kontextmenü Attribut zu den Elementen - , , und etc. - stattdessen in der Karosserie.
Menuitem Wir haben erklärt, dass sie ganz oben auf der Liste stehen.
Der neue Menüpunkt "Hello World" wird als Teil des nativen Kontextmenüs geladen.Untermenü und Symbol hinzufügen
900 und 1800 ) sie wollen, sowie die Richtung, in der sie angewendet werden sollen. Das Hinzufügen von Untermenüs ist einfach und intuitiv. Mach weiter und nist ein anderes zusammen mit einem Etikette um den Menünamen wie folgt zu erklären:
Icons
Symbol wurde eingeführt, wodurch es möglich ist, ein Symbol neben dem Menü hinzuzufügen. Es ist erwähnenswert, dass dieses Attribut nur innerhalb von gültig ist Element. Geben Sie den Symbolpfad für das Symbol an Symbol, wie so.
Jedes Untermenü hat jetzt ein illustratives Symbol. Icons von Fugesymbol.Eine Funktion im Menü hinzufügen
.drehen-90 umwandeln: drehen (90 Grad);
Funktion imageRotation (name) document.getElementById ('image'). className = name; durch die onclick Attribut und übergeben Sie den Parameter mit dem Klassennamen, drehen-90:Fazit
Das Element kann sowohl in Webanwendungen als auch auf normalen Websites sehr nützlich sein. Leider ist die Unterstützung immer noch sehr schlecht.
Pop-up und Werkzeugleiste ). Ich freue mich sehr darauf, wie sich dieses Element im kommenden Jahr entwickeln wird.Weitere Referenzen
Accentsconagua