Class barre de défilement (scrollbar) javascript
Soyez le premier à donner votre avis sur cette source.
Vue 12 270 fois - Téléchargée 1 064 fois
Description
Eternel problème dans le développement Web, les "scrollbar" qui sont peu ou pas du tout controlable. d'où l'intérêt de les refaire. Alors voila une petite class Javascript assez complète et simple d'utilisation qui permet de gérer les scrollbar dans un div.
Testé sous les navigateurs suivant :
-> INTERNET EXPLORER 7
-> Google Chrome 2.0
-> FireFox 1.0 jusqu'à 3.5
-> Netscape 7 (Tout fonctionne sauf la roulette de la souris)
-> Opera 8.54 (Tout fonctionne sauf la roulette de la souris)
-> Opera 9.02
(si vous réalisez d'autres tests faites le moi savoir).
Merci de me signaler toutes incompatibilités, bugs, amélioration ou toutes remarques constructives sur ce projet.
Testé sous les navigateurs suivant :
-> INTERNET EXPLORER 7
-> Google Chrome 2.0
-> FireFox 1.0 jusqu'à 3.5
-> Netscape 7 (Tout fonctionne sauf la roulette de la souris)
-> Opera 8.54 (Tout fonctionne sauf la roulette de la souris)
-> Opera 9.02
(si vous réalisez d'autres tests faites le moi savoir).
Source / Exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Test du défilement</title> <script language="javascript" src="js/BarreDefilement.js" version="1.6"></script> <script language="javascript"> var Barre; function Envoyer_Message(){ document.getElementById("Tchat").innerHTML=document.getElementById("Tchat").innerHTML + "<b>Eric >></b>" + document.getElementById("Dial").value+"<br />"; document.getElementById("Dial").value=""; Barre.ActualiserContenuBarre(); } function CreerBarre(){ Barre= new BarreDefilement("Tchat"); Barre.DefinirHauteurBarre(300); //Réajuste automatiquement si le contenu d'origine a deformer le calque principale Barre.DefinirEpaisseurBarres(30); //Definis la largeur des deux barres de défilement var BV=Barre.ObtenirBarreVerticale(); // Retourne la barre de défilemnt verticale BV.style.backgroundImage='url(./img/fondbarre.jpg)'; var IH=Barre.ObtenirIconeHaut(); //renvoie le div contenant la fleche du haut IH.style.backgroundImage='url(./img/fleche_haut.gif)'; IH.style.height="30px"; var IB=Barre.ObtenirIconeBas(); //renvoie le div contenant la fleche du bas IB.style.backgroundImage='url(./img/fleche_bas.gif)'; IB.style.height="30px"; Barre.RecalculTailleCurseurV(); //recalcul la hauteur du curseur vertical Barre.RecalculPositionCurseurV(); //recalcul la position du curseur verticale var BH=Barre.ObtenirBarreHorizontale(); BH.style.backgroundImage='url(./img/fondbarre.jpg)'; var IG=Barre.ObtenirIconeGauche(); //renvoie le div contenant la fleche du haut IG.style.backgroundImage='url(./img/fleche_gauche.gif)'; IG.style.width="30px"; var ID=Barre.ObtenirIconeDroite(); //renvoie le div contenant la fleche du bas ID.style.backgroundImage='url(./img/fleche_droite.gif)'; ID.style.width="30px"; Barre.RecalculTailleCurseurH(); //recalcul la hauteur du curseur vertical Barre.RecalculPositionCurseurH(); //recalcul la position du curseur verticale*/ //AUTRE METHODES // Barre.ObtenirBarreHorizontale(); // Retourne la barre de défilemnt horizontale // Barre.ObtenirIconeMilieuDefilantV(); // Retourne la curseur de défilemnt verticale // Barre.ObtenirIconeMilieuDefilantH(); // Retourne la curseur de défilemnt horizontale // Barre.ObtenirConteneurGlobal(); // Retourne le calque qui contient tout(Div principale,barre de défilements...) // Barre.DefinirEpaisseurBarres(30); //Definis la largeur des deux barres de défilement // ->Barre.DefinirEpaisseurBarreHorizontale(30) //Definis la largeur de la barres horizontale // ->Barre.DefinirEpaisseurBarreVerticale(30) //Definis la largeur de la barres verticale // Barre.ActualiseAutomatiquement(1000); // Permet une actualisation automatique toutes les 1000ms (parametre changeable) // Barre.ActualiseManuellement(); //Repasse en actualisation manuel(arrete l'actualisation automatique) (méthode par défault) // Barre.ActualiserContenuBarre(); //Permet une actualisation manuelle (important lors du rajout de contenu si le mode actualisation n'est pas définit en automatique...) // Barre.DeplacerBarreVEnBas(); //Fait descendre la barre tout en bas // Barre.DeplacerBarreVEnHaut(); //Fait monter la barre en haut // Barre.DeplacerBarreHADroite(); //Déplace la barre à droite // Barre.DeplacerBarreHAGauche(); //Déplace la barre à gauche // Barre.ChangerPasDeplacement(10); //Change les pas de déplacement vertical et horitontale (par défault 3) // Barre.ChangerPasDeplacementV(10); //Change le pas de déplacement vertical (par défault 5) // Barre.ChangerPasDeplacementH(10); //Change le pas de déplacement horizontal (par défault 5) // Barre.DeplacerPrincipalVenPx(10); //Déplace le centre de X pixel // Barre.ChangerVisibiliteBarres(2); //Change la visibilité des deux barres (1->Visible,2->Cache,3->auto) // Barre.ChangerVisibiliteBarreV(2); //Change la visibilité de la barre Verticale (1->Visible,2->Cache,3->auto) // Barre.ChangerVisibiliteBarreH(2); //Change la visibilité de la barre Horizontale (1->Visible,2->Cache,3->auto) // Barre.ActiverDeplacementMouseOver(true); //Active ou désactive l'utilisation des barres au simple survol de la souris (désactivé par défault) // Barre.ActiverDeplacementMouseClick(true); //Active ou désactive l'utilisation des barres au click de la souris (Activé par défault) // Barre.ActiverChangementFondPassageSouris(false);; //Active ou désactive le changement de couleur des éléments de la barre lors du survol de la souris // Barre.DefinirCouleurFondBase("#FF0000"); //Définis la couleur de fond des barres // Barre.DefinirCouleurFondSecondaire("#00FF00"); //Définis la couleur de fond des barres au passage de la souris } </script> </head> <body onload="CreerBarre();"> <center><h1>Exemple de barre de défilement de DIV</h1></center> <center> <div id="Tchat" style="padding: 3px; border: 1px solid black;width: 500px; height: 300px;text-align: left;" ></div> Parler : <input type="text" size="60" Onkeydown="if(event.keyCode==13){Envoyer_Message();}" name="Dial" id="Dial"/> <input type="button" value="Envoyer" Onclick="Javascript:Envoyer_Message();" /> <br /> <br /> <h2>Quelques méthodes de la barre horizontale</h2> <input type="button" value="Montrer Barre" Onclick="Javascript:Barre.ChangerVisibiliteBarreH(1);" /> <input type="button" value="Cacher Barre" Onclick="Javascript:Barre.ChangerVisibiliteBarreH(2);" /> <input type="button" value="Visibilité Automatique" Onclick="Javascript:Barre.ChangerVisibiliteBarreH(3);" /><br /> <br /> <input type="button" value="Barre à gauche" Onclick="Javascript:Barre.DeplacerBarreHAGauche();" /> <input type="button" value="Barre à Droite" Onclick="Javascript:Barre.DeplacerBarreHADroite();" /><br /> <br /> <input type="button" value="Agrandir Zone" Onclick="Javascript:Barre.DefinirLargeurBarre(800);" /> <input type="button" value="Diminuer Zone" Onclick="Javascript:Barre.DefinirLargeurBarre(300);" /><br /> <br /> <br /> <br /> <h2>Quelques méthodes de la barre verticale</h2> <input type="button" value="Montrer Barre" Onclick="Javascript:Barre.ChangerVisibiliteBarreV(1);" /> <input type="button" value="Cacher Barre" Onclick="Javascript:Barre.ChangerVisibiliteBarreV(2);" /> <input type="button" value="Visibilité Automatique" Onclick="Javascript:Barre.ChangerVisibiliteBarreV(3);" /><br /> <br /> <input type="button" value="Descendre Barre" Onclick="Javascript:Barre.DeplacerBarreVEnBas();" /> <input type="button" value="Monter Barre" Onclick="Javascript:Barre.DeplacerBarreVEnHaut();" /><br /> <br /> <input type="button" value="Diminuer Zone" Onclick="Javascript:Barre.DefinirHauteurBarre(200);" /> <input type="button" value="Agrandir Zone" Onclick="Javascript:Barre.DefinirHauteurBarre(500);" /><br /> <br /> </center> </body> </html>
Conclusion :
Merci de me signaler toutes incompatibilités, bugs, amélioration ou toutes remarques constructives sur ce projet.
Codes Sources
A voir également
- Scroll bar js
- Scroll bar javascript - Meilleures réponses
- Javascript scrollbar - Meilleures réponses
- Ajouter une barre de défilement (scrollbar down) - Codes sources - Delphi / Pascal (Trucs & Astuces)
- Barre de défilement (scrollbar) qui change de couleur au survol - Codes sources - Javascript (Effets)
- Javascript : Barre de défilement personnalisée style magique - CodeS SourceS - Guide
- Javascript : Slider bar (barre de défilement, curseur) horizontal et vertical - CodeS SourceS - Guide
- Visual Basic / VB.NET : Ajouter une barre de défilement horizontale à une listbox - Co - Guide
Commentaires
- Messages postés
- 656
- Date d'inscription
- samedi 30 décembre 2000
- Statut
- Membre
- Dernière intervention
- 20 juillet 2012
3 -Chez moi sur Firefox 3, cela ne fonctionne pas.
Sur la console, il est écrit "barreDefilement est indéfini" et "barre est indéfini".
JDMCreator
- Messages postés
- 40
- Date d'inscription
- mercredi 19 mars 2008
- Statut
- Membre
- Dernière intervention
- 25 août 2009
-Je viens de tester sur FF1.5 et FF2.0(standalone), aucun problème !!! Aurais tu des outils de développeur qui utilisent d'autres moteurs javascript ou tes paramètres de sécurités peu être ?
- Messages postés
- 120
- Date d'inscription
- lundi 19 juillet 2004
- Statut
- Membre
- Dernière intervention
- 12 janvier 2017
-Et les options de la roulette de ta souris ??
- Messages postés
- 40
- Date d'inscription
- mercredi 19 mars 2008
- Statut
- Membre
- Dernière intervention
- 25 août 2009
-- Messages postés
- 656
- Date d'inscription
- samedi 30 décembre 2000
- Statut
- Membre
- Dernière intervention
- 20 juillet 2012
3 -Ça fonctionne sur Safari 3 sans problème ;)
Petite chose : Lorsque l'on monte la barre trop rapidement, on perd le contrôle sur la barre (à cause de onMouseOut sûrement).
Beau travail ;)
JDMCreator
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.