自己写的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" />