jquery Color Panel Plugin

/** * jquery color Panel Plugin * * Usage: input box ID default to Inputobj,button box ID default is Btnobj, can also customize AAA,BBB * 1, Initialize color panel: $.color.initcol or (); * 2, binding color panel: $.color.showcolor (); or $.color.showcolor ({inputobj: ' aaa ', Btnobj: ' BBB '}) * @author Ivan [email protected ] * @date December 13, 2014 PM 3:06:55 * @version V1.0 * @param $*/(function($) {$.color= {}; varColorhex = [' xx ', ' A ', ' ' $ ', ' the ', ' ' The ', ' CC ', ' FF ' ]; varSpcolorhex = [' FF0000 ', ' 00ff00 ', ' 0000FF ', ' FFFF00 ', ' 00FFFF ', ' ff00ff ' ]; varColorpanel = ' <div id= "Colorpanel" style= "Position:absolute; Display:none; " ></div> '; functionInitcolor () {$ ("Body"). Append (Colorpanel); varcolortable = ' ';  for(vari = 0; I < 2; i++) {             for(varj = 0; J < 6; J + +) {colortable+ = ' <tr height=12> '; Colortable+ = ' <td width=11 style= "Background-color: #000000" > "; if(i = = 0) {colortable+ = ' <td width=11 style= "background-color:# ' + colorhex[j] + colorhex[j] + colorhex[j] + ' > '; } Else{colortable+ = ' <td width=11 style= ' background-color:# ' + spcolorhex[j] + ' > '; } colortable+ = ' <td width=11 style= "Background-color: #000000" > ";  for(vark = 0; K < 3; k++) {                     for(varL = 0; L < 6; l++) {colortable+ = ' <td width=11 style= "background-color:# ' + colorhex[k + i * 3] + colorhex[l]+ Colorhex[j] + ' > '; } }}} colortable= ' <table width=232 border= ' 0 "cellspacing=" 0 "cellpadding=" 0 "style=" border:1px #000000 solid;border-bottom:none; Border-collapse:collapse "bordercolor=" 000000 "> ' + ' <tr height=30><td colspan=21 bgcolor= #ffff                Ff> ' + ' <table cellpadding= "0" cellspacing= "1" border= "0" style= "border-collapse:collapse" > ' + ' &LT;TR&GT;&LT;TD width= "3" ><td><input type= "text" id= "discolor" size= "6" Disabled style= "border: Solid 1px #000000; Background-color: #ffff00 "></td>" + ' &LT;TD width= "3" ><td><input type = "text" id= "Hexcolor" size= "7" style= "Border:inset 1px;font-family:arial;" value= "#000000" ><a href=### id= "_ Cclose "> Close </a></td></tr></table></td></table> ' + ' <table id=" CT " Border= "1" cellspacing= "0" cellpadding= "0" style= "border-collapse:collapse" bordercolor= "000000" style= "cursor: pointer; " > ' + colortable + '</table> ' ; $("#colorPanel"). HTML (colortable); }        //plug -in defaults$.color.defaults ={inputobj:' Inputobj ', Btnobj:' Btnobj '    }; //Regular expressions for hexadecimal color values    varreg =/^# ([0-9a-fa-f]{3}|[ 0-9A-FA-F]{6}) $/; /*RGB color conversion to 16 binary*/String.prototype.colorHex=function() {        varthat = This; if(/^ (rgb| RGB)/. Test (that)) {            varAcolor = That.replace (/(?: \ \ (|\) |rgb| RGB) */g, ""). Split (","); varStrhex = "#";  for(vari = 0; i < acolor.length; i++) {                varHex = number (Acolor[i]). toString (16); if(Hex = = = "0") {hex+=Hex; } Strhex+=Hex; }            if(Strhex.length!== 7) {Strhex=that ; }            returnStrhex; } Else if(Reg.test (that)) {varAnum = That.replace (/#/, ""). Split (""); if(Anum.length = = 6) {                returnthat ; } Else if(Anum.length = = 3) {                varNumhex = "#";  for(vari = 0; i < anum.length; i + = 1) {Numhex+ = (Anum[i] +Anum[i]); }                returnNumhex; }        } Else {            returnthat ;    }    }; /*16 binary color to RGB format*/STRING.PROTOTYPE.COLORRGB=function() {        varScolor = This. toLowerCase (); if(Scolor &&reg.test (Scolor)) {            if(Scolor.length = = 4) {                varScolornew = "#";  for(vari = 1; I < 4; i + = 1) {scolornew+ = Scolor.slice (i, i + 1). Concat (Scolor.slice (i, I+ 1)); } Scolor=scolornew; }            //handling six-bit color values            varScolorchange = [];  for(vari = 1; I < 7; i + = 2) {Scolorchange.push (parseint ("0x" + scolor.slice (i, i + 2)))); }            return"RGB (" + Scolorchange.join (",") + ")"; } Else {            returnScolor;        }    }; $.color.showcolor=function(options) {varopts =$.extend ({}, $.color.defaults, options); $(' # ' + opts.btnobj). Click (function() {            //positioning            varTtop = $ ( This). Offset (). Top;//control's anchor point height            varThei = $ ( This). Height ();//the height of the control itself            varTleft = $ ( This). Offset (). Left;//the anchor width of the control            $("#colorPanel"). css ({top:ttop+ Thei + 5, left:tleft}); $("#colorPanel"). Show (); $("#CT tr TD"). Unbind ("click"). MouseOver (function() {                varRgbColor = $ ( This). CSS ("Background-color"); varHexcolor =Rgbcolor.colorhex (); $("#DisColor"). CSS ("Background-color"), Hexcolor); $("#HexColor"). Val (Hexcolor); }). Click (function() {                varRgbColor = $ ( This). CSS ("Background-color"); varHexcolor =Rgbcolor.colorhex (); $(' # ' + opts.inputobj). Val (hexcolor). CSS ("Color", Hexcolor); $("#colorPanel"). Hide ();            }); $("#_cclose"). Click (function() {                $("#colorPanel"). Hide (); }). css ({"Font-size": "12px",                "Padding-left": "20px"            });    });        }; $.color.initcolor=function() {initcolor (); $("#colorPanel"). Hide (); };}) (jQuery);

jquery Color Panel Plugin