Introduction à la boîte de dialogue HTML5.2

Cet article présente principalement les informations pertinentes sur l'introduction détaillée de la boîte de dialogue html5.2. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

Le 24 décembre 2017, la norme HTML5.2 a été solidifiée, ce qui signifie également que le terminal mobile est entré dans la phase de planification HTML5.3. Bien que HTML5.2 ait été solidifié, de nouvelles spécifications internes ont été implémentées dans le mobile. navigateurs. La prise en charge en HTML doit encore être améliorée. Nous examinons ici une balise couramment utilisée qui est nouvellement incorporée dans la norme.

1. Écrivez devant

En parlant de la balise de dialogue, beaucoup de gens ne la connaissent peut-être pas. Après tout, cette balise n'est disponible que pour la navigation Chrome jusqu'au. La norme HTML5.2 est corrigée. Elle n'est prise en charge que par l'appareil, de sorte que pour les besoins de cette balise, elle peut être clairement comprise en fonction de la sémantique et de la conversation.

Ce à quoi nous pouvons penser ici, ce sont des fenêtres pop-up d'alerte, de confirmation et autres. Oui, elles sont de la même famille, ce sont toutes des boîtes pop-up. Ensuite, nous allons brièvement en examiner quelques-unes. propriétés de la balise de dialogue et scénarios d’utilisation.

2. Utilisation du tag

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

Puisqu'il s'agit d'un tag, c'est en fait le même que notre couramment utilisé p, p Comme les balises, comme le montre l'exemple de code ci-dessus, il prend en charge d'autres éléments arbitraires en interne.

Ici, vous remarquerez peut-être que l'attribut open dans l'exemple de code ci-dessus, oui, il est utilisé pour contrôler l'affichage et le masquage de cette fenêtre pop-up. Bien sûr, vous pouvez également utiliser CSS à votre guise. . Pour contrôler, cela provoquera des anomalies lors de l'utilisation des fonctions auxiliaires de certains appareils (telles que l'accessibilité, le logiciel de lecture d'écran, etc.), il est donc recommandé d'utiliser les fonctions d'affichage et de masquage standard.

3. Méthodes par défaut prises en charge

Tout d'abord, la balise dialog est un exemple de HTMLDialogElement, hérité de HTMLElement, elle appartient donc à la même catégorie que le p tag. La seule différence entre les balises hiérarchiques est qu'elles ont plus de fonctions par défaut que p. Dans cette section, nous examinerons les méthodes par défaut que dialog peut utiliser.

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;

Vous pouvez d'abord consulter l'exemple, l'utiliser, puis voir quelles sont les fonctionnalités, puis revenir pour comparer le résumé suivant. :

1 : La méthode close peut être appelée plusieurs fois, même à l'état caché, et peut être appelée à nouveau.

2 : close peut passer une variable, qui doit être une chaîne et exprimée en returnVlaue.

3 : La méthode show peut également être appelée plusieurs fois, même à l'état caché, sans aucun problème.

4 : La méthode show ne changera pas la position du toast. La boîte contextuelle est toujours à la position d'origine après l'appel de la méthode show.

