diff options
Diffstat (limited to 'files/fr/archive/mozilla/xul/guide_des_popups')
3 files changed, 0 insertions, 371 deletions
diff --git a/files/fr/archive/mozilla/xul/guide_des_popups/index.html b/files/fr/archive/mozilla/xul/guide_des_popups/index.html deleted file mode 100644 index aaebd62a1b..0000000000 --- a/files/fr/archive/mozilla/xul/guide_des_popups/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Guide des popups -slug: Archive/Mozilla/XUL/Guide_des_popups -translation_of: Archive/Mozilla/XUL/PopupGuide ---- -<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> diff --git a/files/fr/archive/mozilla/xul/guide_des_popups/ouverture_et_fermeture/index.html b/files/fr/archive/mozilla/xul/guide_des_popups/ouverture_et_fermeture/index.html deleted file mode 100644 index ee61ae1e5f..0000000000 --- a/files/fr/archive/mozilla/xul/guide_des_popups/ouverture_et_fermeture/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: Ouverture et fermeture -slug: Archive/Mozilla/XUL/Guide_des_popups/Ouverture_et_fermeture -tags: - - Guide Popup XUL - - XUL -translation_of: Archive/Mozilla/XUL/PopupGuide/OpenClose ---- -<h3 id="Ouverture_et_fermeture_de_popups" name="Ouverture_et_fermeture_de_popups">Ouverture et fermeture de popups</h3> - -<p>Les popups et menus peuvent être ouverts et fermés depuis un script.</p> - -<h4 id="Ouverture_d.27un_menu" name="Ouverture_d.27un_menu">Ouverture d'un menu</h4> - -<p>Les menus s'afficheront d'eux-mêmes automatiquement dès que nécessaire sans aucun travail supplémentaire. Par exemple, le popup d'un menu s'ouvrira lors d'un clic sur le label de menu, et un sous-menu s'ouvrira lors du passage de la souris sur l'élément du menu parent.</p> - -<p>Cependant, vous pourrez vouloir ouvrir un menu manuellement dans certaines situations. L'élement <code>menu</code> a une propriété <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/open">open</a></span></code> qui peut être définie à <code>true</code> pour ouvrir le menu, ou <code>false</code> pour le fermer. Un exemple simple :</p> - -<pre>un_menu.open = true; -</pre> - -<p>Cette unique ligne de code ouvrira un menu référencé par la variable « un_menu ». Notez que la propriété <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/open">open</a></span></code> s'applique au menu ou au bouton, pas à l'élément menupopup. Voici un exemple complet utilisant un bouton pour ouvrir un menu :</p> - -<pre><button label="Ouvrir un menu" - oncommand="document.getElementById('editMenu').open = true;"/> - -<menu id="editMenu" label="Édition"> - <menupopup> - <menuitem label="Couper"/> - <menuitem label="Copier"/> - <menuitem label="Coller"/> - </menupopup> -</menu> -</pre> - -<p>Cette technique peut être utilisée pour les menupopups qui utilisent la balise <code>menu</code> tant que pour ceux qui utilisent les balises <code>button</code> et <code>toolbarbutton</code>. Pour les menupopups attachés à d'autres éléments à l'aide des attributs <code id="a-popup"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/popup">popup</a></code> ou <code id="a-context"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/context">context</a></code>, consultez <a href="#Ouverture_d.27un_popup">Ouverture d'un popup</a> plus bas.</p> - -<p>Comme avec les autres manières d'ouvrir un menu, l'évènement <code>popupshowing</code> sera déclenché pour permettre de personnaliser les commandes apparaissant dans le menu.</p> - -<p>Dans certaines situations, il n'est pas permis d'ouvrir un menu :</p> - -<ul> - <li>si le menu est déjà ouvert, ou en cours d'ouverture. Naturellement, essayer d'ouvrir un menu qui est déjà ouvert n'aura aucun effet.</li> - <li>si le menu est l'enfant d'un autre menu et que ce menu parent n'est pas ouvert. Dans ce cas, le menu parent doit d'abord être ouvert. Si vous voulez ouvrir un sous-menu, ouvrez d'abord le menu parent, puis le sous-menu dans un gestionnaire d'évènement <code>popupshown</code>. Consultez <a href="fr/XUL/Guide_des_popups/%c3%89v%c3%a8nements_des_popups#L.27.C3.A9v.C3.A8nement_popupshown">L'évènement popupshown</a> pour un exemple de réalisation.</li> - <li>un menu dans une fenêtre de contenu sans privilèges (comme une page Web) ne peut ouvrir un popup que si sa fenêtre a le focus, et qu'il est dans l'onglet actif. Cela signifie qu'un document dans un onglet d'arrière-plan ne peut ouvrir de menu ou de popup.</li> -</ul> - -<h4 id="Fermeture_d.27un_menu" name="Fermeture_d.27un_menu">Fermeture d'un menu</h4> - -<p>Un menu se fermera automatiquement une fois que l'utilisateur a fait une sélection depuis celui-ci. Lorsqu'un élément de menu est sélectionné, il déclenche un évènement de commande afin que du code puisse être utilisé pour effectuer une action. L'utilisateur peut annuler la sélection d'une commande en appuyant sur la touche Échap. Ceci fermera un menu simple, mais s'il avait un menu parent, celui-ci restera ouvert. Un utilisateur peut également annuler la sélection en cliquant end ehors du menu. Dans ce cas, non seulement le menu sera fermé, mais tous les menus parents le seront également.</p> - -<p>Un menu peut être fermé par un script en définissant la propriété <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/open">open</a></span></code> à <code>false</code>, le contraire de ce qu'on ferait pour ouvrir le menu. La propriété <code>open</code> s'applique au menu ou au bouton, mais pas au <code>menupopup</code>.</p> - -<pre>un_menu.open = false; -</pre> - -<p>Cette commande fermera uniquement un seul niveau de menus, de sorte que tout menu parent devra être fermé avec une commande semblable si nécessaire. Cependant, les éventuels menus enfants de « un_menu » dans cet exemple seront fermé puisque celui-ci ne sera plus ouvert. Par exemple, disons qu'un menu Fichier a un sous-menu contenant une liste de fichiers récemment utilisés. Si les deux menus sont ouverts et que l'on met la propriété <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/open">open</a></span></code> du sous-menu à <code>false</code>, celui-ci sera fermé mais le menu Fichier parent restera ouvert. D'un autre côté, si c'est la propriété <code>open</code> du menu Fichier qui est mise à <code>false</code>, les deux menus se fermeront.</p> - -<p>Cette technique peut être utilisée tant pour les menupopups qui utilisent les balises <code>menu</code> et <code>button</code> que <code>toolbarbutton</code>. Pour les menupopups attachés à d'autres éléments à l'aide des attributs <code id="a-popup"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/popup">popup</a></code> ou <code id="a-context"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/context">context</a></code>, consultez <a href="#Fermeture_d.27un_popup_avec_la_m.C3.A9thode_hidePopup">Fermeture d'un popup</a> plus bas.</p> - -<p>Lorsqu'un menu est fermé, l'évènement <code>popuphiding</code> est déclenché sur celui-ci. On peut donc attacher un écouteur sur cet évènement pour retirer toute commande qui avait été ajoutée au cours de l'évènement <code>popupshowing</code>.</p> - -<p>Les menus et popups seront également fermés lorsque le document ou la fenêtre dans lesquels ils sont contenus seront fermés, ou si l'élément <code>menupopup</code> est retiré du document. Ce sont des situations dans lesquelles les évènements <code>popuphiding</code> et <code>popuphidden</code> peuvent ne pas se déclencher étant donné que les éléments concernés ne sont plus disponibles. Si des actions spécifiques doivent être effectués à ce moment-là, il vaut mieux utiliser un évènement <code>unload</code>.</p> - -<h4 id="Test_de_l.27.C3.A9tat_d.27ouverture_d.27un_menu" name="Test_de_l.27.C3.A9tat_d.27ouverture_d.27un_menu">Test de l'état d'ouverture d'un menu</h4> - -<p>Pour vérifier si un menu est ouvert, vérifiez l'état de sa propriété <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/open">open</a></span></code>. Si celle-ci vaut <code>true</code>, le menu est ouvert, sinon il est fermé.</p> - -<pre>var open = un_menu.open; -</pre> - -<h4 id="Ouverture_d.27un_popup" name="Ouverture_d.27un_popup">Ouverture d'un popup</h4> - -<p>Pour ouvrir des popups de menu utilisant les balises <code>menu</code>, <code>button</code> et <code>toolbarbutton</code>, consultez <a href="#Ouverture_d.27un_menu">Ouverture d'un menu</a> plus haut.</p> - -<p>Les popups attachés à l'aide de l'attribut <code id="a-popup"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/popup">popup</a></code> sont ouverts lors d'un clic gauche de la souris par l'utilisateur. Il n'y a pas moyen d'effectuer la même action à partir du clavier, vous devrez donc toujours fournir une manière alternative d'accéder aux fonctionnalités du menu. Cela peut se faire soit en plaçant des commandes alternatives ailleurs dans l'interface, ou en fournissant un raccourci clavier permettant d'ouvrir le menu. Une fois que celui-ci est ouvert, le clavier peut être utilisé pour y naviguer et sélectionner des éléments de la manière habituelle.</p> - -<p>Les popups attachés à l'aide de l'attribut <code id="a-context"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/context">context</a></code> sont ouvert lorsque l'utilisateur effectue une action essayant d'ouvrir un menu contextuel. Cette action diffère selon la plateforme, mais en général il s'agit de cliquer sur l'élément avec le bouton de droite de la souris. Sur les systèmes Macintosh avec un seul bouton, un menu contextuel peut être ouvert soit en maintenant le bouton de la souris enfoncé, soit en appuyant sur la touche Control lors du clic sur le bouton. Sous Windows, le menu contextuel peut également être ouvert à l'aide de la touche menu sur le clavier (Il s'agit de la touche figurant sur de nombreux claviers à côté de la touche Ctrl de droite avec une image de menu) ou en appuyant sur Shift+F10. Pour cette raison, il ne faut pas supposer que l'utilisateur a forcément utilisé la souris pour ouvrir le menu contextuel.</p> - -<h5 id="La_m.C3.A9thode_openPopup" name="La_m.C3.A9thode_openPopup">La méthode openPopup</h5> - -<p>Quel que soit le type de popup, il peut être nécessaire de l'ouvrir programmatiquement. Pour ce faire, utilisez la méthode <span id="m-openPopup"><code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Méthodes/openPopup">openPopup</a></code></span> du popup. Cette méthode peut être utilisée pour tout type de popup, qu'il s'agisse d'un menupopup, d'un panel ou un tooltip, même ceux qui peuvent être ouverts par d'autres moyens, par exemple un popup attaché par l'attribut <code id="a-context"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/context">context</a></code>.</p> - -<p>La méthode <span id="m-openPopup"><code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Méthodes/openPopup">openPopup</a></code></span> peut recevoir six paramètres qui sont utilisés pour indiquer comment et où le popup doit être positionné. Ils seront décrits plus loin. La méthode <code>openPopup</code> est définie comme suit :</p> - -<pre>void openPopup(in DOMElement anchorElement, - in String position, - in long x, - in long y, - in boolean estMenuContextuel, - in boolean ecraserAttributs); -</pre> - -<p>Tout d'abord, un exemple :</p> - -<pre>un_popup.openPopup(ancre, "after_start", 0, 0, false, false); -</pre> - -<p>Cet exemple ouvrira un popup situé juste sous un autre élément référencé par « ancre ». Ceci émula la façon dont s'ouvre un menu, où « ancre » serait l'élément <code><a href="/fr/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code>. Il est possible d'utiliser la méthode <code>openPopup</code> avec un menu, cependant il est plus facile de définir simplement l'attribut <code id="a-open"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/open">open</a></code> du menu à <code>true</code>, ce qui gèrera le positionnement du menu à votre place. Notez que si l'attribut open s'applique au menu ou bouton parent, la méthode <code>openPopup</code> s'applique à l'élément menupopup.</p> - -<p>L'ancre d'un popup est le nœud élément à côté duquel le popup sera affiché. Par exemple, pour qu'un popup apparaisse à côté d'un bouton, passez une référence au bouton comme premier paramètre de la méthode <code>openPopup</code>. Dans cet exemple, le popup sera ouvert relativement à l'élément du document.</p> - -<pre>un_popup.openPopup(document.documentElement, "end_before", 0, 0, false, false); -</pre> - -<p>Le second paramètre d'openPopup est la <code>position</code> par rapport à l'ancre, qui indique de quel côté de celle-ci le popup sera positionné. Par exemple, la valeur « end_before » utilisée dans l'exemple précédent indique de placer le côté gauche du popup le long du bord droit de l'élément d'ancrage, avec les deux bords supérieurs alignés. Cela peut être compliqué à comprendre, consultez alors <a href="fr/XUL/Guide_des_popups/Positionnement">Positionnement d'un popup</a> qui décrit ce processus plus en détail et fournit des images montrant les valeurs possibles et la façon dont serait aligné un popup pour chacune des valeurs.</p> - -<p>Les troisième et quatrième paramètres d'openPopup sont des décalages <code>x</code> et <code>y</code>. Après le positionnement initial du popup, il est possible de l'ajuster en spécifiant des valeurs non nulles pour ces décalages. Ceci permet de contrôler précisément le popup tout en étant toujours ancré à un élément particulier. Des valeurs positives peuvent être utilisées pour ajuster le popup vers la droite ou vers le bas et des valeurs négatives pour l'ajuster vers la gauche ou le haut.</p> - -<p>Dans l'exemple qui suit, le popup est ancré sous un élément, tout en étant décalé de 10 pixels vers la droite et de 2 pixels vers le haut.</p> - -<pre>un_popup.openPopup(ancre, "after_start", 10, -2, false, false); -</pre> - -<p>Notez que l'ancre et les décalages spécifient uniquement la position lors de l'ouverture du popup. Si l'ancre est déplacée ou supprimée tandis que le popup est ouvert, le popup ne suivra pas. Cependant, il est possible de déplacer un popup pendant qu'il est ouvert, consultez <a href="fr/XUL/Guide_des_popups/D%c3%a9placement_et_redimensionnement">Déplacement et redimensionnement d'un popup</a>.</p> - -<p>Le cinquième paramètre d'openPopup, <code>isContextMenu</code>, indique si le popup est ouvert comme un menu contextuel. Passez <code>true</code> si c'est le cas et <code>false</code> dans le cas contraire. Le valeur à passer devrait être évidente selon l'endroit dont vous appelez openPopup. Notez que le même menu peut être ouvert des deux manières, ce paramètre n'influe donc pas sur la manière dont le popup apparaît. Ce qu'il modifie est la manière dont le focus et la sélection du menu sont gérés. Tant que vous passez la bonne valeur par rapport à la situation, il n'est pas très important de connaître les différences particulières entre les deux cas.</p> - -<p>Cependant, vous pouvez voir l'effet de ce paramètre en utilisant les marque-pages de Firefox. Essayez d'ouvrir un sous-menu des marque-pages et notez comme la sélection change toujours lorsque la souris est déplacé vers d'autres menus, et la manière dont le sous-menu est fermé lorsque la souris le quitte. Ouvrez à présent un menu contextuel sur le même marque-page et remarquez que les autres menus ne sont pas affectés par le mouvement de la souris. C'est cette différence qui est gérée par le paramètre isContextMenu.</p> - -<p>Enfin, le dernier paramètre de la méthode <code>openPopup</code>, <code>ecraserAttributs</code> indique si les attributs placés sur l'élément popup écrasent les paramètres fournis. Ceci permet à un popup d'utiliser un comportement particulier de positionnement avec les attributs <code id="a-position"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/position">position</a></code>, <code id="a-left"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/left">left</a></code> et <code id="a-top"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/top">top</a></code> à la place. Plus de détails sur ces attributs peuvent être trouvés dans la section <a href="fr/XUL/Guide_des_popups/Positionnement">Positionnement d'un popup</a>.</p> - -<h5 id="Popups_non_ancr.C3.A9s_avec_openPopup" name="Popups_non_ancr.C3.A9s_avec_openPopup">Popups non ancrés avec openPopup</h5> - -<p>Si le premier paramètre de la méthode <span id="m-openPopup"><code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Méthodes/openPopup">openPopup</a></code></span> vaut <code>null</code>, un popup non ancré est créé. Dans ce cas, le deuxième argument de positionnement n'est pas utilisé et une chaîne vide peut être utilisée. Voici un exemple :</p> - -<pre>un_popup.openPopup(null, "", 60, 50, false, false); -</pre> - -<p>Un popup non ancré utilise les décalages x et y, dans ce cas 60 et 50 sont des décalages depuis le coin de la fenêtre ou du cadre. De cette manière, un popup peut être positionné relativement à la fenêtre plutôt qu'à un nœud spécifique. Par exemple, il peut être intéressant d'ouvrir un popup à la position courante de la souris au moment du clic. Voici un exemple de gestionnaire d'évènement de clic de souris :</p> - -<pre>function mouseClicked(event) -{ - var panel = document.getElementById("un-panel"); - panel.openPopup(null, "", event.clientX, event.clientY, false, false); -} -</pre> - -<h5 id="La_m.C3.A9thode_openPopupAtScreen" name="La_m.C3.A9thode_openPopupAtScreen">La méthode openPopupAtScreen</h5> - -<p>Une seconde méthode, <span id="m-openPopupAtScreen"><code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Méthodes/openPopupAtScreen">openPopupAtScreen</a></code></span>, peut être utilisée pour ouvrir un popup et le placer à des coordonnées précise sur l'écran. Dans ce cas, le popup n'est pas ancré à un élément et apparaît simplement à l'emplacement spécifié par les paramètres <code>x</code> et <code>y</code> passés à cette méthode.</p> - -<pre>void openPopupAtScreen(in long x, in long y, in boolean estMenuContextuel); -</pre> - -<p>Le paramètre <code>ecraserAttributs</code> indique qu'un menu contextuel est ouvert et fonctionne de la même façon que pour la méthode <code>openPopup</code>. Dans l'exemple qui suit, le popup est ouvert à la position horizontale 100 et à la position verticale 200 :</p> - -<pre>popup.openPopupAtScreen(100, 200, false); -</pre> - -<p>Notez que si les coordonnées fournies auraient conduit à un popup situé partiellement ou totalement hors de l'écran, celui-ci sera déplacé de manière à être totalement visible, et pourra être redimensionné si nécessaire.</p> - -<h4 id="Fermeture_d.27un_popup_avec_la_m.C3.A9thode_hidePopup" name="Fermeture_d.27un_popup_avec_la_m.C3.A9thode_hidePopup">Fermeture d'un popup avec la méthode hidePopup</h4> - -<p>Un menu popup est fermé par l'utilisateur en appuyant sur la touche Échap ou en cliquant quelque part en dehors du popup.</p> - -<p>Pour fermer des menupopups utilisant les balises <code>menu</code>, <code>button</code> et <code>toolbarbutton</code>, consultez <a href="#Fermeture_d.27un_menu">Fermeture d'un menu</a> plus haut.</p> - -<p>Pour fermer un menu depuis un script utilisez sa méthode <span id="m-hidePopup"><code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Méthodes/hidePopup">hidePopup</a></code></span>. Elle ne prend aucun paramètre.</p> - -<pre>popup.hidePopup(); -</pre> - -<h4 id="D.C3.A9terminer_si_un_popup_est_ouvert" name="D.C3.A9terminer_si_un_popup_est_ouvert">Déterminer si un popup est ouvert</h4> - -<p>Pour les menus, il est possible de vérifier la propriété <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/open">open</a></span></code> de l'élément menu, button ou toolbarbutton. Si celle-ci vaut <code>true</code>, le menu est ouvert.</p> - -<p>Pour les autres types de popups, la propriété <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/state">state</a></span></code> peut être examinée à cette fin. Elle est disponible pour tous les types de popups, qu'il s'agisse de menus, panels ou de tooltips. Lorsqu'un menu est fermé, la propriété <code>state</code> aura la valeur <code>closed</code>, tandis que pour un popup visible, elle aura la valeur <code>open</code>. Cette propriété est en lecture seule et s'applique aux éléments <code><a href="/fr/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code>, <code><a href="/fr/docs/Mozilla/Tech/XUL/panel" title="panel">panel</a></code> ou <code><a href="/fr/docs/Mozilla/Tech/XUL/tooltip" title="tooltip">tooltip</a></code>.</p> - -<p>La propriété <code>state</code> peut également avoir deux autres valeurs, utilisées lorsqu'un popup est en train de passer de l'état ouvert à l'état fermé et vice versa. Lorsqu'un popup est en train de s'ouvrir, la propriété <code>state</code> a une valeur de <code>showing</code> tandis qu'elle aura une valeur <code>hiding</code> au cours de de sa fermeture. La première se rencontrera au cours de l'évènement <a href="fr/XUL/Guide_des_popups/%c3%89v%c3%a8nements_des_popups#L.27.C3.A9v.C3.A8nement_popupshowing">popupshowing</a>, tandis que la seconde se rencontrera au cours de l'évènement <a href="fr/XUL/Guide_des_popups/%c3%89v%c3%a8nements_des_popups#L.27.C3.A9v.C3.A8nement_popuphiding_event">popuphiding</a>.</p> - -<p>Par exemple, la propriété <code>state</code> pourrait être utilisée pour déterminer si un <code>panel</code> est déjà ouvert. Si c'est le cas, vous pouvez vouloir éviter de manipuler l'interface utilisateur de la fenêtre principale, étant donné que l'utilisateur ne sera plus directement en train d'interagir avec elle.</p> - -<div class="noinclude"> </div> diff --git a/files/fr/archive/mozilla/xul/guide_des_popups/panels/index.html b/files/fr/archive/mozilla/xul/guide_des_popups/panels/index.html deleted file mode 100644 index 8ebe7d2ea8..0000000000 --- a/files/fr/archive/mozilla/xul/guide_des_popups/panels/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Panneaux (panels) -slug: Archive/Mozilla/XUL/Guide_des_popups/Panels -tags: - - Guide Popup XUL - - XUL -translation_of: Archive/Mozilla/XUL/PopupGuide/Panels ---- -<p>Un panneau est une fenêtre contextuelle pouvant gérer n'importe quel type de contenu. On l'utilise notamment comme support d'affichage temporaire pour la sélection ou la saisie de données.</p> - -<h2 id="L.27.C3.A9l.C3.A9ment_panel" name="L.27.C3.A9l.C3.A9ment_panel">L'élément panel</h2> - -<p>L'élément <code><a href="/fr/docs/Mozilla/Tech/XUL/panel" title="panel">panel</a></code> sert à créer des panneaux permettant d'afficher une série d'éléments quelconques, placés comme enfants de l'élément "panel". Par exemple, le "panel" suivant affichera une boîte de texte pour entrer un nom. Notez que le panneau n'est pas placé dans un fichier distinct et est placé à l'intérieur d'une autre fenêtre.</p> - -<pre class="line-numbers language-html"><code class="language-html"><span class="prolog token"><?xml-stylesheet href="chrome://global/skin" type="text/css"?></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>window</span> <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">label</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Details<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>panel<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>panel</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>search-panel<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">control</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>name<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Name:<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>textbox</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>name<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>panel</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>window</span><span class="punctuation token">></span></span></code></pre> - -<p>De nombreux panneaux seront associés à un bouton, comme dans cet exemple. Lorsque vous appuyez sur le bouton, le panneau est ouvert. En cliquant à l'extérieur du panneau ou en appuyant sur "Escape" (échappe), le panneau se ferme. Vous pouvez également placer un bouton de fermeture dans le panneau qui le fermera avec un script, si vous le souhaitez. Lorsque vous voulez associer un panneau à un bouton, placez l'élément <panel> directement à l'intérieur de l'élément <code><a href="/fr/docs/Mozilla/Tech/XUL/button" title="button">button</a></code> . Vous devez aussi déterminer un attribut "type" avec la valeur "panel", ou le bouton se comportera comme un bouton régulier.</p> - -<p>Le panneau contextuel apparaît par défaut dans le coin en haut à gauche, juste sous le bord inférieur du bouton, comme le ferait un menu. Toutefois, la position peut être modifiée. Pour plus d'informations sur la position du panneau contextuel, voir <a href="https://developer.mozilla.org/en/XUL/PopupGuide/Positioning" title="en/XUL/PopupGuide/Positioning">Positioning Popups</a> (en).</p> - -<p>Seuls les boutons (et les boutons de la barre d'outils) ont ce comportement automatique d'ouverture de la fenêtre contextuelle lorsqu'ils sont pressés. Pour d'autres types d'éléments, vous devrez utiliser une technique différente comme dans l'exemple suivant :</p> - -<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token">label</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Search<span class="punctuation token">"</span></span> <span class="attr-name token">popup</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>search-panel<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>panel</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>search-panel<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">control</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>search<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Terms:<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>textbox</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>search<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>panel</span><span class="punctuation token">></span></span></code></pre> - -<p><img alt="Image:Popupguide-panel.png" class="internal" src="https://developer.mozilla.org/@api/deki/files/304/=Popupguide-panel.png"></p> - -<p>Pour attacher un panneau à un élément qui n'est pas un bouton, par exemple pour qu'il s'ouvre lors de l'appui sur une étiquette, utilisez l'attribut <code id="a-popup"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/popup">popup</a></code>. Celui-ci doit être défini comme l'id d'un "panel" au sein du même document. Lors d'un clic gauche sur l'élément portant l'attribut <code id="a-popup"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/popup">popup</a></code>, le panneau correspondant s'affichera. Par exemple, pour attacher le panneau contextuel défini plus haut à une étiquette, utilisez le code qui suit :</p> - -<pre><label value="Rechercher" popup="search-panel"/> -</pre> - -<p>Le résultat est un bouton de recherche ouvrant un panneau permettant d'entrer des termes de recherche. Celui-ci apparaîtra avec son coin supérieur gauche à la position de la souris. Dans ce cas, il serait sans doute préférable qu'il apparaisse plutôt en dessous de l'étiquette. L'attribut <code id="a-position"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/position">position</a></code> peut être utilisé afin de contrôler le placement du panneau contextuel. Voici un exemple complet :</p> - -<pre><panel id="search-panel" position="after_start"> - <label control="search" value="Termes :"/> - <textbox id="search"/> -</panel> - -<label value="Recherche" popup="search-panel"/> -</pre> - -<p>L'attribut <code id="a-position"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/position">position</a></code> a été ajouté à l'élément "panel" avec la valeur « <code>after_start</code> ». Le résultat en est que le panel n'est plus affiché là où l'on a cliqué, mais le long du bord inférieur de l'étiquette. Pour plus d'informations concernant cet attribut et les autres valeurs possibles, consultez <a href="fr/XUL/Guide_des_popups/Positionnement">Positionnement des popups (en)</a>.</p> - -<p>Il est également possible d'ouvrir un panneau comme un menu contextuel à l'aide de l'attribut <code id="a-context"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/context">context</a></code> à la place de l'attribut "popup". Celui-ci fonctionne de la même manière qu'un menu contextuel, à part qu'on utilise un élément "panel" à la place d'un élément "menupopup". Consultez <a href="fr/XUL/Guide_des_popups/Menus_contextuels">Menus contextuels (en)</a> pour plus de détails à ce sujet.</p> - -<h2 id="Ouverture_d.27un_panel_par_script" name="Ouverture_d.27un_panel_par_script">Ouverture d'un panneau par script</h2> - -<p>Un panneau, comme toutes les fenêtres contextuelles, dispose d'une méthode <span id="m-openPopup"><code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Méthodes/openPopup">openPopup</a></code></span> pouvant être utilisée pour son ouverture à partir d'un script. Par exemple, le code suivant ouvrirait un panneau sous un bouton :</p> - -<pre class="line-numbers language-html"><code class="language-html">panel.openPopup(button, "after_start", 0, 0, false, false);</code></pre> - -<p>De manière similaire, la méthode <span id="m-openPopupAtScreen"><code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Méthodes/openPopupAtScreen">openPopupAtScreen</a></code></span> ouvrira un panneau à une position précise de l'écran. Pour plus de détails concernant ces deux méthodes, consultez <a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Guide_des_popups/Ouverture_et_fermeture">Ouverture et fermeture de fenêtres contextuelles</a>.</p> - -<h2 id="Fermeture_d.27un_panel" name="Fermeture_d.27un_panel">Fermeture d'un panneau</h2> - -<p>Un panneau est fermé automatiquement lorsque l'utilisateur clique en dehors de celui-ci. Il est cependant courant d'avoir un élément comme un bouton de fermeture dans le panneau. Par exemple, dans le panneau de recherche présenté plus haut, nous pourrions ajouter un bouton fermant le panneau lorsqu'il est utilisé :</p> - -<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> -<span class="keyword token">function</span> <span class="function token">doSearch</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"search-panel"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">hidePopup</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>toolbarbutton</span> <span class="attr-name token">label</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Rechercher<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>panel<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>panel</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>search-panel<span class="punctuation token">"</span></span> <span class="attr-name token">position</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>after_start<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>textbox</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>search<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">label</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Rechercher<span class="punctuation token">"</span></span> <span class="attr-name token">oncommand</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>doSearch();<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>panel</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>toolbarbutton</span><span class="punctuation token">></span></span></code></pre> - -<p>Dans cet exemple, la fonction <code>doSearch</code> est appelée lors d'un clic sur le bouton "Rechercher". La fonction identifie le panneau contextuel et appelle sa méthode <span id="m-hidePopup"><code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Méthodes/hidePopup">hidePopup</a></code></span>. Naturellement, cette fonction devrait également comprendre des instructions pour lancer l'opération de recherche proprement dite.</p> - -<h3 id="L.27attribut_noautohide" name="L.27attribut_noautohide">Interdiction de fermeture automatique des panneaux</h3> - -<p>Un panneau contextuel est fermé par un clic de l'utilisateur en-dehors de celui-ci ou l'appui sur la touche Échap. C'est la manière habituelle, pour un utilisateur, d'annuler l'opération. Il peut également être utile de placer un bouton d'annulation ou de fermeture dans le panneau, en particulier si celui-ci est grand et contient un grand nombre de contrôles.</p> - -<p>Cependant parfois, vous voudrez peut-être que le panneau reste ouvert même si l'utilisateur clique en dehors de celui-ci. C'est notamment utile pour créer des panneaux d'outils flottants. Pour ce faire, positionnez son attribut <code id="a-noautohide"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/noautohide">noautohide</a></code> sur <code>"true" (vrai)</code>.</p> - -<pre><panel id="search-panel" noautohide="true"> - <textbox id="search"/> - <button label="Rechercher" oncommand="doSearch();"/> - <button label="Annuler" oncommand="this.parentNode.hidePopup();"/> -</panel> -</pre> - -<p>Comme le panneau ne peut plus être fermé en cliquant ailleurs, il doit toujours fournir un moyen de le faire. Dans cet exemple, on a ajouté un bouton Annuler.</p> - -<h2 id="Le_focus_dans_les_panels" name="Le_focus_dans_les_panels">Focus sur les panneaux</h2> - -<p>Les éléments se trouvant dans des panneaux peuvent recevoir le focus de la souris, et l'élément ayant le focus peut changer en appuyant sur la touche Tab. Lors de l'ouverture d'un panneau contextuel, si un élément de la fenêtre principale a le focus, il le perd et reçoit un évènement <code>blur</code>. Bien qu'aucun élément du panneau ne reçoive le focus par défaut, l'utilisateur peut le donner à son premier élément en appuyant sur la touche Tab. Si vous désirez qu'il se trouve sur un élément particulier par défaut, lors de l'ouverture de panneau, modifiez le focus dans le gestionnaire d'évènement <code>popupshown</code>. Par exemple, pour que la boîte de texte de l'exemple précédent reçoive le focus initial :</p> - -<pre><panel id="search-panel" onpopupshown="document.getElementById('search').focus()"> -</pre> - -<p>Pour désactiver l'ajustement du focus à l'ouverture d'un panneau, définissez l'attribut <code id="a-noautofocus"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/noautofocus">noautofocus</a></code> à <code>true</code> :</p> - -<pre><panel noautofocus="true"> -</pre> - -<p>Dans ce cas, le focus restera sur l'élément de la fenêtre principale qui avait le focus à l'ouverture du panneau. Notez que cela maintient également le focus à l'intérieur du panneau quand celui-ci est fermé.</p> - -<p>Lors de la fermeture d'un panneau, l'élément au sein de celui-ci, qui avait éventuellement le focus, le perd. L'élément qui avait le focus avant l'ouverture de la fenêtre contextuelle, quel qu'il soit, le récupère. Vous pouvez empêcher la suppression du focus avec l'attribut <code id="a-noautofocus"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/noautofocus">noautofocus</a></code> défini à true. De plus, l'attribut XULAttr("norestorefocus") }} positionné sur true empêche le retour du focus sur l'élément qui l'avait avant. Normalement, seul ce dernier sera défini si besoin.</p> - -<p>Ce processus de perte du focus à l'ouverture et à la fermeture d'un popup se déroule après le déclenchement des évènements <code>popupshowing</code> ou <code>popuphiding</code>, ce qui signifie que si ces évènements sont annulés, le focus ne sera pas perdu.</p> - -<div class="headingWithIndicator"> - <h1 id="Letting_panels_be_dragged_by_grabbing_the_background">Letting panels be dragged by grabbing the background</h1> - <span class="indicatorInHeadline minVer geckoMinVerMethod">Requires Gecko 7.0(Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4)</span> -</div> (faire glisser les panneaux sur l'arrière-plan) - -<p>À partir de Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4), vous pouvez utiliser l'attribut <code id="a-backdrag"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/backdrag">backdrag</a></code> pour créer des panneaux que l'utilisateur peut faire glisser (cliquer/glisser) n'importe où sur l'arrière-plan. C'est un simple attribut booléen, avec lequel vous pouvez activer cette fonctionnalité comme ceci :</p> - -<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token">panel</span> <span class="attr-name token">backdrag</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>true<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> |