jquery的颜色选择插件

忙了一夜，终于把jquery的颜色选择插件写完了，不多说了，看看代码吧。

1. (function($){
2. $.fn.extend({
3. selectColor:function(){
4. var_d=newDate();
5. var_tem=_d.getTime();
6. returnthis.each(function(){
7. varshowColor=function(_obj){
8. var_left=parseInt($(_obj).offset().left);
9. var_top=parseInt($(_obj).offset().top);
10. var_width=parseInt($(_obj).width());
11. var_height=parseInt($(_obj).height());
12. var_maxindex=function(){
13. var___index=0;
14. $.each($("*"),function(i,n){
15. var__tem=$(n).css("z-index");
16. if(__tem>0)
17. {
18. if(__tem>___index)
19. {
20. ___index=__tem+1;
21. }
22. }
23. });
24. return___index;
25. }();
27. varcolorH=newArray('00','33','66','99','CC','FF');
28. varScolorH=newArray('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF');
29. var_str=newArray();
30. for(varn=0;n<6;n++)
31. {
32. _str.push('<trheight="11">');
33. _str.push('<tdstyle="width:11px;background-color:#'+colorH[n]+colorH[n]+colorH[n]+'"></td>');
34. for(vari=0;i<3;i++)
35. {
36. for(varj=0;j<6;j++)
37. {
38. _str.push('<tdstyle="width:11px;background-color:#'+colorH[i]+colorH[j]+colorH[n]+'"></td>');
39. }
40. }
41. _str.push('</tr>');
42. }
43. for(varn=0;n<6;n++)
44. {
45. _str.push('<trheight="11">');
46. _str.push('<tdstyle="width:11px;background-color:#'+ScolorH[n]+'"></td>')
47. for(vari=3;i<6;i++)
48. {
49. for(varj=0;j<6;j++)
50. {
51. _str.push('<tdstyle="width:11px;background-color:#'+colorH[i]+colorH[j]+colorH[n]+'"></td>');
52. }
53. }
54. _str.push('</tr>');
55. }
56. varcolorStr='<divid="colorShowDiv_'+_tem+'"style="width:229px;position:absolute;z-index:'+_maxindex+';left:'+(_left+_width)+'px;top:'+(_top+_height)+'px;"><tablestyle="width:100%;height:30px;background-color:#CCCCCC;"><tr><tdstyle="width:40%;"><divid="colorShow_'+_tem+'"style="width:80px;height:18px;border:solid1px#000000;background-color:#FFFFFF;"></div></td><tdstyle="width:60%;"><inputid="color_txt_'+_tem+'"type="text"style="width:100px;height:16px;"value="#FFFFFF"/></td></tr></table><tableid="colorShowTable_'+_tem+'"cellpadding="0"cellspacing="1"style="background-color:#000000;">'+_str.join('')+'</table></div>'
57. $("body").append(colorStr);
58. var_currColor;
59. var_currColor2;
60. $("#colorShowTable_"+_tem+"td").mouseover(function(){
61. var_color=$(this).css("background-color");
62. if(_color.indexOf("rgb")>=0)
63. {
64. var_tmeColor=_color;
65. _tmeColor=_color.replace("rgb","");
66. _tmeColor=_tmeColor.replace("(","");
67. _tmeColor=_tmeColor.replace(")","");
68. _tmeColor=_tmeColor.replace(newRegExp("","gm"),"");
69. var_arr=_tmeColor.split(",");
70. var_tmeColorStr="#";
71. for(varii=0;ii<_arr.length;ii++)
72. {
73. var_temstr=parseInt(_arr[ii]).toString(16);
74. _temstr=_temstr.length<2?"0"+_temstr:_temstr;
75. _tmeColorStr+=_temstr;
76. }
77. }
78. $("#color_txt_"+_tem).val(_tmeColorStr);
79. $("#colorShow_"+_tem).css("background-color",_color);
80. _currColor=_color;
81. _currColor2=_tmeColorStr;
82. $(this).css("background-color","#FFFFFF");
83. });
84. $("#colorShowTable_"+_tem+"td").mouseout(function(){
85. $(this).css("background-color",_currColor);
86. });
87. $("#colorShowTable_"+_tem+"td").click(function(){
88. $(_obj).val(_currColor2);
89. });
90. }
91. $(this).click(function(){
92. showColor(this);
93. });
94. var_sobj=this;
95. $(document).click(function(e){
96. e=e?e:window.event;
97. vartag=e.srcElement||e.target;
98. if(_sobj.id==tag.id)return;
99. var_temObj=tag;
100. while(_temObj)
101. {
102. if(_temObj.id=="colorShowDiv_"+_tem)return;
103. _temObj=_temObj.parentNode;
104. }
105. $("#colorShowDiv_"+_tem).remove();
106. });
107. });
108. }
109. });
110. })(jQuery);

使用方法：

1. $(document).ready(function(){
2. $("#要绑定的ID").selectColor();
3. });

注意：要绑定的对像一定要是文本输入框