Vous êtes ici : TooZeWeB > Liste des forums > Programmation web > xHTML / CSS, Javascript > Un curseur(Slider) en javascript. > Lecture du sujet

Forums de TooZeWeB

Redirection rapide vers
Page : 1

Vous devez être inscrit et connecté pour pouvoir écrire dans les forums

Un curseur(Slider) en javascript. ['Explication, avis, etc.']
Merwin Posté le 25/05/2008 16:28 - Remonter




22 messages
17 ans
0 % 		Bon voilà j'ai créé un petit script en POO javascript pour la création d'un slider (curseur qui glisse et qui indique une valeur).
Celui ci est véritablement rapide à mettre en place .

Code html4strict - Numéro de ligne
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3.    <head>
  4.  
  5. <style type="text/css">
  6. .curseur{ width: 50%; height: 20px; background-color: #545454;  background-image: url(milieuCurseur.png); }
  7. .flecheGauche,.flecheDroite{ height: 100%; width: 10px;}
  8. .flecheGauche{ float: left; background-image: url(curseurLeft.png);}
  9. .flecheDroite{ float: right; background-image: url(curseurRight.png);}
  10. .milieuCurseur{ height: 100%; background-image: url(curseur.png); width: 20px; margin-left: 10px;}
  11. </style>
  12. </head>
  13. <body>
  14. </body>
  15. </html>

Code javascript - Numéro de ligne
  1. /***********************************
  2.         Création de la Classe Curseur. TZW_Curseur
  3. ***********************************/
  4. //DEFINES
  5.         //CONSTANTES
  6.         var TZW_cursorSelected = null;
  7.         var TZW_X = null;
  8.         var TZW_CursorId = 0;
  9.        
  10.         //VARIABLES
  11.         var TZW_curStyle_flecheGauche = 10;//Taille des divs en pixels
  12.         var TZW_curStyle_flecheDroite = 10;
  13.         var TZW_curStyle_flecheMilieu = 20;
  14.        
  15.         //
  16.         var TZW_cursors=new Array();
  17.  
  18. function TZW_Curseur(node, w, vMax, vMin, v){
  19.        
  20. /*************************
  21.         ATTRIBUTS
  22. *************************/
  23.         //==>Initialisation
  24.         if(isNaN(w)) w = 100;
  25.         if(isNaN(v)) v = 0;
  26.         if(isNaN(vMax)) vMax = 100;
  27.         if(isNaN(vMin)) vMin = 100;
  28.         //Variables constantes.
  29.         this.width=w;//Taille en PIXELS
  30.         this.valueMax=vMax; //Valeur Maximale
  31.         this.valueMin=vMin; //Valeur Minimale
  32.         this.value=v; //Valeur
  33.         this.parent=node; //Parent
  34.        
  35.         this.position=0; //Position Du curseur en pixels
  36.        
  37.         with(this){ //On calcule la position du curseur
  38.                 position = Math.round((value - valueMin) / ( (valueMax - valueMin ) / ( width - 20 ) ) ) + 10;
  39.         }
  40.         //Valeurs variables
  41.         this.afficher=false;//Valeur pour non affiché
  42.        
  43.  
  44.        
  45.        
  46. };
  47. /*********************************
  48.                 PROTOTYPE
  49. *********************************/
  50. /** Fonction d'ajout du curseur avec liens dynamique **/
  51. TZW_Curseur.prototype.addCursor = function(){
  52.  
  53.         if(!this.afficher){//Si le cruseur n'est pas déjà afficher
  54.                 var div=document.createElement('div');
  55.                 div.className='curseur';//on créé un div principal
  56.                 div.setAttribute('tzw_idcursor',TZW_CursorId);
  57.                 TZW_CursorId++;
  58.                
  59.                 //puis tous les autres div qu'ils contient
  60.                 var div1=document.createElement('div');
  61.                 div1.className='flecheGauche';
  62.                 var div2=document.createElement('div');
  63.                 div2.className='flecheDroite';
  64.                 var div3=document.createElement('div');
  65.                 div3.className='milieuCurseur';
  66.                
  67.                 //On lui ajoute la position du curseur...
  68.                 div3.style.marginLeft = this.position+'px';
  69.                
  70.                 //Puis la taille du curseur
  71.                 div.style.width= (this.width+20)+'px';
  72.                
  73.                 //Ajouts des événements dynamiques.
  74.                 addEvent(div3,'mousedown',function(event){TZW_Curseur.selectCursor(this,event);});
  75.                 addEvent(document,'mouseup',function(){TZW_Curseur.deselectCursor();});
  76.                
  77.                 //On ajoute au div principal ces enfants
  78.                 div.appendChild(div1);
  79.                 div.appendChild(div2);
  80.                 div.appendChild(div3);
  81.                
  82.                 //On l'affiche.
  83.                 if(this.parent.appendChild(div)){
  84.                         this.afficher = true;
  85.                         return true;
  86.                 }else
  87.                         return false;
  88.         }
  89.         return false;
  90.        
  91. };
  92. /*************************
  93.        METHODE
  94. *************************/
  95. //Lorsque l'on bouge la souris sa déplace le curseur
  96. TZW_Curseur.moveCursor=function(event){
  97.         //Si un curseur est bien séléctionné
  98.         if(TZW_cursorSelected != null){
  99.                
  100.                 var idC = TZW_cursorSelected.parentNode.getAttribute('tzw_idcursor');
  101.                 //On prend l'abscisse actuelle
  102.                 var x = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
  103.                
  104.                 //La position du curseur est alors la différence ajoutée à la position actuelle des deux déplacements.
  105.                 TZW_cursors[idC].position += x - TZW_X;
  106.                
  107.                
  108.                
  109.                 with(TZW_cursors[idC]){//On va travaillé avec ce curseur
  110.                         if(position < TZW_curStyle_flecheGauche )
  111.                                 position = TZW_curStyle_flecheGauche;
  112.                                
  113.                         else if(position > width - TZW_curStyle_flecheDroite)
  114.                                 position = width - TZW_curStyle_flecheDroite ;
  115.                        
  116.                         value = Math.round( ( position - TZW_curStyle_flecheGauche) * ( (valueMax - valueMin) / (width - ( TZW_curStyle_flecheGauche + TZW_curStyle_flecheDroite ))) ) + valueMin;
  117.                
  118.                 //on lui met cette position
  119.                 TZW_cursorSelected.style.marginLeft = position +'px';
  120.                
  121.                 //On met au corps cette taille
  122.                 //document.getElementById('corps').style.width = value+'%';
  123.                
  124.                 }
  125.                
  126.                 TZW_X = x;
  127.                 return true;
  128.                
  129.         }
  130.         else
  131.                 return false;
  132.        
  133.        
  134. };
  135.  
  136.  
  137. TZW_Curseur.selectCursor=function(node,event){//On bouge le curseur
  138.         TZW_cursorSelected = node;
  139.         TZW_X=event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
  140.        
  141. };
  142. TZW_Curseur.deselectCursor=function(){//On ne bouge plus le curseur
  143.         TZW_cursorSelected = null;
  144.         TZW_X=null;
  145. }
  146.  
  147.  
  148. //Ajout d'un événement dynamique
  149. function addEvent(node,event,fonction)
  150. {
  151.         if( node.attachEvent)
  152.                 node.attachEvent('on' + event,fonction);
  153.         else
  154.                 node.addEventListener(event,fonction,true);
  155. }
  156.  
  157. addEvent(document,'mousemove',function(event){if(TZW_cursorSelected!=null){TZW_Curseur.moveCursor(event);}});
  158.  
  159.  
  160. TZW_cursors[0] =  new TZW_Curseur(document.getElementsByTagName('body')[0], 300, 100, 0, 0);
  161. TZW_cursors[0].addCursor();

new TZW_Curseur(document.getElementsByTagName('body')[0], 300, 100, 0, 0);
==>new TZW_Curseur(NODE parent, NOMBRE PIXELS largeur, NOMBRE valeurMaximale, NOMBRE valeurMinimale, NOMBRE PIXELS positionDefault);
Sur cette ligne on créé un nouveau curseur, on donne le parent, puis sa taille en pixel, sa valeur maximale, sa valeur minimale, la position par défaut.

addCursor();==>Affichage du curseur.


Si vous pouviez donnez votre avis, merci.

JavaScripter

Aimablement,
Merwin.
Knoppix Posté le 26/05/2008 07:55 - Remonter
Vive l'Open Source et vive Linux !



100 messages

0 % 		Ça à l'air sympa, je vais essayer.

Par contre je viens de m'apercevoir que ya une petite erreur dans le tzw code, il met &#039; au lieu de ' . Je corrigerais ça ce soir.

Edité par Knoppix le 26/05/2008 07:56

Amicalement,
Knoppix

AngelsafraniA Posté le 26/05/2008 17:56 - Remonter
Chuck Norris a déjà compté jusqu'à l'infini. Deux fois.



78 messages
21 ans
0 % 		Il faut que j'essaie !
On va voir ce que ca donne

migration de Apache/PHP5/MSSQL vers ISS/ISAPI:PHP5/MSSQL !
(MSSQL != MySQL )

Merwin Posté le 26/05/2008 21:23 - Remonter




22 messages
17 ans
0 % 		J'ai une autre version un peu plus performante (avec possibilité de le mettre verticalement).
Un seul problème, IE.

J'ai un problème avec un parentNode.

JavaScripter

Aimablement,
Merwin.
AngelsafraniA Posté le 26/05/2008 23:18 - Remonter
Chuck Norris a déjà compté jusqu'à l'infini. Deux fois.



78 messages
21 ans
0 % 		Citation Merwin :
J'ai une autre version un peu plus performante (avec possibilité de le mettre verticalement).
Un seul problème, IE.

J'ai un problème avec un parentNode.

ParentNode ? ca existe pas sous IE ?
Bien tu as qu'a la crée enfin tu fait un attribut personnalisé que tu remplis.
Tu te substitue a l'incompétence de IE

migration de Apache/PHP5/MSSQL vers ISS/ISAPI:PHP5/MSSQL !
(MSSQL != MySQL )

Merwin Posté le 27/05/2008 19:31 - Remonter




22 messages
17 ans
0 % 		Non, c'est pas que ça exite pas mais plutôt qu'il me renvoit soit null soit undifined sous IE.

JavaScripter

Aimablement,
Merwin.
Page : 1

Vous devez être inscrit et connecté pour pouvoir écrire dans les forums

Redirection rapide vers

Retour à la liste des forums, au forum xHTML / CSS, Javascript, ou au haut de page