CSDN博客

img wlkjhxd

jquery的颜色选择插件

发表于2008/10/1 2:50:00  1320人阅读

分类: JAVASCRIPT

忙了一夜,终于把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. });

 

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

0 0

相关博文

我的热门文章

img
取 消
img