J'ai ce script jQuery qui change de 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 la liaison JSfiddle ci-dessous.
Mais au lieu du champ d'entrée, je voulais utiliser une peau personnalisée de sélecteur de couleur, car je ne veux pas que l'utilisateur traite avec le code hexagonal (tout comme Twitter). Le plug-in jquery im essayant d'utiliser est trouvé à
http://www.eyecon.ro/colorpicker/
au bout de la page de la page Il a le sélecteur de couleur soigné avec un élément DOM.
Donc, le problème est que je vais changer du type d'entrée au sélecteur de couleur DIV. Merci:))
6 Réponses :
Que diriez-vous:
$('#colorSelector').ColorPicker({
onChange: function(hsb, hex, rgb)
{
$("#full").css("background-color", hex);
}
});
Qu'en est-il du côté HTML des choses
Juste avoir un comme zone de sélection de couleur, puis votre
Remplacez l'élément d'entrée avec une divisez simplement quelque chose comme: (non testé!)
HTML P>
$('#colourPickerText').ColorPicker({
onChange: function(hsb, hex, rgb){
$("#textToBeChanged").css("color", '#' + hex);
}
});
Merci pour la grande réponse, mais imaginez que je voulais aussi changer la couleur du texte, comment est le sélecteur de couleur div dans le HTML va différencier des deux pickers de couleur + upvote de moi :))
Réponse mise à jour Pour montrer comment changer la couleur du texte, vous pouvez avoir 2 cueilleurs de couleurs sur le formulaire, un pour arrière-plan et un pour le texte.
Puis-je vous poser une autre question, désolée, comment puis-je obtenir la valeur (hexagone) lorsque la couleur est gélichée, je peux donc l'enregistrer dans la base de données !! Je suis tellement confus
Utilisez l'événement ONCHANGE, vous obtiendrez la valeur hexagonale là-bas. Voir TheVillagididiots Jsfiddle pour voir comment utiliser la méthode OnChange.
J'ai le même problème et ci-dessous est ma solution.
Modifier ColorPicker.js Line 96
de
cal.data ('colorpicker'). Onchanange.apply (Cal, [Col, Hsbtohex (Col), Hsbtorgb (col)]);
à
cal.data ('colorpicker'). Onchanange.apply (Cal, [Col, Hsbtohex (Col), Hsbtorgb (col), cal.data ('ColorPicker'). El]);
sur l'événement de changement au lieu d'ONCHANGE: Fonction (HSB, HEX, RVB) ...
à
Onchange: Fonction (HSB, HEX, RVB, EL) {
$ (el) .val ('#' + heex);
}
Tout comme référence plus loin ... HTML5 incluait déjà "Couleur" comme type d'entrée.
input[type="color"]{/*css-here*/}
Merci Keithics ..
J'ai eu le problème similaire. Je devais appeler ColorPicker pour des boutons dynamiques. J'ai fait avec la classe en prenant des cours au lieu d'id. P>
Cela m'a beaucoup aidé. P>
$('.colorSelector').ColorPicker({
onChange: function(hsb, hex, rgb,el)
{
$(el).val('#' + hex);
}
});
<div class="colorSets">test</div> <div class="colorSets">test1</div> <input name="MyColorPicker" id="ColorPicker1" [cpPresetLabel]="color" [(colorPicker)]="color" [style.background]="color" (colorPickerChange)="getColor($event)"/> //this is not working in snipest but use as it code and then use npm install it will work for you
Première installation Utilisez cette commande sur le sélecteur de couleurs angulaires Instal "NPM Installer NGX-Color-Picker --Save" dans le code ci-dessus Pas besoin d'utiliser "Laisser dessiner" Il suffit d'utiliser DessinCutilisateur Ceci est pour la solution angulaire
Essayez ceci: jsfiddle.net/spmuv