4.7 Barres de défilement

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.

Maintenant, voyons comment ajouter des barres de défilement à une fenêtre.

Ajout de barres de défilement

Une barre de défilement est typiquement employée pour permettre à un utilisateur de parcourir un grand document. Vous pouvez aussi l'utiliser quand vous avez besoin de demander une valeur comprise entre un certain intervalle. Les barres de défilement peuvent être créées de différentes manières. Sous XUL, l'une d'entre elle nécessite l'emploi de la balise scrollbar. Certains éléments, comme des champs de saisie, vont également ajouter des barres de défilement si nécessaire lorsque leur contenu devient trop grand.

Dans cette section, nous verrons la création d'une barre de défilement seule. L'utilisateur choisira une valeur en déplaçant la barre de défilement. Vous n'utiliserez probablement pas très souvent cette méthode. Une barre de défilement est constituée de plusieurs partie, l'ascenseur, qui est la partie centrale de la barre, et les deux flèches boutons à chaque extrémités. Une barre de défilement crée tous ces éléments automatiquement.

La syntaxe d'une barre de défilement est la suivante :

<scrollbar
       id="identifier"
       orient="horizontal"
       curpos="20"
       maxpos="100"
       increment="1"
       pageincrement="10"/>

Les attributs sont les suivants :

id

L'identifiant unique de la barre de défilement.

orient

Il spécifie l'orientation de la barre de défilement. Sa valeur par défaut horizontal crée une barre qui s'étend de gauche vers la droite. Vous pouvez également spécifier vertical qui crée une barre s'étendant du haut vers le bas.

curpos

Il indique la position actuelle de l'ascenseur (le rectangle que vous pouvez déplacer). La valeur s'étend de 0 à la valeur de maxpos. Cette valeur n'a pas besoin d'unité. La valeur par défaut est de 0.

maxpos

Il indique la valeur de la position maximale de l'ascenseur. Il s'agit d'une valeur numérique qui n'a pas d'unité. La valeur par défaut est de 100.

increment

Ici, le nombre spécifie de combien la valeur de curpos doit être changée quand l'utilisateur clique sur une des flèches de la barre de défilement. La valeur par défaut est de 1.

pageincrement

Ici, le nombre spécifie de combien la valeur de curpos doit être changée quand l'utilisateur clique sur la page à travers la barre de défilement, c'est à dire dans la zone entre l'ascenseur et les flèches. La valeur par défaut est de 10.

L'exemple donné ci-dessus crée une barre de défilement qui s'étend des valeurs de 0 à 100. La valeur de 100 peut être considérée comme le nombre de ligne d'une liste, mais elle peut représenter n'importe quoi d'autre. La valeur initiale de cet exemple est de 20. Quand l'une des flèches de la barre de défilement est cliquée, la valeur incrémente ou décrémente de 1. En cliquant à travers la barre de défilement, la valeur change de 10.

Lorsque l'utilisateur clique sur l'une des flèches de la barre de défilement, l'ascenseur se déplace d'autant qu'indiqué par la valeur increment. Augmenter la valeur de cet attribut fera que la barre défilera plus vite à chaque clic. Les positions la plus à gauche et la plus élevée de l'ascenseur ont une valeur de 0, et celles la plus à droite et la plus basse ont une valeur donnée par maxpos.

En ajustant les valeurs de la barre de défilement, vous pouvez positionner et contrôler le déplacement de l'ascenseur comme vous le souhaitez.

---

Ensuite, nous verrons comment créer des barres d'outils.