4.6 Séparateurs

Attention : Ce tutoriel est ancien et n'est pas mis à jour. Bien que beaucoup d'informations soient encore valables pour les dernières versions de gecko, beaucoup sont aussi obsolètes. Il est préférable d'aller consulter cette page sur la version française de ce tutoriel sur developer.mozilla.org.

Ici, nous allons voir comment ajouter des séparateurs dans une fenêtre.

Découpage d'une boîte

Il arrive des fois où vous voulez disposer de deux sections dans une fenêtre que l'utilisateur peut redimensionner à son gré. Un exemple est la fenêtre du navigateur Mozilla, où vous pouvez changer la taille du panneau latéral en déplaçant le trait d'intersection des deux cadres. Vous pouvez aussi cacher ce panneau latéral en cliquant sur la poignée de ce trait.

Élément splitter

Cette fonctionnalité est accomplie en utilisant un élément appelé splitter. Il crée une barre étroite entre les deux sections en permettant de redimensionner chaque côté. Vous pouvez placer un séparateur où vous voulez pour vous permettre de redimensionner les éléments situés avant lui et les éléments situés après lui dans une même boîte.

Lorsqu'un séparateur est placé à l'intérieur d'une boîte horizontale, il permet un redimensionnement horizontal. Lorsqu'un séparateur est placé à l'intérieur d'une boîte verticale, il permet un redimensionnement vertical.

La syntaxe d'un séparateur est la suivante :

<splitter
   id="identifier"
   state="open"
   collapse="before"
   resizebefore="closest"
   resizeafter="closest"/>

Les attributs sont les suivants :

id

L'identifiant unique d'un séparateur.

state

Indique l'état d'un séparateur. Mettez lui la valeur open, valeur par défaut, pour que le panneau redimensionnable soit initialement ouvert ou mettez lui la valeur collapsed pour qu'un des panneaux soit complètement réduit et que l'autre occupe toute la place.

collapse

Il indique de quel côté le panneau doit se réduire quand la poignée du séparateur est cliquée ou quand le séparateur est initialisée avec un état collapsed. Mettez lui la valeur before pour désigner l'élément avant le séparateur ou la valeur after pour désigner l'élément après le séparateur. Si vous l'initialisez avec la valeur none, qui est aussi la valeur par défaut, la poignée du séparateur ne réduira pas les panneaux quand elle est cliquée.

resizebefore

Lorsqu'un séparateur est déplacé, les éléments sur sa gauche sont redimensionnés. Cet attribut indique quel élément est concerné. Mettez la valeur closest pour que l'élément immédiatement à gauche du séparateur soit redimensionné. Mettez la valeur farthest pour que l'élément le plus éloigné à gauche du séparateur soit redimensionné (le premier élément de la boîte). La valeur par défaut est closest.

resizeafter

Lorsqu'un séparateur est déplacé, les éléments sur sa droite sont redimensionnés. Cet attribut indique quel élément est concerné. Mettez la valeur closest pour que l'élément immédiatement à droite du séparateur soit redimensionné. Mettez la valeur farthest pour que l'élément le plus éloigné à droite du séparateur soit redimensionné (le dernier élément de la boîte). Cet attribut peut aussi avoir la valeur grow, dans ce cas, les éléments à droite du séparateur ne changent pas de taille lorsque le séparateur est déplacé. La valeur par défaut est closest.

Si vous employez l'attribut collapse, vous devrez aussi ajouter l'élément grippy à l'intérieur de l'élément splitter afin que l'utilisateur puisse utiliser la poignée pour réduire un panneau.

Exemple avec splitter

Un exemple vous sera utile :

Exemple 4.6.1 : Source Voir

<hbox flex="1">
   <iframe id="content-1" width="60" height="20" src="w1.html"/>
   <splitter collapse="before" resizeafter="farthest">
     <grippy/>
   </splitter>
   <iframe id="content-2" width="60" height="20" src="w2.html"/>
   <iframe id="content-3" width="60" height="20" src="w3.html"/>
   <iframe id="content-4" width="60" height="20" src="w4.html"/>
</hbox>

Ici, quatre cadres iframe ont été créés et un séparateur a été placé entre le premier et le second. L'attribut collapse a été affecté d'une valeur before pour signifier que si la poignée est cliquée, le premier cadre va disparaître, et le séparateur et les cadres restants vont glisser vers la gauche. La poignée du séparateur est centrée sur la barre de séparation.

La valeur farthest a été affectée à l'attribut resizeafter du séparateur. Elle signifie que lorsque le séparateur est déplacé, l'élément le plus éloigné après lui changera sa taille. Dans ce cas, il s'agit du quatrième cadre.

Aucune valeur n'a été spécifiée pour l'attribut resizebefore qui aura donc sa valeur closest par défaut. Dans ce cas, il n'y a qu'un cadre avant le séparateur, c'est donc le premier cadre qui changera de taille.

Les deuxième et troisième cadres ne changeront leur taille que si vous déplacez le séparateur suffisamment loin sur la droite jusqu'à ce que le quatrième cadre ait atteint sa largeur minimale.

Les quatre cadres avec le séparateur dans un état réduit :

Une image des quatre cadres avec le séparateur redimensionné vers la droite est montrée ci dessous. Notez que les deux cadres du milieu n'ont pas changé leur dimension. Seuls les premier et quatrième cadres ont changé de dimension. Vous pouvez seulement voir une partie du quatrième cadre. Si vous continuez à déplacer le séparateur vers la droite, les deux autres cadres vont se réduire.

Vous pouvez utiliser des propriétés de style telles que min-width, max-width sur les cadres pour spécifier leurs largeurs minimales ou maximales ou leurs hauteurs dans la boîte. Si vous faites cela, le séparateur va le détecter et ne permettra pas de le déplacer au-delà des tailles minimales ou maximales.

Par exemple, si vous spécifiez un minimum de 30 pixels en largeur sur le quatrième cadre, il ne se réduira pas en dessous de cette taille. Les deux autres cadres vont alors se réduire. Si vous mettez une largeur minimale de 50 pixels sur le premier cadre, vous ne pourrez déplacer le séparateur que de 10 pixels vers la gauche (car il démarre à 60 pixels de large). Toutefois, vous pouvez toujours faire disparaître le cadre.

Vous pouvez également placer plus d'un séparateur dans une boîte si vous le souhaitez, dans ce cas vous pourrez réduire les différentes parties de son contenu. De façon similaire, il n'y a pas que les cadres qui peuvent êre réduits, n'importe quel élément peut l'être.

</tabbox>

  <iframe src="results.html"/>
  <splitter resizeafter="grow"/>

  <hbox>

Dans la section suivante, nous verrons comment créer une barre de défilement.