comprendre color picker

08 mai 2008, 10:09

ça tourne en rond la.. tu peux faire un sujet détaillé sur ce qui cause problème, avec les bouts de code, pour qu'on puisse s'y retrouver ?

Il me semble qu'il y a une mauvaise compréhension quelque part, mais difficile de dire ou elle se trouve.

08 mai 2008, 17:39

Oui c'est vrai, je récapitule brièvement.
Le div suivant reçoit et affiche la couleur choisie dans un colorpicker:

<div id="colorbox"></div>

La fontion js suivante s'exécute en permanence pour mettre à jour la couleur du div

function mkColor(v){ 

$S('colorbox').background='#'+v; 
}

v est la couleur passée en paramètres de la fonction. la valeur de v vien du colorpicker.

Si je veux mettre 3 colorpicker dans une même page, je dois commencer comme ceci en html:

<div id="colorbox1"></div>
<div id="colorbox2"></div>
<div id="colorbox3"></div>

Jusque là ça va.
Et là je bloque. Comment modifier la fonction mkColor(v) pour qu'elle puisse gérer les 3 divs?

08 mai 2008, 17:47

en gros, ça revient à trouver un moyen de passer l'id du div à la fonction mkColor.
Si cette fonction ne s'exécutait pas en permanence avec un settimeout, ça serait simple: il suffirait de passer l'id du div à la fonction sur événement onclick, comme ceci:

<div id="colorbox1" onclick="javascript:mkColor(this.id, v)></div> 
<div id="colorbox2" onclick="javascript:mkColor(this.id, v)></div> 
<div id="colorbox3" onclick="javascript:mkColor(this.id, v)></div>

Le problème, c'est que cette fonction s'exécute en permanence. Je ne vois donc pas comment faire pour identifier le div auquel je dois envoyer la couleur choisie dans le colorpicker.

09 mai 2008, 09:58

dites moi si c'est toujours pas très clair...

09 mai 2008, 10:15

quid d'un simple tableau, du genre:

tableau = [ div1 : "couleur1", div2 : "couleur2", div3 : "couleur3" ]

Sur lequel une et une seule fontion exécute et attribue la couleur:

Code : Tout sélectionner

function mkColor(tableau)
  { 
  for (key in tableau)
    {
    $S(key).background='#'+tableau[key];
    }
  }

Avec une fonction pour attribuer les valeurs au tableau:

Code : Tout sélectionner

function attribue(div,v)
   {
   tableau[div] = v;
   }

Ensuite, pour chaque "picker", il ne fait que changer la valeur dans le tableau:

Code : Tout sélectionner

<div id="colorbox1" onclick="javascript="attribue('div1',v);"></div> 
<div id="colorbox2" onclick="javascript="attribue('div2',v);></div> 
<div id="colorbox3" onclick="javascript="attribue('div3',v);></div>

Mais a mon avis, cette dernière devrait se faire dans le code du plugin, puisque c'est lui à ce que je vois qui gère la passation des valeurs et le calcul de "v".

09 mai 2008, 10:59

cette idée est très intéressante, ça devrait marcher. par contre je ne connais pas cette syntaxe pour les tableaux et à la la 1ère ligne:

tableau = [ div1 : "couleur1", div2 : "couleur2", div3 : "couleur3" ];

je reçois l'erreur:

Missing ] after element list

09 mai 2008, 12:46

j'ai fini par trouver la réponse à mon problème sur ce site en anglais.
Un codeur qui a modifié un peu le script du color picker pour pouvoir avoir plusieurs instances sur la même page.
J'ai rien compris mais ça marche:

http://www.itsjustpoison.com/blog/2007/ ... or-picker/

09 mai 2008, 13:23

cette idée est très intéressante, ça devrait marcher. par contre je ne connais pas cette syntaxe pour les tableaux et à la la 1ère ligne:
tableau = [ div1 : "couleur1", div2 : "couleur2", div3 : "couleur3" ];

Autant pour moi, c'était uniquement pour représenter un tableau, pas pour faire du code valide.

En JS, ça aurait plutôt donnée quelque chôse comme ça:

Code : Tout sélectionner

var tableau = {div1:"couleur1",div2:"couleur2",div3:"couleur3"};

ben tiens, c'est quasi pareil

Content pour toi d'avoir trouvé.

comprendre color picker

Qui est en ligne