Guide des popups

  • Raccourci de la révision : XUL/Guide_des_popups
  • Titre de la révision : Guide des popups
  • ID de la révision : 234548
  • Créé :
  • Créateur : lmorchard
  • Version actuelle ? Oui
  • Commentaire /* Utilisation de popups */

Contenu de la révision

Popups et menus

Différents types de popups et menus peuvent être créés. Un popup est un menu ou une fenêtre flottante sans barre de titre, bordures ou autres décorations de fenêtre qui peut s'étendre au-delà des limites de la fenêtre principale.

Types de popups

XUL fournit un certain nombre de types d'éléments différents qui peuvent être utilisés pour créer des menus popups ou d'autres types de widgets popups, qui varient selon la manière dont ils sont attachés à un élément et de s'ouvrir. Un aperçu rapide de chaque type est donné ici ; plus de détails pour chacun des types peuvent être obtenus en suivant les liens correspondants.

Dans ce guide, le terme « popup » fait référence à tous les types de popups, tandis que le terme « menu » fait référence à un type particulier de popup. En particulier, les deux premiers types de la liste ci-dessous sont des menus.

Menus
Un menu s'utilise lorsque l'on désire avoir une série de commandes pouvant être activées par l'utilisateur, mais sans devoir utiliser la place que prendrait un bouton pour chaque commande. Un menu est normalement masqué, et lorsqu'il est activé un popup contenant la liste des commandes apparaît. L'utilisateur peut sélectionner une commande et le menu disparaît à nouveau.
On crée un menu avec l'élément menupopup. Il affiche des éléments dans une liste, peut afficher des sous-menus et fournit une navigation au clavier entre les différents éléments. Un menu ne doit contenir que des éléments liés aux menus.
Menus contextuels
Un menu contextuel est comme un menu normal, sauf que les commandes qu'il contient s'appliquent à ce sur quoi l'utilisateur a cliqué pour ouvrir le menu. Souvent, selon l'élément sur lequel on a cliqué, certaines commandes seront masquées si elles ne sont pas applicables à cet élément.
Panels
Un panel peut contenir tout type de contenu. Il est utile lorsque l'on veut afficher certains contrôles temporairement par dessus l'interface utilisateur existante. Par exemple, un champ de recherche dans un popup peut être utilisé pour permettre une recherche et disparaître dès qu'un terme de recherche a été entré.
Un panel se crée à l'aide de l'élément panel.
Tooltips
Lorsque le pointeur de la souris est positionné au dessus d'un contrôle d'interface utilisateur, un tooltip fournit une bulle d'aide ou d'information, une petite boîte avec un texte descriptif concernant ce contrôle. Lorsque le pointeur est déplacé en dehors du contrôle, le tooltip disparaît automatiquement.
Un tooltip peut être créé en définissant l'attribut tooltiptext sur un élément ou à l'aide de l'élément tooltip.

Utilisation de popups

Les informations complémentaires suivantes sont disponibles concernant la manipulation de menus et de popups.