5 : méthode show, la position d'affichage est immédiatement derrière l'élément précédent, centrée, il n'y a pas de calque de masque derrière, la méthode d'affichage z-index est similaire au paramètre relatif sans paramètre z-index (si avant this, si showModal n'a pas été appelé).

6 : Si showModal a été appelé, après la méthode show, l'élément est affiché à la position affichée par showModal et ne changera pas (même si la hauteur du contenu change beaucoup).

7 : S'il y a deux éléments de dialogue, tous deux appellent la méthode show. Dans la structure html, la boîte de dialogue suivante couvrira toujours la précédente (quelle que soit la boîte de dialogue qui appelle la méthode show en premier).

8 : Il y aura un calque de masque derrière l'affichage de showModal. Le niveau d'affichage est au niveau de la vue Web du navigateur. Comment le comprendre Vous pouvez définir un élément avec un niveau très élevé. affichez l'attribut dialog, les boîtes de dialogue sont toutes à l'avant, ce qui est particulièrement adapté aux boîtes modales. Il n'y aura certainement aucune confusion hiérarchique après l'apparition de la boîte contextuelle.

9 : showModal ne peut être appelé qu'une seule fois. La seule fois ici signifie que si la boîte de dialogue est dans l'état d'affichage, une erreur sera signalée lorsque showModal est à nouveau appelé, et elle ne peut pas être exécutée directement, ou tant que l'attribut open existe. Si vous l'appelez à nouveau, une erreur sera signalée, il est donc préférable d'utiliser l'attribut open par défaut pour afficher et masquer la boîte de dialogue.

10 : S'il y a deux éléments de dialogue sur la page et que tous deux appellent la méthode showModal, quelle que soit leur structure en HTML, le niveau de la boîte de dialogue appelée ultérieurement sera supérieur au niveau de la boîte de dialogue appelée précédemment .

11 : La valeur de dialog.returnVlaue est la valeur transmise lors de l'appel de dialog.close(string). Elle ne prend en charge que les chaînes. Uniquement lorsque la boîte de dialogue est affichée, la valeur transmise en appelant dialog.close value. est valide.

12 : Si aucune valeur n'est passée dans close, alors la valeur de returnVlaue est vide. Si une valeur est passée à dialog.close("1"), après la prochaine émission, dialog.close() le fera. close , returnVlaue est toujours égal à "1".

13 : La valeur de retour de open est : vrai/faux.

4. Événements par défaut pris en charge

Un autre avantage du dialogue est qu'en plus des événements de base tels que le clic, il prend en charge deux événements spéciaux supplémentaires pour les événements de dialogue :

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

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

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

Regardons maintenant un exemple : exemple d'affichage d'un événement de dialogue.

Il y a également plusieurs problèmes, en voici quelques-uns :

1 : Ce n'est qu'en appelant dialog.close() pour masquer la boîte de dialogue que l'événement onclose peut être déclenché.

2 : Une fois l'événement d'annulation déclenché, l'événement de fermeture continuera à être déclenché. Après la version chrome64, l'annulation n'est pas déclenchée par la touche ESC.

3 : S'il y a plusieurs boutons pour fermer la boîte de dialogue, transmettez une valeur différente à chaque fois que close est appelé. Dans le rappel de l'événement close, utilisez la valeur de returnVlaue pour déterminer de quel bouton il s'agit. L'événement d'arrêt utilisé pour déclencher.

5. Autres

Certaines des performances du dialogue ont été expliquées précédemment. Elles peuvent être incomplètes ou inexactes, ou elles peuvent être mises à jour au fil du temps. Des fonctionnalités apparaissent, bienvenue à ajouter.

En regardant les exemples précédents, nous avons également constaté quelques lacunes, telles que : le style est particulièrement moche. À ce propos, nous pouvons complètement utiliser CSS pour réinitialiser le style sans affecter la sémantique et autres choses, juste. soyez assuré de refactoriser.

Je veux juste parler de la performance du dialogue, donc je ne ferai pas ça.

6. Résumé

la boîte de dialogue est, après tout, une balise sémantique pour les boîtes de dialogue contextuelles et présente des avantages uniques (comme la hauteur du niveau d'affichage Web). ), bien que seul Chrome le prenne en charge, mais il reste très prometteur pour une utilisation future. Même maintenant, vous pouvez le rendre compatible par vous-même. Dans d'autres navigateurs, vous pouvez implémenter vous-même un ensemble de mécanismes de dialogue (il existe peut-être déjà). un plan de mise en œuvre pour cela, donc je n'entrerai pas dans les détails ici).

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de la mise en œuvre de la fonction de caméra d'appel HTML5

Introduction à la fonction de partage d'applications d'appel HTML5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!