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. });

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

你可能感兴趣的:(jquery)