一款jQuery颜色选择插件

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

首先引入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)。 三个参数讲解如下：

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

$(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();