Ouverture d'un menu ou d'un popup
La plupart des menus et des popups sont ouverts automatiquement lorsqu'ils sont associés avec un élément. Pour ouvrir un popup à l'aide d'un script, utilisez les méthodes openPopup ou openPopupAtScreen. Pour des informations détaillées sur la manière d'ouvrir un popup, consultez Ouverture d'un popup ou Ouverture d'un menu.
Fermeture d'un menu ou d'un popup
Pour des informations sur la fermeture d'un popup, consultez Fermeture d'un popup ou Fermeture d'un menu.
Comment sont placés les popups
Pour en savoir plus sur la manière dont la position d'un popup à l'écran est déterminée, et comment aligner des popups sur d'autres éléments, consultez Positionnement des popups.
Determiner si un popup est ouvert
Pour déterminer si un popup ou un menu est ouvert, consultez Déterminer si un popup est ouvert.
Déplacement d'un popup
Les popups peuvent être déplacés à l'aide de la méthode moveTo. Consultez Déplacement d'un popup.
Redimensionnement d'un popup
La taille d'un popup peut être ajustée à l'aide de la méthode sizeTo. Consultez Redimensionnement d'un popup.
Attacher des menus à un bouton
Pour en savoir plus sur l'ouverture d'un menu lorsqu'un bouton est enfoncé, consultez Boutons de menus.
Fonctionnalités des éléments d'un menu
Pour en savoir plus sur les diverses fonctionnalités des éléments d'un menu, consultez Fonctionnalités de l'élément menuitem
Modification des éléments d'un menu
Pour ajouter, insérer et retirer des éléments d'un menu, consultez Modification d'un menu.
Évènements d'ouverture ou fermeture de popups
Les évènements popupshowing et popupshown se déclenchent lorsqu'un menu ou un popup s'ouvre. Les évènements popuphiding et popuphidden se déclenchent lorsqu'un menu ou un popup se ferme. Pour plus d'informations sur ces évènements, consultez Évènements des popups.
Gestion des touches du clavier dans les popups
Pour des informations sur la manière dont les touches du clavier sont gérées au sein des menus et panels, consultez Gestion des touches du clavier dans les popups.
Considérations liées à la plateforme
Consultez les considérations spéciales des menus par plateforme pour quelques notes concernant la gestion des menus sur certaines plateformes, par exemple la création d'un menu Application sur un Macintosh.

Utilisation des popups dans des extensions

Les extensions peuvent ajouter des éléments de menus supplémentaires à un menu de la barre de menus ou au menu contextuel. De plus une extension peut ajouter un tout nouveau menu complet. Par exemple, une extension peut vouloir ajouter une nouvelle commande dans le menu Outils pour ouvrir un dialogue spécifique à l'extension. Une autre tâche courante est de créer une extension ajoutant un élément au menu contextuel du navigateur. Consultez Utilisation de menus et popups dans des extensions pour plus de détails.

{{ languages( { "en": "en/XUL/PopupGuide", "ja": "ja/XUL/PopupGuide" } ) }}

Source de la révision

