界面效果:
插件js代码:
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);
插件css代码:
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 })
HTML部分:
1 <input type="text" id="guoyansi" />
2 <input type="text" id="sisi" />