Picker —简单的和可定制的颜色选择器

选择器是一个简单的、容易使用、多功能和可定制的Javascript颜色选择器。使用选择器非常简单:
var parent = document.getElementById('parent');var picker = new Picker(parent);parent.onclick = function() {    picker.show();};picker.on_done = function(colour) {    parent.style.background = colour.rgba().toString();};
<script src="picker.min.js"></script><div id="parent">click me</div><script>    /* STEP 1 */    /* Create a new picker object and set the parent element. */    var parent = document.getElementById('parent'); /* or jQuery */ $('#parent');    var picker = new Picker(parent);    /* STEP 2 */    /* Set Picker to open when you want, when the parent is clicked for example. */    parent.onclick = function() {        picker.show();    };    /* STEP 3 */    /*    You can do what you want with the chosen colour using two events,    on_change and on_done.    */    picker.on_done = function(colour) {        /*        You can get the colour using the hsl(), hsla(), rgb(), rgba() and hex() functions.        Each function returns an object containing each component (e.g r, g and b) and a        toString() function, which returns the colour as a string to use with CSS or JS.        E.g 'rgba(255, 0, 0, 0.4)'.        */        parent.style.background = colour.rgba().toString();    };    /* on_change is called every time the selection is changed without clicking 'ok' */</script>
也有许多选项,你可以选择。
var picker = new Picker({    /* The colour picker's parent */    parent: (parent element),    /*    Where the colour picker is relative to the parent.    Defaults to 'right'.    */    orientation: ('left', 'right', 'top', 'bottom', 'centre', 'center'),    /*    The colour picker's x position relative to the parent.    Defaults to 'auto'.    */    x: (number),    /*    The colour picker's y position relative to the parent.    Defaults to 'auto'.    */    y: (number),    /*    The colour picker's arrow size.    Defaults to 20.    */    arrow_size: (number)});
你可以定制CSS源文件,或做如下:
picker.wrapper.background = '#333';
简单!