Maison >interface Web >tutoriel CSS >Commandes d'invocateur: façons supplémentaires de travailler avec Dialog, Popover… et plus encore?
L'API élément dialog
et popover sont des ajouts puissants à la plate-forme Web. J'ai récemment a fourni une analyse détaillée de leurs applications et des techniques sans papiers découvertes. Cependant, leurs implémentations distinctes semblent inutilement complexes.
Les navigateurs Web introduisent des "commandes d'invocateur" - les attributs command
et commandfor
- pour simplifier l'interaction avec les popovers, les dialogues et les fonctionnalités futures, minimisant la recours JavaScript. Ces attributs introduisent également de nouveaux événements JavaScript.
Statut expérimental:
N'oubliez pas que ce sont des caractéristiques expérimentales. Leur permettez-leur:
enable-experimental-web-platform-features
) dom.element.invokers.enabled
) InvokerAttributesEnabled
) Leur élégante abstraction des tâches de script suggère une adoption généralisée est probable.
Utilisation de base:
Utilisez un élément de type bouton (par exemple, <button></button>
, <a></a>
) avec l'attribut command
(spécifiant le nom de commande, comme "show-modal") et commandfor
(référence à l'ID de l'élément cible).
<button command="show-modal" commandfor="dialogA">Show dialogA</button> <dialog id="dialogA">...</dialog>
Explorons les valeurs de commande.
Valeurs d'attribut:
show-modal
: L'équivalent HTML de showModal()
. Il permet un affichage modal sans javascript. Cela reflète les popovers existantes conformes à HTML, créant une approche plus cohérente.
show
: Une commande show
pour les boîtes de dialogue non modale est absente. Compte tenu des capacités de l'API popover, les dialogues non modaux peuvent devenir obsolètes.
close
: L'équivalent HTML de close()
, fermant la boîte de dialogue.
show-popover
, hide-popover
, toggle-popover
: Ces miroirs showPopover()
, hidePopover()
, et togglePopover()
, respectivement. Bien que utile, leur fonctionnalité est déjà accessible à travers les attributs de popover existants.
Voici un résumé:
Command | Equivalent JavaScript Method | Notes |
---|---|---|
show-modal |
showModal() |
Shows a modal dialog. |
close |
close() |
Closes a dialog or popover. |
show-popover |
showPopover() |
Shows a popover (redundant with existing popover attributes). |
hide-popover |
hidePopover() |
Hides a popover (redundant with existing popover attributes). |
toggle-popover |
togglePopover() |
Toggles a popover (redundant with existing popover attributes). |
--custom-command |
N/A | Custom commands prefixed with -- . |
Gestion des événements JavaScript:
Les commandes d'invocateur déclenchent un événement command
sur l'élément cible. Ceci est particulièrement utile pour les éléments dialog
, qui manquent d'un événement show
.
<button command="show-modal" commandfor="dialogA">Show dialogA</button> <dialog id="dialogA">...</dialog>
La manipulation des événements popover est similaire:
dialogs.forEach(dialog => { dialog.addEventListener("command", event => { if (event.command === "show-modal") { /* Dialog shown */ } else if (event.command === "close") { /* Dialog closed */ } }); });
event.source
Fournit l'élément de bouton invoquant. Les attributs peuvent également être définis via JavaScript:
popovers.forEach(popover => { popover.addEventListener("command", event => { if (event.command === "show-popover") { /* Popover shown */ } // ... }); });
Commandes personnalisées:
Les commandes personnalisées (par exemple, --spin-me-a-bit
) permettent une fonctionnalité étendue.
Support futur:
Bien que concentré initialement sur <dialog></dialog>
et les popovers, le support futur pour <details></details>
, <input type="color">
, <video></video>
, et les contrôles à écran complet sont prévus.
Avantages:
Les commandes d'invocateur réduisent JavaScript, offrent une manipulation de type événement et fournissent des méthodes d'interaction alternatives pour les API existantes. Ils affinent et améliorent les fonctionnalités existantes.
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!