jquery的颜色选择插件

 

(function($){ 
      $.fn.extend({ 
          selectColor:function(){ 
            var _d = new Date(); 
            var _tem = _d.getTime(); 
              return this.each(function(){ 
                var showColor = function(_obj){ 
                    var _left = parseInt($(_obj).offset().left); 
                    var _top = parseInt($(_obj).offset().top); 
                    var _width = parseInt($(_obj).width()); 
                    var _height = parseInt($(_obj).height()); 
                    var _maxindex = function(){ 
                        var ___index = 0; 
                        $.each($("*"),function(i,n){ 
                             var __tem = $(n).css("z-index"); 
                             if(__tem>0) 
                             { 
                                if(__tem > ___index) 
                                { 
                                    ___index = __tem + 1;    
                                } 
                             } 
                         }); 
                        return ___index; 
                    }(); 
                     
                    var colorH = new Array('00','33','66','99','CC','FF'); 
                    var ScolorH = new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF'); 
                    var _str = new Array(); 
                    for(var n = 0 ; n < 6 ; n++) 
                    { 
                        _str.push('<tr height="11">'); 
                        _str.push('<td style="width:11px;background-color:#'+colorH[n]+colorH[n]+colorH[n]+'"></td>'); 
                        for(var i = 0 ; i < 3; i++) 
                        { 
                            for(var j = 0 ; j < 6 ; j++) 
                            { 
                                _str.push('<td style="width:11px;background-color:#'+colorH[i]+colorH[j]+colorH[n]+'"></td>'); 
                            } 
                        } 
                        _str.push('</tr>'); 
                    } 
                    for(var n = 0 ; n < 6 ; n++) 
                    { 
                        _str.push('<tr height="11">'); 
                        _str.push('<td style="width:11px;background-color:#'+ScolorH[n]+'"></td>') 
                        for(var i = 3 ; i < 6; i++) 
                        { 
                            for(var j = 0 ; j < 6 ; j++) 
                            { 
                                _str.push('<td style="width:11px;background-color:#'+colorH[i]+colorH[j]+colorH[n]+'"></td>'); 
                            } 
                        } 
                        _str.push('</tr>'); 
                    } 
                    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>' 
                    $("body").append(colorStr); 
                    var _currColor; 
                    var _currColor2; 
                    $("#colorShowTable_"+_tem+" td").mouseover(function(){ 
                        var _color = $(this).css("background-color"); 
                        if(_color.indexOf("rgb")>=0) 
                        { 
                            var _tmeColor = _color; 
                            _tmeColor = _color.replace("rgb",""); 
                            _tmeColor = _tmeColor.replace("(",""); 
                            _tmeColor = _tmeColor.replace(")",""); 
                            _tmeColor = _tmeColor.replace(new RegExp(" ","gm"),""); 
                            var _arr = _tmeColor.split(","); 
                            var _tmeColorStr = "#"; 
                            for(var ii = 0 ; ii < _arr.length ; ii++) 
                            { 
                                var _temstr = parseInt(_arr[ii]).toString(16); 
                                _temstr = _temstr.length < 2 ? "0"+_temstr : _temstr; 
                                _tmeColorStr += _temstr; 
                            } 
                        } 
                        $("#color_txt_"+_tem).val(_tmeColorStr); 
                        $("#colorShow_"+_tem).css("background-color",_color); 
                        _currColor = _color; 
                        _currColor2 = _tmeColorStr; 
                        $(this).css("background-color","#FFFFFF"); 
                        }); 
                    $("#colorShowTable_"+_tem+" td").mouseout(function(){ 
                        $(this).css("background-color",_currColor); 
                        }); 
                    $("#colorShowTable_"+_tem+" td").click(function(){ 
                        $(_obj).val(_currColor2); 
                        }); 
                } 
                $(this).click(function(){ 
                    showColor(this); 
                }); 
                var _sobj = this; 
                $(document).click(function(e){ 
                    e = e ? e : window.event; 
                    var tag = e.srcElement || e.target; 
                    if(_sobj.id==tag.id)return; 
                    var _temObj = tag; 
                    while(_temObj) 
                    { 
                        if(_temObj.id=="colorShowDiv_"+_tem)return; 
                        _temObj = _temObj.parentNode; 
                    } 
                    $("#colorShowDiv_"+_tem).remove();              
                }); 
            }); 
        } 
      }); 
})(jQuery);

使用方法：

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

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