jquery的颜色选择插件

忙了一夜，终于把jquery的颜色选择插件写完了，不多说了，看看代码吧。

 

1. (function($){
2.       $.fn.extend({
3.           selectColor:function(){
4.             var _d = new Date();
5.             var _tem = _d.getTime();
6.               return this.each(function(){
7.                 var showColor = function(_obj){
8.                     var _left = parseInt($(_obj).offset().left);
9.                     var _top = parseInt($(_obj).offset().top);
10.                     var _width = parseInt($(_obj).width());
11.                     var _height = parseInt($(_obj).height());
12.                     var _maxindex = function(){
13.                         var ___index = 0;
14.                         $.each($("*"),function(i,n){
15.                              var __tem = $(n).css("z-index");
16.                              if(__tem>0)
17.                              {
18.                                 if(__tem > ___index)
19.                                 {
20.                                     ___index = __tem + 1;   
21.                                 }
22.                              }
23.                          });
24.                         return ___index;
25.                     }();
26.                     
27.                     var colorH = new Array('00','33','66','99','CC','FF');
28.                     var ScolorH = new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF');
29.                     var _str = new Array();
30.                     for(var n = 0 ; n < 6 ; n++)
31.                     {
32.                         _str.push('<tr height="11">');
33.                         _str.push('<td style="width:11px;background-color:#'+colorH[n]+colorH[n]+colorH[n]+'"></td>');
34.                         for(var i = 0 ; i < 3; i++)
35.                         {
36.                             for(var j = 0 ; j < 6 ; j++)
37.                             {
38.                                 _str.push('<td style="width:11px;background-color:#'+colorH[i]+colorH[j]+colorH[n]+'"></td>');
39.                             }
40.                         }
41.                         _str.push('</tr>');
42.                     }
43.                     for(var n = 0 ; n < 6 ; n++)
44.                     {
45.                         _str.push('<tr height="11">');
46.                         _str.push('<td style="width:11px;background-color:#'+ScolorH[n]+'"></td>')
47.                         for(var i = 3 ; i < 6; i++)
48.                         {
49.                             for(var j = 0 ; j < 6 ; j++)
50.                             {
51.                                 _str.push('<td style="width:11px;background-color:#'+colorH[i]+colorH[j]+colorH[n]+'"></td>');
52.                             }
53.                         }
54.                         _str.push('</tr>');
55.                     }
56.                     var colorStr = '<div id="colorShowDiv_'+_tem+'" style="width:229px;position:absolute;z-index:'+_maxindex+';left:'+(_left+_width)+'px;top:'+(_top+_height)+'px;"><table style="width:100%; height:30px; background-color:#CCCCCC;"><tr><td style="width:40%;"><div id="colorShow_'+_tem+'" style="width:80px; height:18px; border:solid 1px #000000; background-color:#FFFFFF;"></div></td><td style="width:60%;"><input id="color_txt_'+_tem+'" type="text" style="width:100px; height:16px;" value="#FFFFFF" /></td></tr></table><table id="colorShowTable_'+_tem+'" cellpadding="0" cellspacing="1" style="background-color:#000000;">'+_str.join('')+'</table></div>'
57.                     $("body").append(colorStr);
58.                     var _currColor;
59.                     var _currColor2;
60.                     $("#colorShowTable_"+_tem+" td").mouseover(function(){
61.                         var _color = $(this).css("background-color");
62.                         if(_color.indexOf("rgb")>=0)
63.                         {
64.                             var _tmeColor = _color;
65.                             _tmeColor = _color.replace("rgb","");
66.                             _tmeColor = _tmeColor.replace("(","");
67.                             _tmeColor = _tmeColor.replace(")","");
68.                             _tmeColor = _tmeColor.replace(new RegExp(" ","gm"),"");
69.                             var _arr = _tmeColor.split(",");
70.                             var _tmeColorStr = "#";
71.                             for(var ii = 0 ; ii < _arr.length ; ii++)
72.                             {
73.                                 var _temstr = parseInt(_arr[ii]).toString(16);
74.                                 _temstr = _temstr.length < 2 ? "0"+_temstr : _temstr;
75.                                 _tmeColorStr += _temstr;
76.                             }
77.                         }
78.                         $("#color_txt_"+_tem).val(_tmeColorStr);
79.                         $("#colorShow_"+_tem).css("background-color",_color);
80.                         _currColor = _color;
81.                         _currColor2 = _tmeColorStr;
82.                         $(this).css("background-color","#FFFFFF");
83.                         });
84.                     $("#colorShowTable_"+_tem+" td").mouseout(function(){
85.                         $(this).css("background-color",_currColor);
86.                         });
87.                     $("#colorShowTable_"+_tem+" td").click(function(){
88.                         $(_obj).val(_currColor2);
89.                         });
90.                 }
91.                 $(this).click(function(){
92.                     showColor(this);
93.                 });
94.                 var _sobj = this;
95.                 $(document).click(function(e){
96.                     e = e ? e : window.event;
97.                     var tag = e.srcElement || e.target;
98.                     if(_sobj.id==tag.id)return;
99.                     var _temObj = tag;
100.                     while(_temObj)
101.                     {
102.                         if(_temObj.id=="colorShowDiv_"+_tem)return;
103.                         _temObj = _temObj.parentNode;
104.                     }
105.                     $("#colorShowDiv_"+_tem).remove();             
106.                 });
107.             });
108.         }
109.       });
110. })(jQuery);

 

使用方法：

 

1. $(document).ready(function(){
2.     $("#要绑定的ID").selectColor();
3. });

 

注意：要绑定的对像一定要是文本输入框