Class barre de défilement (scrollbar) javascript
Soyez le premier à donner votre avis sur cette source.
Vue 12 541 fois - Téléchargée 1 085 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 scroll bar - 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
- 619
- Date d'inscription
- mercredi 4 avril 2007
- Statut
- Membre
- Dernière intervention
- 27 août 2010
2ça marche sur Safari mac. Je peux pas dire pour la souris, j'utilise une palette graphique.
Bravo
ne reste que la molette qui fonctionne pas pour moi : ubuntu 9.04 avec Firefox
par contre ça fonctionne avec Opéra 9.64 (toujours Linux), mais la molette n'est-elle pas inversée ?
- quand je tourne vers moi, le défilement devrait descendre... et là ça monte...
en tout cas bien joué !
;o)
->Amélioration de la vitesse de défilement de base
->Changement du nom du répertoire
->Correction de mille et un bugs divers
->Amélioration de la vitesse de la molette
->Plus de perte de contrôle lorsque l'on déplace la barre avec le curseur !
Cordialement
TheWeasel47
2)Difficile à utiliser ???? comment ça d'un point de vue développeur ou utilisateur ?
3)pour ce qui est de la vitesse de défilement ut peux la changer grace aux méthodes suivante :
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 3)
Barre.ChangerPasDeplacementH(10); //Change le pas de déplacement horizontal (par défault 3)
4)jQuery je ne sais pas trop ...je vais me pencher sur le problème.
5)Pour FireFox 3 j'ai testé tout fonctionne sur windows mais Ubuntu je n'ai pas eu l'occasion ...Je vais voir.
Merci pour ces remarques.
Bien Cordialement
THeWeasel47
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.