小巧简单的jquery颜色选择器（取色板）插件bigcolorpicker 1.0

工作中需要一个取色板功能，网上找了一下挺多的，不过都不是很合适，所有自己写了一个，上图：

 

看了图是不是有似曾相识的感觉，flex有这个UI的取色器，不过网上JS版没找到就自己索性写个了。

 

下面写一些使用方法，具体的请看附件或我的测试主页。

 

一、在bigColorpicker展现颜色选择区域小格时有两种实现方式：

  1、是一张背景图片，采用光标定位的方式获取颜色。p(或P)

  2、每个小格就是一个li，获取li的背景颜色。l(或L)

  实现方式的不同，效率有所差异，可以自己在使用时选择，默认是p(或P)。

 

  在一个页面中只有一种方式是生效的，后定义和执行的那种方式生效。

 

二、参数说明：

 

    $("xxxxx").bigColorpicker(callback,engine);

	  callback:可以是undefined（不传参数时）、字符串、函数
	  		undefined：把选择的颜色设置到绑定bigColorpicker的元素的value上。
	  		字符串：把选择的颜色设置到id为"字符串"的元素的value上。
	  		函数：执行传入的函数以实现自定义的获取颜色后的动作。
	  engine:可以是undefined、p、L
					

三、如果在可以拖拽的浮层上使用取色板的话，需要额外的做一些事件：

  正常情况下单击取色板以外的地方时取色板是自动隐藏的，但是在拖拽时却不会隐藏。

那么拖拽时有两种处理方式：

1、拖拽开始时自动隐藏取色板（以下代码需要写在拖拽的开始时）

 

$(#demo2Text).bigColorpickerHide();

 2、拖拽时取色板的位置随浮层一起移动（以下代码需要写在拖拽的进行时）。

 

$(#demo2Text).bigColorpickerMove();

 

 

例子可以看这里： http://bigui4.sinaapp.com/