changing colors with jquery with a color picker?

Question

i have this jquery script that changes the color of the background instantly by entering a color code into the textbox, the working example is in jsfiddle link below.

http://jsfiddle.net/7jg4e/

but instead of the input field i wanted to use a color picker custom skin, becuase i dont want user to deal with hex code(just like twitter). the jquery plugin im trying to use is found at

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

at the buttom of the page it has the neat color picker with DOM element.

so the problem is how am i going to change from the input type to the color picker div. thanks :))

Answer 1

正如进一步的参考... 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 2

使用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);
  }
});