Detaillierte Einführung in den HTML5.2-Dialog

Am 24. Dezember 2017 wurde der HTML5.2-Standard verfestigt, was auch dazu führte, dass das mobile Endgerät in die HTML5.3-Planungsphase eintrat. Obwohl HTML5.2 verfestigt wurde, müssen einige neue interne Spezifikationen noch von mobilen Browsern unterstützt werden verbessern, hier werfen wir einen Blick auf ein häufig verwendetes Tag, das neu in den Standard integriert wurde, es ist das Dialog-Tag.

Apropos Dialog-Tag: Viele Leute sind damit möglicherweise nicht vertraut. Schließlich wurde dieses Tag nur vom Chrome-Browser unterstützt, bis der HTML5.2-Standard festgelegt wurde die Semantik.

Was uns hier einfällt, sind Alarm-, Bestätigungs- und andere Popup-Fenster. Ja, sie gehören zur gleichen Familie, es sind alles Popup-Fenster. Als nächstes werfen wir einen kurzen Blick auf einige Eigenschaften und Verwendungsszenarien von Dialog-Tag.

 <dialog open=> <h2>Titel</h2> <p>Inhalt</p></dialog>

Da es sich um ein Tag handelt, ist es tatsächlich dasselbe wie unsere häufig verwendeten div-, p- und anderen Tags. Wie im obigen Beispielcode gezeigt, unterstützt es intern alle anderen Elemente.

Hier fällt Ihnen vielleicht auf, dass das open-Attribut im obigen Beispielcode verwendet wird, um die Anzeige und das Ausblenden dieses Popup-Fensters zu steuern. Natürlich können Sie es auch beliebig mit CSS steuern, genau wie das. Anomalien kann auftreten, wenn die Zusatzfunktionen einiger Geräte verwendet werden (z. B. Barrierefreiheit, Bildschirmlesesoftware usw.), daher wird empfohlen, die standardmäßigen Ein- und Ausblendfunktionen zu verwenden.

Erstens ist das Dialog-Tag ein Beispiel für HTMLDialogElement und erbt von HTMLElement. Daher ist es ein Tag auf derselben Ebene wie das div-Tag. Der einzige Unterschied besteht darin, dass es mehr Standardfunktionen als div hat Werfen wir einen Blick darauf, welche Standardmethoden der Dialog uns zur Verfügung stellt.

 var dialog = document.getElementById(dialog);// Angenommen, es gibt ein Dialog-Tag mit id=dialog in der Seite // Schließen Sie dialogdialog.close(); // Zeigen Sie den Dialog in der Form toastdialog.show(); an. / Im Modell Display dialogdialog.showModal();// Der Parameterwert, der übergeben wird, wenn dialog.close() aufgerufen wird, dialog.returnVlaue;// Der Anzeigestatus des Dialogs dialog.open;

Sie können zuerst zum Beispiel gehen, es bedienen und dann sehen, welche Funktionen es hat, und dann zum Vergleich zurückkommen. Die folgende Zusammenfassung:

1: Die Close-Methode kann auch im ausgeblendeten Zustand mehrmals aufgerufen und erneut aufgerufen werden.

2: close kann eine Variable übergeben, die eine Zeichenfolge sein und in returnVlaue ausgedrückt werden muss.

3: Die Show-Methode kann auch im versteckten Zustand problemlos mehrfach aufgerufen werden.

4: Die Show-Methode ändert die Position des Toasts nicht. Das Popup-Fenster befindet sich nach dem Aufruf der Show-Methode immer noch an der ursprünglichen Position.

5: Show-Methode, die Anzeigeposition liegt direkt hinter dem vorherigen Element, zentriert, ohne eine Maskenebene dahinter. Der Anzeigemodus von Z-Index ähnelt dem von Relativ ohne Einstellung von Z-Index (sofern showModal zuvor nicht aufgerufen wurde). ) ).

6: Wenn showModal nach der Show-Methode aufgerufen wurde, wird das Element an der von showModal angezeigten Position angezeigt und ändert sich nicht (auch wenn sich die Inhaltshöhe stark ändert).

7: Wenn zwei Dialogelemente vorhanden sind, rufen beide die Show-Methode auf. In der HTML-Struktur überdeckt der letztere Dialog immer den vorherigen (unabhängig davon, welcher Dialog zuerst die Show-Methode aufruft).

