jquery的颜色选择插件

wlcxx98

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

<div class="highlighter">

• (function($){
  
• $.fn.extend({
  
• selectColor:function(){
  
• var_d=newDate();
  
• var_tem=_d.getTime();
  
• returnthis.each(function(){
  
• varshowColor=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;
  
• }();
  
• 
  
• varcolorH=newArray('00','33','66','99','CC','FF');
  
• varScolorH=newArray('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF');
  
• var_str=newArray();
  
• for(varn=0;n<6;n++)
  
• {
  
• _str.push('<trheight="11">');
  
• _str.push('<tdstyle="width:11px;background-color:#'+colorH[n]+colorH[n]+colorH[n]+'"></td>');
  
• for(vari=0;i<3;i++)
  
• {
  
• for(varj=0;j<6;j++)
  
• {
  
• _str.push('<tdstyle="width:11px;background-color:#'+colorH+colorH[j]+colorH[n]+'"></td>');
  
• }
  
• }
  
• _str.push('</tr>');
  
• }
  
• for(varn=0;n<6;n++)
  
• {
  
• _str.push('<trheight="11">');
  
• _str.push('<tdstyle="width:11px;background-color:#'+ScolorH[n]+'"></td>')
  
• for(vari=3;i<6;i++)
  
• {
  
• for(varj=0;j<6;j++)
  
• {
  
• _str.push('<tdstyle="width:11px;background-color:#'+colorH+colorH[j]+colorH[n]+'"></td>');
  
• }
  
• }
  
• _str.push('</tr>');
  
• }
  
• 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>'
  
• $("body").append(colorStr);
  
• var_currColor;
  
• var_currColor2;
  
• $("#colorShowTable_"+_tem+"td").mouseover(function(){
  
• var_color=$(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(newRegExp("","gm"),"");
  
• var_arr=_tmeColor.split(",");
  
• var_tmeColorStr="#";
  
• for(varii=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;
  
• $(this).css("background-color","#FFFFFF");
  
• });
  
• $("#colorShowTable_"+_tem+"td").mouseout(function(){
  
• $(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;
  
• vartag=e.srcElement||e.target;
  
• if(_sobj.id==tag.id)return;
  
• var_temObj=tag;
  
• while(_temObj)
  
• {
  
• if(_temObj.id=="colorShowDiv_"+_tem)return;
  
• _temObj=_temObj.parentNode;
  
• }
  
• $("#colorShowDiv_"+_tem).remove();
  
• });
  
• });
  
• }
  
• });
  
• })(jQuery);