colpick-jQuery顏色選擇器使用說明

 

一、demo及下載網址：http://www.htmleaf.com/jQuery/Color-Picker/20141108417.html

 

二、使用效果

 

三、使用方法

1、引入js和css

   需要引入jquery

< script src = "js/colpick.js" type = "text/javascript" ></ script >

< link rel = "stylesheet" href = "css/colpick.css" type = "text/css" />

2、html

< button id = "picker" >Show Color Picker</ button >

3、導入圖片

4、js彈出選擇框

$( '#picker' ).colpick();

 

四、使用過程中遇到的問題

1、彈框后顏色顯示都是綠色

 原因：官方地址的demo只說明需要引入js和css，卻沒有說要引入圖片，導致了這個問題

colpick.css中 注意下面的圖片地址要正確定位到具體的圖片才行

2、 onChange或其它時間無效

原因：如果js中同時定義了a、b兩個方法就會導致b失效，解決方法為刪除a方法即可

 

a) jQuery("#picker").colpick(); b) jQuery("#picker").colpick({ submit: false, onChange: function (color, color2) { jQuery("#pickerUnActived").css("color", '#' + color2); } });

 

五、相關資源下載

請從群共享中下載