取色器插件

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

                    }

                });