jQuery拾色器插件bigcolorpicker扩展版分享

bigcolorpicker拾色器原版本使用说明：

HTML
页面中首先在head中需要引入jquery库和bigcolorpicker插件，以及所需的样式jquery.bigcolorpicker.css。

<link rel="stylesheet" type="text/css" href="css/jquery.bigcolorpicker.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.bigcolorpicker.min.js"></script>

接着，我们直接在body中放置一个用于触发接收颜色值的input输入框。

<input type="text" id="c1"/>

或者也可以直接放置一个html元素或者按钮。

<a href="javascript:void(0)" id="img"></a>

jQuery
调用bigcolorpicker插件非常简单，直接使用$(element).bigColorpicker(callback,engine,sideLength);
其中callback为回调函数，它可以把选择的颜色设置到绑bigColorpicker的元素的上，也可以自定义函数。engine可以为空，P、L，使用默认P，P代表着拾取器的背景是一张图片，而L则代表着拾取器的小格子是由一个个的li组成。sideLength参数是指小格子的个数，只有engine为L时生效，范围：2-10，默认为6。

$(function(){ 
    //点击输入框选取颜色 
    $("#c1").bigColorpicker("c1"); 
    //点击选色按钮选取颜色 
    $("#btn").bigColorpicker("c2"); 
    //点击方框选取颜色 
    $("#img").bigColorpicker(function(el,color){ 
        $(el).css("background-color",color); 
    }); 
    //选取多个颜色 
    $(".ku").bigColorpicker(function(el,color){ 
        $(el).css("background-color",color); 
    }); 
    //自定义颜色块个数 
    $("#c5").bigColorpicker("c5","L",3); 
});

bigcolorpicker拾色器/颜色选择器扩展版使用说明：
扩展版特点：
1)支持直接展示拾色器面板，原版本只支持点击才弹出拾色器面板
2)支持返回RGB颜色对象，原版本只支持返回hex颜色代码（在回调函数增加了rgb参数）
使用：

$(element).bigColorpicker(callback,engine,sideLength,alwaysShow);

其中，前三个参数是原版本插件的参数，alwaysShow是扩展的参数，默认false，若要直接展示拾色面板，改为true。

jQuery

$(".ku").bigColorpicker(function(el,hex,rgb){
	console.log(rgb.r+','+rgb.g+','+rgb.b);	// 输出rgb颜色代码
},'L', 10, true);

扩展版请到此网站下载：在线颜色选择器