可自定义颜色的jQuery颜色拾取器插件

jquery-palette-color-picker是一款可自定义颜色的jQuery颜色拾取器插件。你可以为调色板设置各种颜色，该插件支持所有的CSS颜色格式，包括十六进制颜色，rgb，rgba，hsl，hsla等格式的颜色。

使用方法

使用该颜色拾取器插件需要在页面中引入jquery(1.7+)和palette-color-picker.js文件。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="src/palette-color-picker.js"></script>                  
                

HTML结构

该颜色拾取器使用<input>元素作为容器，为它设置一个唯一的name属性。

<input type="text" name="UNIQUE_NAME">                 
                

name属性用于为调色板绑定颜色，如果它不是唯一的，那么所有相同name属性的输入框都会被绑定颜色。

初始化插件

在页面DOM元素加载完毕之后，可以通过paletteColorPicker()方法来初始化该颜色拾取器插件。

$(document).ready(function(){
  $('[name="UNIQUE_NAME"]').paletteColorPicker();
  // You can use something like...
  // $('[data-palette]').paletteColorPicker();
});
                

颜色属性

颜色拾取器会自动从data-palette属性中获取颜色。

<input type="text" name="unique-name-2" 
    data-palette='["#0F8DFC","rgba(135,1,101)","#F00285",
            "hsla(190,41%,95%,1)","#94B77E","#4C060A",
            "#053F32","#ED8074","#788364"]' value="#053F32">                 
                

你也可以使用一个键值对来作为颜色，如果通过这组方式来设置颜色，那么key值会被显示在input中，这可以使用户看到有意义的颜色名称。

<input type="text" name="unique-name-1" 
    data-palette='[{"primary": "#E91E63"},{"primary_dark": "#C2185B"},
               {"primary_light": "#F8BBD0"},{"accent": "#CDDC39"},
               {"primary_text": "#212121"},{"secondary_text": "#727272"},
               {"divider": "#B6B6B6"}]' value="primary">                 
                

你也可以在初始化插件时通过colors配置参数来设置颜色：

$(document).ready(function(){
  $('[name="UNIQUE_NAME"]').paletteColorPicker({
    colors: ["#0F8DFC","rgba(135,1,101)","#F00285","hsla(190,41%,95%,1)"]
  });
});                  
                

配置参数

$(document).ready(function(){
  // Advanced exacmple
  $('[name="UNIQUE_NAME"]').paletteColorPicker({
    // Color in { key: value } format
    colors: [
      {"primary": "#E91E63"},
      {"primary_dark": "#C2185B"},
      {"primary_light": "#F8BBD0"},
      {"accent": "#CDDC39"},
      {"primary_text": "#212121"},
      {"secondary_text": "#727272"},
      {"divider": "#B6B6B6"}
    ],
    // Add custom class to the picker
    custom_class: 'double',
    // Force the position of picker's bubble
    position: 'downside', // default -> 'upside'
    // Where is inserted the color picker's button, related to the input
    insert: 'after', // default -> 'before'
    // Clear button on last position
    clear_btn: 'last' // default -> 'first'
    // Timeout for the picker's fade out in ms
    timeout: 2000 // default -> 2000
  });
});                  
                

销毁插件：

$( input_element ).data('paletteColorPickerPlugin').destroy();                  
                

jquery-palette-color-picker颜色拾取器插件的github地址为：https://github.com/carloscabo/jquery-palette-color-picker