1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Divers
  5. Scrollbar class

Scrollbar class

Soyez le premier à donner votre avis sur cette source.

Vue 5 114 fois - Téléchargée 402 fois

Télécharger le projet
Commenter

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 !
Télécharger le projet

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
26 avril 2011 à 13:58
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
S'inscrire maintenant

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.

Du même auteur (cs_heycraft)