用颜色选择器用jquery改变颜色？

Question

我有这个jquery脚本，通过在文本框中输入颜色代码立即改变背景的颜色，工作示例在下面的jsfiddle链接。

http://jsfiddle.net/7jg4e/

但是我想使用颜色选择器自定义皮肤而不是输入字段，因为我不希望用户处理十六进制代码（就像twitter一样）。我试图使用的jquery插件是在

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

在页面的底部，它具有DOM元素的最佳颜色选择器。

所以问题是我将如何从输入类型更改为颜色选择器div。谢谢 ：））

Answer 1

使用div替换输入元素:(未经测试！）

HTML

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

JS

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

您可以在链接底部找到一个示例，向您展示如何操作。

更新文本

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

正如进一步的参考... HTML5已经包含“颜色”作为输入类型。

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

另外，您可以应用一些css样式：

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

现在，对于主要问题...您可以捕获颜色值以使用简单的脚本更改bg颜色。实例：http://jsfiddle.net/7jg4e/152/

Answer 3

怎么样：

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

Answer 4

谢谢keithics ..

我有类似的问题。我不得不为动态按钮调用colorpicker。我做了上课而不是上课。

这对我帮助很大。

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

Answer 5

我有同样的问题，下面是我的解决方案。

编辑colorpicker.js第96行

从

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]）;

on change事件而不是onChange：function（hsb，hex，rgb）...

至

onChange：function（hsb，hex，rgb，el）{ $（el）.val（'＃'+ hex）; }