Scrollbar class

Soyez le premier à donner votre avis sur cette source.

Vue 4 812 fois - Téléchargée 349 fois

Description

Cette classe permet d'afficher une scrollbar dans une div, d'en modifier la valeur ou de recuperer la valeur (en pourcentage) lorsque l'utilisateur fait bouger la bar.

Utilisation :

var bar = new Scrollbar('bar', 500, 'horizontal'); // 'bar' est l'ID d'une div et 500 sera la taille du scrollbar

bar.scroll(function(v){
// v est le pourcentage du la bar
// traitements ici
});

bar.setValue(50); // place la barre à 50 %

Source / Exemple :


/**

  • Class Scrollbar
  • @elementId string
  • @elementId number
  • @access public
  • /
function Scrollbar(elementId, size, type) { var container = document.getElementById(elementId), elem = document.createElement('div'), subelem = document.createElement('div'), ratio = 6, // Scroll size : 10% direction; // Si type est definie if(typeof(type) == 'undefined') direction = 'horizontal'; else direction = type; // Si size est definie if(typeof(size) == 'number') setStyle(); else return; /**
  • Getter qui retourne la valeur actuelle de la scrollbar (en %)
  • @access public
  • /
this.getValue = function() { var percentage = getPercentage(); return percentage; } /**
  • Setteur qui definit la valeur de la scrollbar (en %) et la fait bouger
  • @access public
  • /
this.setValue = function(percentage) { if(direction == 'horizontal') elem.scrollLeft = setPercentage(percentage); if(direction == 'vertical') elem.scrollTop = setPercentage(percentage); } /**
  • Gestion de l'evenement onscroll, appele une fonction avec le parametre pourcentage
  • ex : scrollbar.scroll(function(v){*Votre code, v vaut le pourcentage du scroll*});
  • @access public
  • /
this.scroll = function(method) { if(typeof(method) == 'function') { elem.onscroll = function(){ var percentage = getPercentage(); method(percentage); } } } /**
  • Renvoie en pourcentage la valeur de la bar
  • @access private
  • /
function getPercentage() { if(direction == 'horizontal') return parseInt((elem.scrollLeft * 100) / (elem.scrollWidth - elem.offsetWidth)); else if(direction == 'vertical') return parseInt((elem.scrollTop * 100) / (elem.scrollHeight - elem.offsetHeight)); } /**
  • Renvoie en pourcentage la valeur de la bar
  • @access private
  • /
function setPercentage(percentage) { if(direction == 'horizontal') return parseInt((percentage * (elem.scrollWidth - elem.offsetWidth)) / 100); else if(direction == 'vertical') return parseInt((percentage * (elem.scrollHeight - elem.offsetHeight)) / 100); } /**
  • Defini la taille de l'objet
  • @access private
  • /
function setStyle() { container.style.overflow = 'hidden'; if(direction == 'horizontal') { // Taille container container.style.width = size + 'px'; container.style.height = '16px'; // Taille elem.style.width = size + 'px'; subelem.style.width = (size * ratio) + 'px'; // On monte à 36px pour l'affichage sous IE 8, on utilise marginTop pour remonter le tout elem.style.height = '36px'; elem.style.marginTop = '-20px'; // Evite l'affichage d'une bar verticale elem.style.overflowX = 'auto'; elem.style.overflowY = 'hidden'; // On definit le sous element qui va influncer sur la taille du bouton et la precision subelem.style.height = '36px'; } else if(direction == 'vertical') { // Taille container container.style.height = size + 'px'; container.style.width = '16px'; // Taille elem.style.height = size + 'px'; subelem.style.height = (size * ratio) + 'px'; // On monte à 36px pour l'affichage sous IE 8, on utilise marginTop pour remonter le tout elem.style.width = '36px'; elem.style.marginLeft = '-20px'; // Evite l'affichage d'une bar verticale elem.style.overflowY = 'auto'; elem.style.overflowX = 'hidden'; // On definit le sous element qui va influncer sur la taille du bouton et la precision subelem.style.width = '36px'; } elem.appendChild(subelem); container.appendChild(elem); } }

Conclusion :


Modification terminées !

Fonctionne sous Firefox 4, Chrome 9, IE 8 (7 en mode de compatibilité), Opera 11 et Safari 5
Certainement sous les versions antérieures aussi sauf pour IE (mais pas testé).

Par default horizontal, mais on peut definir le type vertical.
Paramètre size obligatoire !

Codes Sources

A voir également

Ajouter un commentaire

Commentaire

LeFauve42
Messages postés
239
Date d'inscription
vendredi 20 octobre 2006
Statut
Membre
Dernière intervention
20 avril 2009

Bonjour,

Ton code est tres clair, mais j'ai quelques remarques :
- Pourquoi creer les methodes dans le constructeur en les rajoutant a chaque object plutot qu'utiliser le prototype de ta classe ?
- Plutot que de dupliquer tout ton code pour les cas "horizontal" et "vertical", pourquoi ne pas juste stocker les noms d'attribut a utiliser pour chaque cas. Par exemple, si dans ton constructeur tu changes :
// Si type est definie
if(typeof(type) == 'undefined')
direction = 'horizontal';
else
direction = type;

par :
switch(type)
{
case 'vertical':
direction = 'vertical';
this.scrollLeftTop = 'scrollTop';
this.scrollWidthHeight = 'scrollHeight';
this.offsetWidthHeight = 'offsetHeight';
// Autres proprietes utiles
break;
default: // horizontal pour les autres valeurs
direction = 'horizontal';
this.scrollLeftTop = 'scrollLeft';
this.scrollWidthHeight = 'scrollWidth';
this.offsetWidthHeight = 'offsetWidth';
// Autres proprietes utiles

tes autres methodes deviennent beaucoup plus simples (et plus rapides). Par exemple :
this.setValue = function(percentage)
{
elem[this.scrollLeftTop] = setPercentage(percentage);
}

function getPercentage()
{
return parseInt((elem[this.scrollLeftTop] * 100) / (elem[this.scrollWidthHeight] - elem[this.offsetWidthHeight]));
}

etc...

Eric

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.