自己写的jQuery颜色插件

界面效果:

插件js代码:

 ;(function ($) {
             //122种颜色
             var aColors = [
 "ff0000", "ffff00", "00ff00", "00ffff", "0000ff", "ff00ff", "ffffff", "eeeeee", "e5e5e5", "dcdcdc", "d2d2d2", "c9c9c9", "bfbfbf", "b5b5b5", "aaaaaa", "a0a0a0",
 "e60012", "fff100", "fff100", "00a0e9", "1d2088", "e4007f", "959595", "898989", "7d7d7d", "707070", "626262", "535353", "434343", "313131", "1b1b1b", "000000",
 "f29b76", "f6b37f", "facd89", "fff799", "cce198", "acd598", "89c997", "84ccc9", "7ecef4", "88abda", "8c97cb", "8f82bc", "aa89bd", "c490bf", "f19ec2", "f29c9f",
 "ec6941", "f19149", "f8b551", "fff45c", "b3d465", "80c269", "32b16c", "13b5b1", "00b7ee", "448aca", "556fb5", "5f52a0", "8957a1", "ae5da1", "ea68a2", "eb6877",
 "e60012", "eb6100", "f39800", "fff100", "8fc31f", "22ac38", "009944", "009e96", "00a0e9", "0068b7", "00479d", "1d2088", "601986", "920783", "e4007f", "e5004f",
 "a40000", "a84200", "ac6a00", "b7aa00", "638c0b", "097c25", "007130", "00736d", "0075a9", "004986", "002e73", "100964", "440062", "6a005f", "a4005b", "a40035",
 "7d0000", "7f2d00", "834e00", "8a8000", "486a00", "005e15", "00561f", "005752", "005982", "003567", "001c58", "03004c", "440062", "500047", "7e0043", "7d0022",
 "d1c0a5", "a6937c", "7e6b5a", "59493f", "362e2b", "cfa972", "b28850", "996c33", "81511c", "6a3906"
         ];
             function html() {//128个td;
                 var tdCount=0,colorCount=aColors.length,bjColor="";
                 var html = "";
                 html+="<div id='gysColor'>";
                 html += "<div class='gysColorTop'><span class='gysColorDisplay'></span><span class='gysColorValue'></span><span class='gysColorClose'>关闭</span></div>";
                 html += "<table  cellpadding='0' cellspacing='0' border='1'>";
                 for (var tr = 1; tr <= 8; tr++) {
                     html += "<tr>";
                     for (var td = 1; td <= 16; td++) {
                     if(tdCount>=colorCount)
                         html += "<td style='background-color:#fff;' colorValue='fff'></td>";
                     else
                     html+="<td style='background-color:#"+aColors[tdCount]+";' colorValue='"+aColors[tdCount]+"'></td>";
                     tdCount++;
                     }
                     html+="</tr>";
                 }
                 html += "</table>";
                 html += "</div>";
                 return html;
             }
             function colorPostion(obj,objColor){
                     var offset=obj.offset();
                     var objLeft=offset.left;
                     var objTop=offset.top;
                     var objHeight=obj.outerHeight();
                     var nowTop = objHeight + objTop;
                     objColor.show().css({left:objLeft+"px",top:nowTop+"px"});
             }
             var defaults={};
             $.fn.gysColor=function(options){
                 var obj=this;
                 var currentObj=null;
                 options=$.extend(defaults,options);
                 $("body").append(html());
                 $("#guo").val(html());
                var objColor=$("#gysColor");
                obj.on("focus",function(){
                     colorPostion($(this),objColor);       currentObj=$(this);
                 }).on("click",function(){
                    colorPostion($(this),objColor);currentObj=$(this);
                 });
                 objColor.on("click",".gysColorClose",function(){
                     objColor.hide();
                 }).on("mouseover","td",function(){
                     var tdColor=$(this).css("background-color");
                     $(".gysColorDisplay",objColor).css("background-color",tdColor);
                     $(".gysColorValue",objColor).html("#"+$(this).attr("colorValue"));
                 }).on("click","td",function(){
                     currentObj.val("#"+$(this).attr("colorValue"));
                     objColor.hide();
                 }).on("mouseleave",function(){
                     //$(this).hide();
                 });
              return obj;
             }
         })(jQuery);

插件css代码:

 #gysColor{ position:absolute;  background-color:#ccc; width:200px; display:none;}
     #gysColor .gysColorTop{ width:auto; height:30px;padding-top:5px; border:1px solid black; border-bottom:none; }
     #gysColor .gysColorTop span.gysColorDisplay{ width:50px; height:20px; border:1px solid black; display:block; float:left; margin-left:10px;}
     #gysColor .gysColorTop span.gysColorValue{ width:70px; height:20px; line-height:20px; float:left; margin-left:10px; display:block; background-color:White;font-family:微软雅黑; font-size:12px; border:1px solid black;}
     #gysColor .gysColorTop span.gysColorClose{ display:block; float:right; font-family:微软雅黑; font-size:12px; height:20px; line-height:20px; margin-right:10px; cursor:pointer;}
     #gysColor .gysColorTop span.gysColorClose:hover{ color:Blue;}
     #gysColor table{ clear:both; width:100%; height:100px; background-color:Black;}

插件的调用:

 $(function () {
           $("#guoyansi,#sisi").gysColor({})//.css("background-color","red");;
         })

HTML部分:

 <input type="text" id="guoyansi" />
 <input type="text" id="sisi" />