一款jQuery颜色选择插件

本文将给大家介绍一款非常好用的颜色选择插件插件：bigcolorpicker。通过这款颜色选择插件，可以直接获取颜色值，方便快捷。

分类：其它特效 > 颜色选择器难易：中级

查看演示下载资源下载积分： 20 积分

首先引入jquery库和bigcolorpicker插件。

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

接着我们放4个颜色选择示例：

<ul> 
   <li> 
      <h3>1.点击输入框选取颜色</h3> 
      <input type="text" id="input_1" /> 
   </li> 
   <li> 
      <h3>2.点击“选色”按钮选取颜色</h3> 
      <input type="text" id="input_2" />
      <input id="color_button" type="button" value="选色" /> 
    </li> 
   <li> 
      <h3>3.点击方框选取颜色</h3> 
      <a href="javascript:void(0)" id="square_one"></a> 
   </li> 
   <li> 
      <h3>4.点击多个方框选取颜色</h3> 
      <a href="javascript:void(0)" class="square"></a> 
      <a href="javascript:void(0)" class="square"></a> 
      <a href="javascript:void(0)" class="square"></a> 
      <a href="javascript:void(0)" class="square"></a>
   </li> 
</ul>

jQuery

bigcolorpicker函数的调用方法：$(element).bigColorpicker(callback,engine,sideLength)。三个参数讲解如下：

<ul class="ul_demo"> <li>第一个参数callback为回调函数，它可以把选择的颜色设置到绑bigColorpicker的元素上，也可自定义函数。</li> <li> 第二个参数engine可以为空，有两个值：P、L，其中默认P代表着拾取器的背景是一张图片，而L则代表着拾取器的小格子是由li标签组成。 </li> <li>sideLength参数是指小格子的个数，只有engine为L时生效，范围：2-10，默认值6。 </li> </ul>

$(function() {
    $("#input_1").bigColorpicker("input_1");
    $("#color_button").bigColorpicker("input_2");
    $("#square_one").bigColorpicker(function(el, color) {
        $(el).css("background-color", color);
    });
    $(".square").bigColorpicker(function(el, color) {
        $(el).css("background-color", color);
    });
    $("#c5").bigColorpicker("c5", "L", 3);
});

在移动的弹出层上操作颜色选择器时，有两种方法介绍下：

1、拖拽开始时自动隐藏取色板（必须在拖拽开始时）

$(element).bigColorpickerHide();

2、拖拽时取色板的位置随浮层一起移动（必须在拖拽进行时）

$(element).bigColorpickerMove();