Ce script répond à l'une de mes attentes les plus chères : un contrôle de type "scroll bar" dans un formulaire...
Déclarez autant de "scroll bars" que vous voulez, horizontaux et ou verticaux! dès que vous touchez à l'un d'eux, il mettra à jour la variable html (une balise input text ou hidden) qui lui est affectée!
La configuration est assez simple, tout est expliqué dans le fichier HTML, en commentaires.
Ne marche probablement pas sous IE, car il utilise des canvas et des gestionnaires d'évènements. Mais il est possible de convertir le code pour les initiés...
L'exemple ci-dessous utilise deux scroll bars pour montrer les possibilités.
Source / Exemple :
<html>
<head>
<script type="text/javascript">
/*
- JavaScript scrollbars VERSION 1.0
- Glenn Forestier du 20/12/2010
- /
//--------------- variables utilisateur de configuration ---------------------
sc_nbre = 2; // nombre de scrollbar dans la page;
pict_size = 15; // taille des images de flêches et curseurs (carrés uniquement)
pict_url = "img/scrll_"; // emplacement et préfixe des images de flêches
//------------------------ Class scroll_bar ---------------------------------
im_top = new Image();
im_bas = new Image();
im_lef = new Image();
im_rig = new Image();
im_cur = new Image();
im_top.src = pict_url + "haut.gif";
im_bas.src = pict_url + "bas.gif";
im_lef.src = pict_url + "gauche.gif";
im_rig.src = pict_url + "droit.gif";
im_cur.src = pict_url + "ctre.gif";
function findPosX(obj) {
var curleft = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
} while (obj = obj.offsetParent);
}
return curleft;
}
function findPosY(obj) {
var curtop = 0;
if (obj.offsetParent) {
do {
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
}
return curtop;
}
function scroll_bar() { // et valeurs par défaut
this.orientation = 0; // 0 = vertical, 1 = horizontal
this.min = 0; // valeur min
this.max = 100; // valeur max
this.value = 0; // valeur de départ
this.hauteur = 100 + 3*pict_size; // hauteur en pixels
this.largeur = pict_size; // largeur en pixels
this.unite = 1; // petit déplacement
this.saut = 10; // grand déplacement
this.ratio = 1; // ratio affichage curseur
this.cible = null; // cible qui reçoit value
this.dec = 0; // la suite des variables sont internes au
this.t0 = this.largeur; // scrollbar...
this.t1 = this.largeur + this.value;
this.t2 = this.largeur + this.value + this.largeur;
this.t3 = this.hauteur - this.largeur;
this.ctx = null;
this.canvas = null;
this.actualise = function(scbar){ //actualisation du scroll pour chaque clic
if (scbar.orientation) { // horizontal efface puis redessine le curseur
scbar.ctx.clearRect(scbar.t1, 0, pict_size, pict_size)
scbar.t1 = Math.round((scbar.value - scbar.min) * scbar.ratio) + scbar.t0;
scbar.t2 = scbar.t1 + pict_size;
scbar.ctx.drawImage(im_cur, this.t1, 0);
} else { // vertical
scbar.ctx.clearRect(0, scbar.t1, pict_size, pict_size)
scbar.t1 = scbar.t3 - Math.round((scbar.value - scbar.min) * scbar.ratio) - scbar.t0;
scbar.t2 = scbar.t1 + pict_size;
scbar.ctx.drawImage(im_cur, 0, this.t1);
}
scbar.cible.value = scbar.value;
}
this.mouve = function(e) { // curseur qui suit le mouvement de la souris
j = this.id.substring(6, this.id.length); // récupération de l'indice dans le tableau des scrollbar
if (sc[j].orientation) { //horizontal
x = e.clientX-findPosX(this);
sc[j].value = sc[j].min + Math.round((x - sc[j].dec - sc[j].t0)/sc[j].ratio);
} else { // vertical
y = e.clientY-findPosY(this);
sc[j].value = sc[j].min + Math.round((sc[j].t3 - y - sc[j].dec)/sc[j].ratio);
}
if (sc[j].value > sc[j].max) sc[j].value = sc[j].max;
if (sc[j].value < sc[j].min) sc[j].value = sc[j].min;
sc[j].actualise(sc[j]);
}
this.uclic = function(e) { // libération des deux gestionaires (on lâche le curseur)
j = this.id.substring(6, this.id.length); // récupération de l'indice dans le tableau des scrollbar
this.removeEventListener ("mousemove", sc[j].mouve, false);
this.removeEventListener ("mouseup", sc[j].uclic, false);
}
this.clic = function(e) { // dans cette fonction, this est l'objet canvas...
j = this.id.substring(6, this.id.length); // récupération de l'indice dans le tableau des scrollbar
if (sc[j].orientation) { //horizontal
x = e.clientX-findPosX(this);
if (x < sc[j].t0) {
sc[j].value -= sc[j].unite;
} else if (x < sc[j].t1) {
sc[j].value -= sc[j].saut;
} else if (x < sc[j].t2) {
sc[j].dec = x-sc[j].t1;
this.addEventListener ("mousemove", sc[j].mouve, false);
this.addEventListener ("mouseup", sc[j].uclic, false);
} else if (x < sc[j].t3) {
sc[j].value += sc[j].saut;
} else {
sc[j].value += sc[j].unite;
}
} else { // vertical
y = e.clientY-findPosY(this);
if (y < sc[j].t0) {
sc[j].value += sc[j].unite;
} else if (y < sc[j].t1) {
sc[j].value += sc[j].saut;
} else if (y < sc[j].t2) {
sc[j].dec = sc[j].t2 - y;
this.addEventListener ("mousemove", sc[j].mouve, false);
this.addEventListener ("mouseup", sc[j].uclic, false);
} else if (y < sc[j].t3) {
sc[j].value -= sc[j].saut;
} else {
sc[j].value -= sc[j].unite;
}
}
if (sc[j].value > sc[j].max) sc[j].value = sc[j].max;
if (sc[j].value < sc[j].min) sc[j].value = sc[j].min;
sc[j].actualise(sc[j]);
}
this.initialise = function(){ // initialisation du scrollbar
this.canvas.width = this.largeur;
this.canvas.height = this.hauteur;
if (this.orientation) { // horizontal
this.t0 = pict_size;
this.t3 = this.largeur - pict_size;
this.ctx.drawImage(im_lef, 0, 0);
this.ctx.drawImage(im_rig, this.t3, 0);
} else { // vertical
this.t0 = pict_size;
this.t3 = this.hauteur - pict_size;
this.ctx.drawImage(im_top, 0, 0);
this.ctx.drawImage(im_bas, 0, this.t3);
}
b = this.t3 - this.t0 - pict_size;
this.ratio = b / (this.max - this.min);
this.actualise(this);
this.canvas.addEventListener ("mousedown", this.clic, false);
}
this.creator = function(ori, d_min, d_max, d_uni, d_saut, d_value, d_long, d_cible) { // constructor
this.min = d_min;
this.max = d_max;
this.unite = d_uni;
this.saut = d_saut;
this.value = d_value;
this.cible = document.getElementById(d_cible);
if (ori == 1) { // horizontal
this.orientation = 1;
this.largeur = d_long;
this.hauteur = pict_size;
} else { // vertical
this.orientation = 0;
this.hauteur = d_long;
this.largeur = pict_size;
}
this.initialise();
}
}
//------------------------------------------------------------------------------------------
var sc = new Array(sc_nbre); // tableau des scrollbar et déclaration
window.onload = function() {
for (i=0; i<sc_nbre; i++) {
sc[i] = new scroll_bar();
sc[i].canvas = document.getElementById("canva_" + i);
sc[i].ctx = sc[i].canvas.getContext("2d");
}
//--------- création individuelle des scrollbar ---------------------
/* Paramètres :
- sc[n].creator(or, min, max, p_dep, g_dep, val, long, dest);
- n = numéro du scrollbar, de 0 à sc_nombre
- or = orientation, 0 : vertical, 1 : horizontal
- min = valeur minimum de sortie
- max = valeur maximum de sortie
- p_dep = petit déplacement (clic sur les flèches)
- g_dep = grand déplacement (clic entre les flèches et le curseur)
- val = valeur de départ
- long = taille du scrollbar en pixels, compter plage de déplacement du curseur
+ 3 fois la taille des images de flèches
- dest = id de variable html (<input text ou hidden>) qui recevra la valeur de sortie
- du scrollbar.
*
Les balises canvas de déclaration HTML doivent porter l'id "canvas_" + n où n
est le numéro du scrollbar !
//-------------------------------------------------------------------
sc[0].creator(0, 0, 200, 1, 25, 0, 145, "test_vertical");
sc[1].creator(1, 45, 124, 10, 32, 53, 275, "test_horizontal");
//-------------------------------------------------------------------
}
</script>
</head>
<body>
<table border='1'>
<tr>
<td>
<b>Scroll Bar vertical</b><br>
Min = 0, Max = 200,<br>
Déplacement : 1 et 25,<br>
Taille : 145 pixels
</td>
<td>
<b>Scroll Bar horizontal</b><br>
Min = 45, Max = 124,<br>
Déplacement : 10 et 32,<br>
Taille : 275 pixels
</td>
</tr>
<tr>
<td align='center'>
<canvas id="canva_0" width="15" height="15" style="border: 1px solid black;"></canvas>
</td>
<td align='center'>
<canvas id="canva_1" width="15" height="15" style="border: 1px solid black;"></canvas>
</td>
</tr>
<tr>
<td>
<input type='text' id='test_vertical'>
</td>
<td>
<input type='text' id='test_horizontal'>
</td>
</tr>
</table>
</body>
</html>
Conclusion :
Le code est assez lourd, puisqu'il est basé sur des classes que javascript ne gère pas si facilement que ça. Il y a certaines restrictions sur les noms des canvas, mais vous vous en accommoderez! Celui ou celle qui peut proposer des améliorations est très bienvenue!!!
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.