jquery-palette-color-picker是一款可自定义颜色的jQuery颜色拾取器插件。你可以为调色板设置各种颜色，该插件支持所有的CSS颜色格式，包括十六进制颜色，rgb，rgba，hsl，hsla等格式的颜色。
使用方法
使用该颜色拾取器插件需要在页面中引入jquery(1.7+)和palette-color-picker.js文件。
HTML结构
该颜色拾取器使用元素作为容器，为它设置一个唯一的name属性。
name属性用于为调色板绑定颜色，如果它不是唯一的，那么所有相同name属性的输入框都会被绑定颜色。
初始化插件
在页面DOM元素加载完毕之后，可以通过paletteColorPicker()方法来初始化该颜色拾取器插件。
$(document).ready(function(){
$('[name="UNIQUE_NAME"]').paletteColorPicker();
// You can use something like...
// $('[data-palette]').paletteColorPicker();
});
颜色属性
颜色拾取器会自动从data-palette属性中获取颜色。
data-palette='["#0F8DFC","rgba(135,1,101)","#F00285",
"hsla(190,41%,95%,1)","#94B77E","#4C060A",
"#053F32","#ED8074","#788364"]' value="#053F32">
你也可以使用一个键值对来作为颜色，如果通过这组方式来设置颜色，那么key值会被显示在input中，这可以使用户看到有意义的颜色名称。
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();
