After a busy night, I finally finished writing the jquery color selection plug-in. I don't want to talk about it anymore. Let's take a look at the code.
The Code is as follows:
(Function ($ ){
$. Fn. extend ({
SelectColor: function (){
Var _ d = new Date ();
Var _ tem = _ d. getTime ();
Return this. each (function (){
Var showColor = function (_ obj ){
Var _ left = parseInt ($ (_ obj). offset (). left );
Var _ top = parseInt ($ (_ obj). offset (). top );
Var _ width = parseInt ($ (_ obj). width ());
Var _ height = parseInt ($ (_ obj). height ());
Var _ maxindex = function (){
Var ___ index = 0;
$. Each ($ ("*"), function (I, n ){
Var _ tem = ((n).css ("z-index ");
If (_ tem> 0)
{
If (_ tem> ___ index)
{
___ Index = _ tem + 1;
}
}
});
Return ___ index;
}();
Var colorH = new Array ('00', '33', '66', '99', 'cc', 'ff ');
Var ScolorH = new Array ('ff000000', '00ff00', '0000ff', 'ffff00', '00ffff', 'ff00ff ');
Var _ str = new Array ();
For (var n = 0; n <6; n ++)
{
_ Str. push ('');
_ Str. push ('');
For (var I = 0; I <3; I ++)
{
For (var j = 0; j <6; j ++)
{
_ Str. push ('');
}
}
_ Str. push ('');
}
For (var n = 0; n <6; n ++)
{
_ Str. push ('');
_ Str. push ('')
For (var I = 3; I <6; I ++)
{
For (var j = 0; j <6; j ++)
{
_ Str. push ('');
}
}
_ Str. push ('');
}
Var colorStr ='
'
$ ("Body"). append (colorStr );
Var _ currColor;
Var _ currColor2;
$ ("# ColorShowTable _" + _ tem + "td"). mouseover (function (){
Var _ color = background (this).css ("background-color ");
If (_ color. indexOf ("rgb")> = 0)
{
Var _ tmeColor = _ color;
_ TmeColor = _ color. replace ("rgb ","");
_ TmeColor = _ tmeColor. replace ("(","");
_ TmeColor = _ tmeColor. replace (")","");
_ TmeColor = _ tmeColor. replace (new RegExp ("", "gm "),"");
Var _ arr = _ tmeColor. split (",");
Var _ tmeColorStr = "#";
For (var ii = 0; ii <_ arr. length; ii ++)
{
Var _ temstr = parseInt (_ arr [ii]). toString (16 );
_ Temstr = _ temstr. length <2? "0" + _ temstr: _ temstr;
_ TmeColorStr + = _ temstr;
}
}
$ ("# Color_txt _" + _ tem). val (_ tmeColorStr );
$ ("# ColorShow _" +_tem).css ("background-color", _ color );
_ CurrColor = _ color;
_ CurrColor2 = _ tmeColorStr;
Certificate (this).css ("background-color", "# FFFFFF ");
});
$ ("# ColorShowTable _" + _ tem + "td"). mouseout (function (){
Certificate (this).css ("background-color", _ currColor );
});
$ ("# ColorShowTable _" + _ tem + "td"). click (function (){
$ (_ Obj). val (_ currColor2 );
});
}
$ (This). click (function (){
ShowColor (this );
});
Var _ sobj = this;
$ (Document). click (function (e ){
E = e? E: window. event;
Var tag = e. srcElement | e.tar get;
If (_ sobj. id = tag. id) return;
Var _ temObj = tag;
While (_ temObj)
{
If (_ temObj. id = "colorShowDiv _" + _ tem) return;
_ TemObj = _ temObj. parentNode;
}
$ ("# ColorShowDiv _" + _ tem). remove ();
});
});
}
});
}) (JQuery );
Usage:
The Code is as follows:
$ (Document). ready (function (){
$ ("# ID to bind"). selectColor ();
});
Note: the object to be bound must be a text input box.