Demo: ScrollBar JQuery

"Historique"

plugin.scrollbar.js est mon premier plugin JQuery. Le besoin de cette création est apparu avec le développement du site d'un ami : Damien Balada

Après quelques petites recherches, je suis arrivé sur jquery UI, qui propose un slider. Mais ce dernier fonctionne par "cran" et perd donc un peu en fluidité. Je me suis donc lancé dans ce développement, plein de détermination, le regard fixé sur l'écran, en oubliant de cligner des yeux.

Après quelques de semaines de travail, j'arrive enfin à un résultat acceptable, suffisament en tout cas pour avoir envie de le partager.

Description de ce plugin Jquery

Ce plugin n'a qu'une seule utilité. Celle de créer une scrollbar dans un élément de votre choix pour afficher un contenu d'une taille supérieure à celle de l'espace visible. Il s'adresse surtout à ceux (et celles) qui ne veulent plus voir la scrollbar du navigateur. La gestion du sroll molette est également intégrée à ce plugin, mais reste désactivable.

Pas mal de choses sont facilement configurables, la taille et la position de la scrollBar, du bouton. Il est également possible de définir plusieurs styles. Quand la taille de l'espace visible (taille_englobe) et de la scrollbar (taille_scrollbar) sont en auto, les dimensions s'adaptent automatiquement à l'espace disponible et s'adaptent à chaque redimensionnement de la fenêtre.

Mise en place

Ce plugin nécessite quelques autres fichiers javascript pour fonctionner : jquery-1.4.2.min.js, ui.core-1.7.2.js, ui.draggable-1.7.2.js et jquery.mousewheel.min.js l'appel du plugin ce fait de cette façon là :
$(document).ready(function(){
$("#contenu").scrollbar();
});
#contenu étant l'id de l'élément qui accueillera la scrollbar.

Les options du plugin

• taille_englobe: Taille de l'espace visible. Accepte soit une valeur numérique, soit "auto" pour prendre toute la place disponible
• taille_scrollbar: Taille de la scrollbar. Accepte soit une valeur numérique, soit "auto" pour prendre toute la place disponible
• taille_bouton: C'est la taille du bouton de la scrollbar, doit être une valeur numérique
• pas: Pas du scroll molette. C'est à dire la valeur du déplacement à chaque cran de la molette. Doit être une valeur numérique
• molette: true ou false. Active ou non la prise en compte de la molette de la souris
• drag: true ou false. Active ou non la présence de la scrollbar
• debug: true ou false. Affiche ou non la console de debug
• style: Choix des styles de la scrollbar. Par défaut il n'y a que 'basic'
• position: Position de la scrollbar. droite ou gauche
• alignement_scrollbar: Alignement de la scrollbar. haut, centre ou bas
• orientation: Orientation du contenu. Paysage ou portrait. Dans cette version, seul portrait est disponible
• marge_scroll_contenu: Marge entre la scrollbar et le contenu. Doit êter une valeur numérique.
• largeur_scrollbar: Largeur de la scrollbar et du bouton. Doit être une valeur numérique.

Téléchargement

Télécharger cette démo (contient une version compréssée et une commentée du plugin): Démo plugin scrollbar Jqurey

Télécharger uniquement la version compressée : plugin.scrollbar-min.js

Télécharger uniquement la version commentée : plugin.scrollbar.js

Contact

Si vous avez besoin d'aide, ou des suggestions d'amélioration, n'hésitez pas à me contacter : Creamama ou par mail : matthieu.leorat[arobase]gmail.com