1 ;(function ($) {
 2             //122种颜色
 3             var aColors = [
 4 "ff0000", "ffff00", "00ff00", "00ffff", "0000ff", "ff00ff", "ffffff", "eeeeee", "e5e5e5", "dcdcdc", "d2d2d2", "c9c9c9", "bfbfbf", "b5b5b5", "aaaaaa", "a0a0a0",
 5 "e60012", "fff100", "fff100", "00a0e9", "1d2088", "e4007f", "959595", "898989", "7d7d7d", "707070", "626262", "535353", "434343", "313131", "1b1b1b", "000000",
 6 "f29b76", "f6b37f", "facd89", "fff799", "cce198", "acd598", "89c997", "84ccc9", "7ecef4", "88abda", "8c97cb", "8f82bc", "aa89bd", "c490bf", "f19ec2", "f29c9f",
 7 "ec6941", "f19149", "f8b551", "fff45c", "b3d465", "80c269", "32b16c", "13b5b1", "00b7ee", "448aca", "556fb5", "5f52a0", "8957a1", "ae5da1", "ea68a2", "eb6877",
 8 "e60012", "eb6100", "f39800", "fff100", "8fc31f", "22ac38", "009944", "009e96", "00a0e9", "0068b7", "00479d", "1d2088", "601986", "920783", "e4007f", "e5004f",
 9 "a40000", "a84200", "ac6a00", "b7aa00", "638c0b", "097c25", "007130", "00736d", "0075a9", "004986", "002e73", "100964", "440062", "6a005f", "a4005b", "a40035",
10 "7d0000", "7f2d00", "834e00", "8a8000", "486a00", "005e15", "00561f", "005752", "005982", "003567", "001c58", "03004c", "440062", "500047", "7e0043", "7d0022",
11 "d1c0a5", "a6937c", "7e6b5a", "59493f", "362e2b", "cfa972", "b28850", "996c33", "81511c", "6a3906"
12         ];
13             function html() {//128个td;
14                 var tdCount=0,colorCount=aColors.length,bjColor="";
15                 var html = "";
16                 html+="<div id=‘gysColor‘>";
17                 html += "<div class=‘gysColorTop‘><span class=‘gysColorDisplay‘></span><span class=‘gysColorValue‘></span><span class=‘gysColorClose‘>关闭</span></div>";
18                 html += "<table  cellpadding=‘0‘ cellspacing=‘0‘ border=‘1‘>";
19                 for (var tr = 1; tr <= 8; tr++) {
20                     html += "<tr>";
21                     for (var td = 1; td <= 16; td++) {
22                     if(tdCount>=colorCount)
23                         html += "<td style=‘background-color:#fff;‘ colorValue=‘fff‘></td>";
24                     else
25                     html+="<td style=‘background-color:#"+aColors[tdCount]+";‘ colorValue=‘"+aColors[tdCount]+"‘></td>";
26                     tdCount++;
27                     }
28                     html+="</tr>";
29                 }
30                 html += "</table>";
31                 html += "</div>";
32                 return html;
33             }
34             function colorPostion(obj,objColor){
35                     var offset=obj.offset();
36                     var objLeft=offset.left;
37                     var objTop=offset.top;
38                     var objHeight=obj.outerHeight();
39                     var nowTop = objHeight + objTop;
40                     objColor.show().css({left:objLeft+"px",top:nowTop+"px"});                   
41             }
42             var defaults={};
43             $.fn.gysColor=function(options){
44                 var obj=this;
45                 var currentObj=null;
46                 options=$.extend(defaults,options);
47                 $("body").append(html());
48                 $("#guo").val(html());
49                var objColor=$("#gysColor");
50                obj.on("focus",function(){
51                     colorPostion($(this),objColor);       currentObj=$(this);  
52                 }).on("click",function(){
53                    colorPostion($(this),objColor);currentObj=$(this);  
54                 });
55                 objColor.on("click",".gysColorClose",function(){
56                     objColor.hide();
57                 }).on("mouseover","td",function(){
58                     var tdColor=$(this).css("background-color");
59                     $(".gysColorDisplay",objColor).css("background-color",tdColor);
60                     $(".gysColorValue",objColor).html("#"+$(this).attr("colorValue"));
61                 }).on("click","td",function(){
62                     currentObj.val("#"+$(this).attr("colorValue"));
63                     objColor.hide();
64                 }).on("mouseleave",function(){
65                     //$(this).hide();
66                 });
67              return obj;
68             }
69         })(jQuery);

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

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

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