Permet de créé des scrollbars pour des scripts ou formulaires
Son implantation:
1. Incluez le .js <SCRIPT language="Javascript" type="text/javascript" src="scrollbar.js"></SCRIPT>
2. Incluez certains events <BODY onmousemove="deplacement(event);" onmouseup="relache(event);">
3. instancié vos scrolls / initScrollbar(id,horizontal ou pas,longueur(px),valeur de départ,coord. X,coord. Y);
4. pour pouvoir relier ses changements à vos scripts, modifier la méthode change() - Il est tjrs possible accèder à leur valeur grâce à valeurDe(id du scrollbar)
Script a été testé sur Internet Explorer, Mozilla Firefox, Opera
Source / Exemple :
var objCourrant = ""; //Id courrant
var valeurs = new Array(); //Informations pour chacun des scrollbar
function appuie(event,id)
{
objCourrant = id;
}
function relache(event)
{
objCourrant = "";
}
function deplacement(event) //lorsque la souris se déplace
{
id = objCourrant;
if(id != "" )
{
if(valeurs[id][1]) //Si le scrollbar est à l'horizontal
{
if(navigator.appName.indexOf("Microsoft") != -1)
x = window.event.clientX;
else
x = event.pageX;
if(x < valeurs[id][3]) x=valeurs[id][3];
if(x >valeurs[id][3]+valeurs[id][2]) x=valeurs[id][3]+valeurs[id][2];
document.getElementById("s"+id).style.left = x;
valeurs[id][0] = x-(valeurs[id][3]);
}
else //Si le scrollbar est à la vertical
{
if(navigator.appName.indexOf("Microsoft") != -1)
y = window.event.clientY;
else
y = event.pageY;
if(y < valeurs[id][4]) y=valeurs[id][4];
if(y > valeurs[id][4]+valeurs[id][2]) y=valeurs[id][4]+valeurs[id][2];
document.getElementById("s"+objCourrant).style.top = y;
valeurs[id][0] = y-(valeurs[id][4]);
}
change();
}
}
function initScrollbar(id,dirHor,longueur,valeurDep,X,Y)
{
valeurs[id] = new Array();
valeurs[id][0] = valeurDep;
valeurs[id][1] = dirHor;
valeurs[id][2] = longueur;
valeurs[id][3] = X;
valeurs[id][4] = Y;
//Dessin du scrollbar
//Div de fond
document.write("<DIV style='background-color:#CCCCCC;position:absolute;top:"+Y+";left:"+X+";")
if(dirHor)
document.write("width:"+(longueur+20)+"px;height:30px;");
else
document.write("width:30px;height:"+(longueur+20)+"px;");
document.write("'>");
document.write("</DIV>");
//Div centrale
document.write("<DIV style='background-color:#DCDCDC;position:absolute;");
if(dirHor)
document.write("top:"+(Y+5)+"px;left:"+X+"px;width:"+(longueur+20)+"px;height:20px;");
else
document.write("top:"+Y+"px;left:"+(X+5)+"px;width:20px;height:"+(longueur+20)+"px;");
document.write("'></DIV>");
//Poigné
document.write("<DIV id='s"+id+"' style='position:absolute;");
if(dirHor)
document.write("top:"+Y+";left:"+(X+valeurDep)+";width:20px;height:30px;");
else
document.write("top:"+(Y+valeurDep)+";left:"+X+";width:30px;height:20px;");
document.write("background-color:#000000;' onmousedown='appuie(event,"+id+")'></DIV>");
}
function valeurDe(id)
{
return valeurs[id][0];
}
Conclusion :
Deux exemples sont inclus dans le zip
exemple1.htm (un très simple)
couleurs.htm (qui permet de trouver le code hexadécimal d'une couleur)
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.