取色器插件

jQuery颜色选取器插件COLPICK

1、在页面引入colpick,js文件

2、初始方法

$("seletor").colpick();

3、常见的属性及方法使用

flat（是否在页面展示取色面板）：默认为false，true为展示 
layout（颜色表示方法 例如HSB,lab,RGB,CMYK与十六进制表示法）：rgbhex，hex.....
submit(是否显示提交按钮)  在onChange事件调用中默认为true，在onSubmit 事件中默认为false  ：true||false
color（面板初始时的颜色）：颜色值

onChange(取色改变时发生的事件):function(hsb,hex,rgb,el,bySetColor){
　　$(el).css('border-color','#'+hex);          //el执行该事件的对象

   if(!bySetColor) $(el).val(hex);          //bySetColor是否确认改变了颜色

}
onSubmit (确认时调用的事件)： function(hsb, hex, rgb, el){
}
onBeforeShow（显示之前触发的事件）
onShow(显示时触发的事件)
onHide（隐藏时触发的事件）

 

//对象的方法

colpickHide()---面板隐藏

colpickShow()----面板显示


$('#pickpic').colpick({

                    colorScheme: 'light',

                    layout: 'rgbhex',

                    color: '1080C8',

                    onSubmit: function(hsb, hex, rgb, el) {

                        $(el).css('background-color', '#' + hex);

                        $(el).colpickHide();

                    }

                });