官方网站：http://www.jscolor.com/  点击打开链接

之前在网上找了一下，没有找到详细的文档，只是讲了基本的使用方法，自己稍微研究了一下，再总结下吧。

首先在官网下载文件，http://jscolor.com/release/latest.zip  ，解压后引入，只需一个js文件，不到60kb。(下面的代码我引入了jquery)

创建一个选择框

<input id="foo" class="jscolor {onFineChange:'update(this)'}" value="fff" >

{onFineChange : 'update(this)'}    这句是鼠标在选择器面板上移动时执行update这个函数，this参数必须传入

在js里创建update函数(函数名可改，与上面对应即可)：

function update(jscolor) {
$('body').css('background-color',('#' + jscolor));
console.log(jscolor)
}

其中jscolor.valueElement是当前点击的input，其他的信息可在控制台里查看打印出的jscolor

效果图：

其他的效果可以去jscolor官网，有一些很简洁明了的demo

默认是点击上面的input显示和隐藏选择器，也可以在其他按钮上绑定事件来控制他的显示和隐藏(默认点击选择器之外的地方，选择器都会自动隐藏)

$('.jscolor')[0].jscolor.show();   //执行此句，选择器将显示，hide则为隐藏

在我的项目中，有这样的需求：点击按钮会创建出一个div，每个div上有一个菜单，点击可以修改这个div的文字颜色，下面附上我的解决办法

首先页面上还是只有一个input和一个update函数，即只使用一个选择器，在update里判断需要修改哪一个div的文字颜色。

创建input时让他display：none  设定点击按钮后才出现。

创建一个全局的变量    var target = null；

update函数：

function update(jscolor) {
$target.css('color',('#' + jscolor));
$('input').css('display','block');
}

给每个div上的按钮绑定事件，点击的时候，修改target的值为当前div，同时还要做一个处理，点击了按钮后保证input框和颜色选择器在按钮的正下方，这样才符合用户体验

	$('.btn').on('click',function(e){
	   	
	   		var thisLeft = $(this).offset().left;
	   		var thisTop = $(this).offset().top;  //获取当前按钮的位置
			$("input").show();  //input显示出来
			$('.jscolor')[0].jscolor.show();  //颜色选择器显示
			$('input').css('left',thisLeft);
			$('input').css('top',(thisTop+20));  //使input的位置在按钮的正下方
			$('body>div').last().css('left',thisLeft); //只能用这种方法将调色板选出来
			$('body>div').last().css('top',(thisTop+42))

			$target = $(this).nextSibling();//选出当前需要修改的div
			cancelBubble(e)
	});

最后在document上绑定事件点击时隐藏input即可实现最终效果。