Einführung in den HTML5.2-Dialog

In diesem Artikel werden hauptsächlich relevante Informationen zur detaillierten Einführung des HTML5.2-Dialogs vorgestellt. Der Inhalt ist ziemlich gut und wird als Referenz dienen.

Am 24. Dezember 2017 wurde der HTML5.2-Standard gefestigt, was auch bedeutete, dass das mobile Endgerät in die HTML5.3-Planungsphase eintrat. Obwohl HTML5.2 gefestigt wurde, wurden einige neue interne Spezifikationen in Mobilgeräten implementiert Die Unterstützung in HTML muss noch verbessert werden. Hier werfen wir einen Blick auf ein häufig verwendetes Tag, das neu in den Standard aufgenommen wurde.

1. Schreiben Sie vor

Apropos Dialog-Tag: Viele Leute sind damit möglicherweise nicht vertraut. Schließlich ist dieser Tag nur für Chrome-Browsing verfügbar Der HTML5.2-Standard ist festgelegt und wird nur vom Gerät unterstützt, sodass er für den Zweck dieses Tags anhand der Semantik und Konversation klar verstanden werden kann.

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 des Dialog-Tags und Verwendungsszenarien.

2. Verwenden Sie Tags

<dialog open="">      
 <h2>Title</h2>    
 <p>Content</p>
</dialog>

Da es sich um ein Tag handelt, ist es tatsächlich dasselbe wie unser häufig verwendetes p, p und andere Tags Ebenso unterstützt es, wie im obigen Beispielcode gezeigt, intern beliebige andere 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 auch CSS verwenden, wie Sie möchten Zur Kontrolle kommt es bei der Verwendung der Zusatzfunktionen einiger Geräte (z. B. Barrierefreiheit, Bildschirmlesesoftware usw.) zu Anomalien. Daher wird empfohlen, die Standardfunktionen zum Anzeigen und Ausblenden zu verwenden.

3. Unterstützte Standardmethoden

Erstens ist das Dialog-Tag ein Beispiel für HTMLDialogElement, das von HTMLElement geerbt wurde, sodass es zur gleichen Kategorie wie das p gehört Der einzige Unterschied zwischen hierarchischen Tags besteht darin, dass sie über mehr Standardfunktionen als p verfügen. In diesem Abschnitt werfen wir einen Blick darauf, welche Standardmethoden uns zur Verfügung stehen.

var dialog = document.getElementById("dialog");
// 假设页面中，有一个id=dialog的dialog标签

// 关闭dialog
dialog.close();

// 以toast的形式显示dialog
dialog.show();

// 以模态框的形式显示dialog
dialog.showModal();

// dialog.close()调用时传入的参数值
dialog.returnVlaue;

// dialog的显示状态
dialog.open;

Sie können zuerst zum Beispiel gehen, es bedienen und dann sehen, welche Funktionen es gibt, und dann zurückkommen, um die folgende Zusammenfassung zu vergleichen:

1: Die Close-Methode kann mehrmals aufgerufen werden, auch im ausgeblendeten Zustand, und kann 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: Anzeigemethode, die Anzeigeposition liegt direkt hinter dem vorherigen Element, zentriert, es gibt keine Maskenebene dahinter, die Z-Index-Anzeigemethode ähnelt der relativen ohne Z-Index-Einstellung (falls vorhanden). this , wenn showModal nicht aufgerufen wurde).

6: Wenn showModal aufgerufen wurde, wird das Element nach der Show-Methode 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 nachfolgende 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 Zeigen Sie das Dialogattribut an. Der Dialog befindet sich alle im Vordergrund, was besonders für modale Felder geeignet ist. Nach dem Erscheinen des Popup-Felds wird es definitiv keine hierarchische Verwirrung geben.

9: showModal kann 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 Solange das Open-Attribut vorhanden ist. Wenn Sie es erneut aufrufen, wird ein Fehler gemeldet. Daher ist es besser, das Standard-Open-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. Es werden nur Zeichenfolgen unterstützt, die beim Aufruf von dialog.close übergeben werden ist gültig.

12: Wenn beim Schließen kein Wert übergeben wird, ist der Wert von returnVlaue leer. Wenn ein Wert an dialog.close("1") übergeben wird, wird dies nach der nächsten Anzeige von dialog.close() der Fall sein close , returnVlaue ist immer noch gleich „1“.

13: Der Rückgabewert von open ist: true/false.

4. Unterstützte Standardereignisse

Ein weiterer Vorteil des Dialogs besteht darin, dass er zusätzlich zu den Basisereignissen wie „Click“ zwei zusätzliche Sonderereignisse für den Dialog unterstützt:

var dialog = document.getElementById("dialog");
// 假设页面中，有一个id=dialog的dialog标签

// 当调用close方法时
dialog.onclose = function(){};

// 当在pc端按下esc按键时。不过在chrome版本之后，好像不管用了。
dialog.oncancel = function(){};

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

Es gibt auch mehrere Probleme, hier sind einige:

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

2: Nachdem das Abbruchereignis ausgelöst wurde, wird das Schließereignis 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 von close einen anderen Wert. Verwenden Sie im Rückruf des Schließereignisses den Wert von returnVlaue, um zu bestimmen, um welche Schaltfläche es sich handelt. Das zum Auslösen verwendete Shutdown-Ereignis.

5. Sonstiges

Einige der Leistungen des Dialogs wurden bereits früher erklärt, sie können unvollständig oder ungenau sein oder im Laufe der Zeit aktualisiert werden. Es werden Funktionen angezeigt, die gerne hinzugefügt werden können.

Beim Betrachten der vorherigen Beispiele haben wir auch einige Mängel festgestellt, wie zum Beispiel: Der Stil ist besonders hässlich. In dieser Hinsicht können wir den Stil vollständig mit CSS zurücksetzen, ohne die Semantik und andere Dinge zu beeinträchtigen Seien Sie versichert, dass Sie umgestalten werden.

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

6. Zusammenfassung

Dialog ist schließlich ein semantischer Tag für Popup-Dialoge und hat einige einzigartige Vorteile (z. B. die Höhe der Webansichtsebene). ), obwohl es nur von Chrome unterstützt wird, ist es dennoch sehr vielversprechend für die zukünftige Verwendung. In anderen Browsern können Sie eine Reihe von Dialogmechanismen selbst implementieren (vielleicht gibt es sie bereits). einen Umsetzungsplan dafür, daher werde ich hier nicht weiter darauf eingehen).

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Über die Implementierung der HTML5-Aufrufkamerafunktion

Einführung in die HTML5-Aufruf-App-Sharing-Funktion

Das obige ist der detaillierte Inhalt vonEinführung in den HTML5.2-Dialog. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!