颜色选择器插件

项目中需要用到颜色插件改变颜色，找了一下，发现了这个插件。1，可以实时地改变颜色，2，颜色选择的范围大

要在head标签里面引进改插件

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

<link rel="stylesheet" href="css/colpick.css" type="text/css"/>
页面：
 1 # <input type="text" id="picker"></input>
 2 JS
 3 
 4 $('#picker').colpick({
 5 
 6     layout:'hex',
 7 
 8     submit:0,
 9 
10     colorScheme:'dark',
11 
12     onChange:function(hsb,hex,rgb,el,bySetColor) {
13 
14         $(el).css('border-color','#'+hex);
15 
16         // Fill the text box just if the color was set using the picker, and not the colpickSetColor function.
17 
18         if(!bySetColor) $(el).val(hex);
19 
20     }
21 
22 }).keyup(function(){
23 
24     $(this).colpickSetColor(this.value);
25 
26 });
27 CSS
28 
29 #picker {
30 
31     margin:0;
32 
33     padding:0;
34 
35     border:0;
36 
37     width:70px;
38 
39     height:20px;
40 
41     border-right:20px solid green;
42 
43     line-height:20px;
44 
45 }

 

效果图：

 插件下载地址：https://git.oschina.net/wxwphp/col.git

 

posted @ 2016-11-04 14:12  wxw婉  阅读(621)  评论(0)  编辑  收藏  举报