自己写的jQuery颜色插件
界面效果:
插件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" />