<p>
</p>
<h3 id="Popups_et_menus" name="Popups_et_menus"> Popups et menus </h3>
<p>Différents types de popups et menus peuvent être créés. Un popup est un menu ou une fenêtre flottante sans barre de titre, bordures ou autres décorations de fenêtre qui peut s'étendre au-delà des limites de la fenêtre principale.
</p>
<h4 id="Types_de_popups" name="Types_de_popups"> Types de popups </h4>
<p>XUL fournit un certain nombre de types d'éléments différents qui peuvent être utilisés pour créer des menus popups ou d'autres types de widgets popups, qui varient selon la manière dont ils sont attachés à un élément et de s'ouvrir. Un aperçu rapide de chaque type est donné ici ; plus de détails pour chacun des types peuvent être obtenus en suivant les liens correspondants.
</p><p>Dans ce guide, le terme « popup » fait référence à tous les types de popups, tandis que le terme « menu » fait référence à un type particulier de popup. En particulier, les deux premiers types de la liste ci-dessous sont des menus.
</p>
<dl><dt><a href="fr/XUL/Guide_des_popups/Menus">Menus</a>
</dt><dd> Un menu s'utilise lorsque l'on désire avoir une série de commandes pouvant être activées par l'utilisateur, mais sans devoir utiliser la place que prendrait un bouton pour chaque commande. Un menu est normalement masqué, et lorsqu'il est activé un popup contenant la liste des commandes apparaît. L'utilisateur peut sélectionner une commande et le menu disparaît à nouveau.
</dd><dd> On crée un menu avec l'élément <code>menupopup</code>. Il affiche des éléments dans une liste, peut afficher des sous-menus et fournit une navigation au clavier entre les différents éléments. Un menu ne doit contenir que des éléments liés aux menus.
</dd><dt><a href="fr/XUL/Guide_des_popups/Menus_contextuels">Menus contextuels</a>
</dt><dd> Un menu contextuel est comme un menu normal, sauf que les commandes qu'il contient s'appliquent à ce sur quoi l'utilisateur a cliqué pour ouvrir le menu. Souvent, selon l'élément sur lequel on a cliqué, certaines commandes seront masquées si elles ne sont pas applicables à cet élément. </dd><dt><a href="fr/XUL/Guide_des_popups/Panels">Panels</a>
</dt><dd> Un panel peut contenir tout type de contenu. Il est utile lorsque l'on veut afficher certains contrôles temporairement par dessus l'interface utilisateur existante. Par exemple, un champ de recherche dans un popup peut être utilisé pour permettre une recherche et disparaître dès qu'un terme de recherche a été entré.
</dd><dd> Un panel se crée à l'aide de l'élément <code>panel</code>.
</dd><dt><a href="fr/XUL/Guide_des_popups/Tooltips">Tooltips</a>
</dt><dd> Lorsque le pointeur de la souris est positionné au dessus d'un contrôle d'interface utilisateur, un tooltip fournit une bulle d'aide ou d'information, une petite boîte avec un texte descriptif concernant ce contrôle. Lorsque le pointeur est déplacé en dehors du contrôle, le tooltip disparaît automatiquement.
</dd><dd> Un tooltip peut être créé en définissant l'attribut <code>tooltiptext</code> sur un élément ou à l'aide de l'élément <code>tooltip</code>.
</dd></dl>
<h4 id="Utilisation_de_popups" name="Utilisation_de_popups"> Utilisation de popups </h4>
<p>Les informations complémentaires suivantes sont disponibles concernant la manipulation de menus et de popups.
</p>
<dl><dt> Ouverture d'un menu ou d'un popup
</dt><dd> La plupart des menus et des popups sont ouverts automatiquement lorsqu'ils sont associés avec un élément. Pour ouvrir un popup à l'aide d'un script, utilisez les méthodes <code>openPopup</code> ou <code>openPopupAtScreen</code>. Pour des informations détaillées sur la manière d'ouvrir un popup, consultez <a href="fr/XUL/Guide_des_popups/Ouverture_et_fermeture#Ouverture_d.27un_popup">Ouverture d'un popup</a> ou <a href="fr/XUL/Guide_des_popups/Ouverture_et_fermeture#Ouverture_d.27un_menu">Ouverture d'un menu</a>.
</dd></dl>
<dl><dt> Fermeture d'un menu ou d'un popup
</dt><dd> Pour des informations sur la fermeture d'un popup, consultez <a href="fr/XUL/Guide_des_popups/Ouverture_et_fermeture#Fermeture_d.27un_popup_avec_la_m.C3.A9thode_hidePopup">Fermeture d'un popup</a> ou <a href="fr/XUL/Guide_des_popups/Ouverture_et_fermeture#Fermeture_d.27un_menu">Fermeture d'un menu</a>.
</dd></dl>
<dl><dt> Comment sont placés les popups
</dt><dd> Pour en savoir plus sur la manière dont la position d'un popup à l'écran est déterminée, et comment aligner des popups sur d'autres éléments, consultez <a href="fr/XUL/Guide_des_popups/Positionnement">Positionnement des popups</a>.
</dd></dl>
<dl><dt> Determiner si un popup est ouvert
</dt><dd> Pour déterminer si un popup ou un menu est ouvert, consultez <a href="fr/XUL/Guide_des_popups/Ouverture_et_fermeture#D.C3.A9terminer_si_un_popup_est_ouvert">Déterminer si un popup est ouvert</a>.
</dd></dl>
<dl><dt> Déplacement d'un popup
</dt><dd> Les popups peuvent être déplacés à l'aide de la méthode <code>moveTo</code>. Consultez <a href="fr/XUL/Guide_des_popups/D%c3%a9placement_et_redimensionnement#D.C3.A9placement_d.27un_popup">Déplacement d'un popup</a>.
</dd></dl>
<dl><dt> Redimensionnement d'un popup
</dt><dd> La taille d'un popup peut être ajustée à l'aide de la méthode <code>sizeTo</code>. Consultez <a href="fr/XUL/Guide_des_popups/D%c3%a9placement_et_redimensionnement">Redimensionnement d'un popup</a>.
</dd></dl>
<dl><dt> Attacher des menus à un bouton
</dt><dd> Pour en savoir plus sur l'ouverture d'un menu lorsqu'un bouton est enfoncé, consultez <a href="fr/XUL/Guide_des_popups/Boutons_de_menus">Boutons de menus</a>.
</dd></dl>
<dl><dt> Fonctionnalités des éléments d'un menu
</dt><dd> Pour en savoir plus sur les diverses fonctionnalités des éléments d'un menu, consultez <a href="fr/XUL/Guide_des_popups/%c3%89l%c3%a9ments_de_menus">Fonctionnalités de l'élément menuitem</a>
</dd></dl>
<dl><dt> Modification des éléments d'un menu
</dt><dd> Pour ajouter, insérer et retirer des éléments d'un menu, consultez <a href="fr/XUL/Guide_des_popups/Modification_d'un_menu">Modification d'un menu</a>.
</dd></dl>
<dl><dt> Évènements d'ouverture ou fermeture de popups
</dt><dd> Les évènements <a href="fr/XUL/Guide_des_popups/%c3%89v%c3%a8nements_des_popups#L.27.C3.A9v.C3.A8nement_popupshowing">popupshowing</a> et <a href="fr/XUL/Guide_des_popups/%c3%89v%c3%a8nements_des_popups#L.27.C3.A9v.C3.A8nement_popupshown">popupshown</a> se déclenchent lorsqu'un menu ou un popup s'ouvre. Les évènements <a href="fr/XUL/Guide_des_popups/%c3%89v%c3%a8nements_des_popups#L.27.C3.A9v.C3.A8nement_popuphiding">popuphiding</a> et <a href="fr/XUL/Guide_des_popups/%c3%89v%c3%a8nements_des_popups#L.27.C3.A9v.C3.A8nement_popuphidden">popuphidden</a> se déclenchent lorsqu'un menu ou un popup se ferme. Pour plus d'informations sur ces évènements, consultez <a href="fr/XUL/Guide_des_popups/%c3%89v%c3%a8nements_des_popups">Évènements des popups</a>.
</dd></dl>
<dl><dt> Gestion des touches du clavier dans les popups
</dt><dd> Pour des informations sur la manière dont les touches du clavier sont gérées au sein des menus et panels, consultez <a href="fr/XUL/Guide_des_popups/Touches_du_clavier">Gestion des touches du clavier dans les popups</a>.
</dd></dl>
<dl><dt> Considérations liées à la plateforme
</dt><dd> Consultez <a href="fr/XUL/Guide_des_popups/Menus_de_la_plateforme">les considérations spéciales des menus par plateforme</a> pour quelques notes concernant la gestion des menus sur certaines plateformes, par exemple la création d'un menu Application sur un Macintosh.
</dd></dl>
<h4 id="Utilisation_des_popups_dans_des_extensions" name="Utilisation_des_popups_dans_des_extensions"> Utilisation des popups dans des extensions </h4>
<p>Les extensions peuvent ajouter des éléments de menus supplémentaires à un menu de la barre de menus ou au menu contextuel. De plus une extension peut ajouter un tout nouveau menu complet. Par exemple, une extension peut vouloir ajouter une nouvelle commande dans le menu Outils pour ouvrir un dialogue spécifique à l'extension. Une autre tâche courante est de créer une extension ajoutant un élément au menu contextuel du navigateur. Consultez <a href="fr/XUL/Guide_des_popups/Extensions">Utilisation de menus et popups dans des extensions</a> pour plus de détails.
</p>
<div class="noinclude">
</div>
{{ languages( { "en": "en/XUL/PopupGuide", "ja": "ja/XUL/PopupGuide" } ) }}
Revenir à cette révision