8: Hinter der Anzeige von showModal befindet sich die Anzeigeebene auf der Ebene der Browser-Webansicht Der vorherige Punkt eignet sich besonders für modale Boxen. Nach dem Erscheinen der Popup-Box wird es definitiv keine hierarchische Verwirrung geben.

9: showModal kann hier nur einmal aufgerufen werden. Wenn sich der Dialog im Anzeigestatus befindet, wird beim erneuten Aufruf von showModal ein Fehler gemeldet, und er kann nicht direkt ausgeführt werden Das offene Attribut ist vorhanden, ein erneuter Aufruf wird einen Fehler melden, daher ist es besser, das standardmäßige offene Attribut zum Ein- und Ausblenden des Dialogs zu verwenden.

10: Wenn es zwei Dialogelemente auf der Seite gibt und beide die Methode showModal aufrufen, ist die Ebene des später aufgerufenen Dialogs unabhängig von ihrer Struktur in HTML höher als die Ebene des zuvor aufgerufenen Dialogs.

11: Der Wert von dialog.returnVlaue ist der beim Aufruf von dialog.close(string) übergebene Wert. Der beim Aufruf von dialog.close übergebene Wert ist nur gültig, wenn der Dialog angezeigt wird.

12: Wenn beim Schließen kein Wert übergeben wurde, ist der Wert von returnVlaue leer. Wenn ein Wert an dialog.close(1) übergeben wird, wird dialog.close() nach der nächsten Anzeige geschlossen und returnVlaue ist immer noch gleich zu 1.

13: Der Rückgabewert von open ist: wahr/falsch.

Ein weiterer Vorteil von Dialog besteht darin, dass es zusätzlich zu grundlegenden Ereignissen wie Klick zwei zusätzliche spezielle Ereignisse für Dialog unterstützt:

 var dialog = document.getElementById(dialog); // Angenommen, es gibt ein Dialog-Tag mit id=dialog // Wenn die Close-Methode aufgerufen wird dialog.onclose = function(){}; // Wenn esc gedrückt wird auf der PC-Seite Beim Drücken der Taste. Aber nach der Chrome-Version scheint es nicht mehr zu funktionieren. dialog.oncancel = function(){};

Schauen wir uns nun ein Beispiel an: Beispielanzeige eines Dialogereignisses.

Es gibt auch mehrere Fragen, die wir hier auflisten:

1: Nur durch den Aufruf von dialog.close() zum Ausblenden des Dialogs kann das Ereignis onclose ausgelöst werden.

2: Nachdem das Abbruchereignis ausgelöst wurde, wird das Schließereignis definitiv weiterhin ausgelöst. Nach der Chrome64-Version wird Abbrechen nicht durch die Esc-Taste ausgelöst.

3: Wenn mehrere Schaltflächen zum Schließen des Dialogs vorhanden sind, übergeben Sie bei jedem Aufruf des Schließereignisses einen anderen Wert. Verwenden Sie den Wert von returnVlaue, um zu bestimmen, welche Schaltfläche zum Auslösen des Schließereignisses verwendet wird.

Einige der Funktionen des Dialogs wurden bereits erläutert. Möglicherweise sind sie unvollständig oder ungenau, oder es können im Laufe der Zeit neue Funktionen hinzukommen.

Bei der Betrachtung der vorherigen Beispiele haben wir auch einige Mängel festgestellt, z. B.: Der Stil ist besonders hässlich. Wir können den Stil mithilfe von CSS vollständig zurücksetzen, ohne die Semantik oder irgendetwas anderes zu beeinträchtigen. Sie können sicher sein, dass Sie ihn umgestalten können . Das ist es.

Ich möchte hier nur über die Leistung des Dialogs sprechen, deshalb werde ich das nicht tun.

Schließlich ist Dialog eine semantische Bezeichnung für Popup-Dialoge und bietet einige einzigartige Vorteile (z. B. die Höhe der Webansichtsebene. Obwohl er derzeit nur von Chrome unterstützt wird, ist er für die zukünftige Verwendung immer noch sehr vielversprechend Es ist jetzt sogar mit sich selbst kompatibel. Implementieren Sie jetzt in anderen Browsern selbst eine Reihe von Dialogmechanismen (vielleicht gibt es dafür bereits einen Implementierungsplan, daher werde ich hier nicht danach suchen).

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.