Barres de défilement

 

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.

Image:xultu_scroll1.jpg

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.

<hr>

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

Interwiki

Pièces jointes

Fichier Taille Date Joint par
xultu_scroll1.jpg
1222 octets 2007-08-14 08:37:58 Fredchat
inputs1.png
5296 octets 2006-11-12 05:55:47 Morishoji

Étiquettes et contributeurs liés au document

Étiquettes :
Contributeurs ayant participé à cette page : E.cg, Chbok, Mgjbot
Dernière mise à jour par : E.cg,