Forum d'entraide PHPFrance

Bonjour à tous,
j'utilise un sc^ript pour afficher une palette de couleurs (color picker).
Il se trouve ici:
http://www.intelliance.fr/jquery/color_picker/

Pour initialiser le color picker, le développeur utilise le code suivant:

<script language="Javascript">
//init colorpicker:
$(document).ready(
function()
{
   $.ColorPicker.init();
}
);

</script>

Je n'ai jamais vu ce type de syntaxe en js. SAvez vous a quoi correspondent les $ utilisés dans ce bout de code?
Merci pour vos réponses.

C'est un beau plugin Jquery ça.. tu as installé JQuery ? Tu es familier avec JQuery ?

oui effectivement c'était du jquery. merci pour l'indication.
J'ai trouvé un autre colorpicker plus intéressant.
une modif du color picker original de YUI:
http://www.knallgrau.at/code/colorpicker

Voici un un formulaire avec un sélecteur de couleur (copier/coler de l'exemple du site):

<form>
<p>color 1 #<input type="text" id="colorfield1" value="FF33FF"></p>
<p>color 2 #<input type="text" id="colorfield2" value="CC3366"></p>
<p>color 3 #<input type="text" id="colorfield3" value="66FF66"></p>
<p>color 4 #<input type="text" id="colorfield4" value="339900"> <button style="width: 1.5em; height: 1.5em; border: 1px outset #666;" id="colorbox4" class="colorbox"></button></p>
</form>

Et l'initialisation du color picker en js:

<script type="text/javascript">
// <![CDATA[

["1", "2", "3"].each(

function(idx) {
  new Control.ColorPicker("colorfield" + idx, { IMAGE_BASE : "<?php echo $mosConfig_live_site; ?>/administrator/components/com_monoslideshow/includes/YUIColorPicker/img/" });
}
);
new Control.ColorPicker("colorfield4", { "swatch" : "colorbox4" });
// ]]>
</script>

C'est également une notation que je n'ai jamais vu.
A quoi correspond le ["1", "2", "3"].each(

Plus précisément, je ne comprends pas ce que représente le
["1", "2", "3"]

C'est certainement un array, mais 1, 2 et 3 pointent vers quoi?

Les joies de JS..

En fait, ["1", "2", "3"] est un tableau, contenant 1, 2 et 3.

Le .each corrsepond à un foreach, càd qu'il va faire une boucle pour chaque élément du tableau.

Ici, il exécute donc:

function(idx) {
  new Control.ColorPicker("colorfield" + idx, { IMAGE_BASE : "<?php echo $mosConfig_live_site; ?>/administrator/components/com_monoslideshow/includes/YUIColorPicker/img/" });

ou idx est la valeur de l'élément actuel (donc 1 puis 2 puis 3).

Donc, en absolu, tu as ces commandes-ci: Puisque idx prend la valeur de l'élément, et est concaténé a "colorfield"

"colorfield" + idx

Pareil, c'est une fonction d'une librairie spécifique, comme Prototype qui va tout simplement boucler sur les éléments du tableau pour éxécuter la fonction déclaré en lui passant en paramètre les valeurs et index du tableau...

"1", "2" et "3" ne pointent vers rien, ce sont seulement 3 chaines ou 3 valeurs du tableau.

Au final c'est une bête boucle for ou foreach, juste pour frimer et pour compliquer la maintenance et l'évolution pour ceux qui ne connaissent pas

je dois admettre que de plus en plus, je code en JS façon json..

super, merci. c'est bien plus clair maintenant.
comme vous l'avez peut être remarqué, je suis entrain de tester des colorpickers à intégrer dans des applis web.
les deux exemples ci dessus sont sélectionnés parmis une 10zaine que j'ai pris le temps de tester sur le web.

Dans la plupart c'est cas c'est très joli, mais après test et install dans différents environnements on se rend compte que tout n'est pas parfait (problèmes javascripts sous ie, bugs d'affichage css...).

Au cas où vous chercheriez un colorpicker, ZE best is:
http://www.dynamicdrive.com/dynamicinde ... /index.htm
ça vous évitera de perdre du temps à en chercher un.

Bien entendu j'ai une petite question sur l'implémentation de ce dernier. Pour lancer le color jack, on fait ceci en html:

<div id="colorbox" style="width: 300px; height: 200px; border: 1px solid gray; padding: 10px; background-color: #F1FFCC"></div>

Puis en javascript:

  <script type="text/javascript">
function mkColor(v){

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

loadSV(); updateH('F1FFCC');

  </script>

la fonction mkColor semble tourner constamment pour mettre à jour la couleur du div "colorbox" sans recharger la page.
le paramètre "v" passé à la fonction est le code couleur choisi par l'utilisateur.

Problème: actuellement, si je veux mettre 3 colorpickers dans la même page, c'est plus difficile. il faudrait que je passe l'id du div en paramètre de mkColor,
ce qui donnerait:

function mkColor(divid, v){

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

Vu que la fonction s'exécute en permanence, comment faire pour récupérer l'id d'un div et le passer en paramètre?

complément d'info:
d'après le développeur, $S('colorbox') est un raccourci équivalent à getelementbyid('colorbox')

En l'occurence, $S() correspond à l'attribut style de l'élément. C'est $() (comme sous jquery) qui te retourne l'élément l'id est passé en paramètre :

function $(v) { return(document.getElementById(v)); }
function $S(v) { return($(v).style); }

Quant à ta fonction, il ne me semble pas qu'il y ait ni d'interval, ni de timeout dans ce script. Ta fonction ne s'exécute donc pas en permanence, mais seulement lorsqu'elle est appellée explicitement. Il te suffit donc lors de l'appel à mkColor() d'indiquer l'id de l'élément dont tu souhaites changer la couleur

si, il semble y avoir un timeout.
Voici le code complet. Je n'avais pas posté l'inclusion du script et le div qui affiche le color jack.

<style type="text/css">
  @import url(<?php echo $mosConfig_live_site; ?>/administrator/components/com_monoslideshow/includes/colorJack/plugin.css);
</style>

<script src="<?php echo $mosConfig_live_site; ?>/administrator/components/com_monoslideshow/includes/colorJack/plugin.js" type="text/javascript"></script>

<div id="plugin" onmousedown="HSVslide('drag','plugin',event)" style="TOP: 140px; LEFT: 430px; Z-INDEX: 20;">
 <div id="plugHEX" onmousedown="stop=0; setTimeout('stop=1',100);">F1FFCC</div><div id="plugCLOSE" onmousedown="toggle('plugin')">X</div><br>
 <div id="SV" onmousedown="HSVslide('SVslide','plugin',event)" title="Saturation + Value">
  <div id="SVslide" style="TOP: -4px; LEFT: -4px;"><br /></div>
 </div>
 <form id="H" onmousedown="HSVslide('Hslide','plugin',event)" title="Hue">
  <div id="Hslide" style="TOP: -7px; LEFT: -8px;"><br /></div>
  <div id="Hmodel"></div>
 </form>
</div>
<div id="colorbox" style="width: 300px; height: 200px; border: 1px solid gray; padding: 10px; background-color: #F1FFCC">
  <script type="text/javascript">
function mkColor(v){

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

loadSV(); updateH('F1FFCC');

  </script>
</div>


<p><a href="javascript:toggle('plugin')">Show/ hide Color Picker</a></p>

la seule solution pour avoir plusieurs instances sur la même page est elle de mettre autant de fois mkColor() qu'il y a de colorpicker, en changeant manuellement l'id du div récepteur de couleur à chaque fois?

juste un mot pour confirmer que mkColor() s'execute bien en permanence.
si je mets un alert dans la fonction, je me retrouve avec une boucle infinie.

bon, le seul moyen que j'ai trouvé pour l'instant est de faire un array avec tous mes id et de boucler dessus pour appliquer la fonction avec un gestionnaire d'événement.
Je vais tester ça, si quelqu'un a une suggestion plus optimisée...

aaarf, g peux pas faire ça...ça dupliquerait x fois la fonction avec un nom identique.