changer les couleurs avec jquery avec un sélecteur de couleur?

Question

J'ai ce script jquery qui change la couleur de l'arrière-plan instantanément en entrant un code de couleur dans la zone de texte, l'exemple de travail est dans le lien jsfiddle ci-dessous.

http://jsfiddle.net/7jg4e/

mais au lieu du champ d'entrée que je voulais utiliser une peau de sélecteur de couleur personnalisée, becuase je ne veux pas l'utilisateur de traiter avec le code hexadécimal (comme Twitter). le plugin jquery im essayant d'utiliser se trouve à

http://www.eyecon.ro/colorpicker/

au buttom de la page, il a le sélecteur de couleur propre avec l'élément DOM. Donc, le problème est de savoir comment je vais passer du type d'entrée à la div de sélecteur de couleur. merci :))

Answer 1

Remplacer l'élément d'entrée avec une utilisation div quelque chose comme: (non testé)

HTML

<div id='colourPicker'></div> 

JS

$('#colourPicker').ColorPicker({ 
    onChange: function(hsb, hex, rgb){ 
    $("#full").css("background-color", '#' + hex); 
    } 
}); 

Il y a un exemple au bas du lien que vous avez qui vous montre comment.

Mise à jour pour modifier le texte

HTML

<div id='colourPickerText'></div> 
<div id='textToBeChanged'>Test text</div> 

JS

$('#colourPickerText').ColorPicker({ 
    onChange: function(hsb, hex, rgb){ 
    $("#textToBeChanged").css("color", '#' + hex); 
    } 
}); 

Answer 2

Que diriez-vous:

$('#colorSelector').ColorPicker({ 
onChange: function(hsb, hex, rgb) 
      { 
      $("#full").css("background-color", hex); 
      } 
}); 

Answer 3

J'ai le même problème et ci-dessous est ma solution.

modifier colorpicker.js ligne 96

de

cal.data ('colorpicker'). OnChange.apply (cal, [col, HSBToHex (col), HSBToRGB (col)])

à

cal.data ('colorpicker'). OnChange.apply (cal, [col, HSBToHex (col), HSBToRGB (col), cal.data ('colorpicker') .el]);

sur l'événement de changement au lieu de onChange: function (HSB, hexagonale, rgb) ...

à

onChange: function (HSB, hexagonale, rgb, el) {
$ (el).val ('#' + hex);
}

Answer 4

Tout comme autre référence ... HTML5 comprennent déjà "couleur" comme type d'entrée.

<label for="bg">Choose color:</label> 
<input id="bg" type="color" /> 

De plus, vous pouvez appliquer un style CSS avec:

input[type="color"]{/*css-here*/} 

Maintenant, pour la question principale ... vous pouvez saisir la valeur de couleur pour changer la bg couleur avec un simple script. exemple en direct: http://jsfiddle.net/7jg4e/152/

Answer 5

Merci keithics ..

J'ai eu le même problème. J'ai dû appeler colorpicker pour les boutons dynamiques. Je l'ai fait avec la classe au lieu d'id.

Ça m'a beaucoup aidé.

$('.colorSelector').ColorPicker({ 
onChange: function(hsb, hex, rgb,el) 
     { 
     $(el).val('#' + hex); 
     } 
});