表单美化控件

<!--html表单美化组件-->
<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="DoInit()" />
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="DoMouseOver()" />
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="DoMouseOut()" />
<script type="text/JavaScript">
function DoInit(){
 if(element.tagName=="INPUT"){ //input
  initInput();
 }else if(element.tagName=="SELECT"){ //select
  initSelect();
 }
}

//对input框进行处理
function initInput(){
 var elType=element.type;
 switch(elType){
  //输入框
  case "text":
  case "password":
   element.className+=" form_input_text_out";
   element.onclick
   break;
  //按钮类
  case "reset":
  case "submit":
  case "button":
   var btnWidth=element.clientWidth;
   element.style.display="none";
   var elm=element.parentNode.insertBefore(document.createElement("<div style='cursor:default;position:absolute;top:"+element.offsetTop+"px;left:"+element.offsetLeft+"px;width:"+btnWidth+"px;'></div>"),element);
   var lBg=elm.appendChild(document.createElement("<div class='form_input_button_out' style='float:left'></div>"));
   lBg.innerHTML="<div style='float:left;width:5px'></div><div style='width:"+(btnWidth-10)+"px;height:100%;float:left;text-align:center;'>"+element.value+"</div>";
   var rBg=elm.appendChild(document.createElement("<div style='float:left;width:5px' class='form_input_button_right_out'></div>"));
   
   elm.onmouseover=function(){
    lBg.className=lBg.className.replace("out","over");
    rBg.className=rBg.className.replace("out","over");
   }
   elm.onmouseout=function(){
    lBg.className=lBg.className.replace(/over|down/,"out");
    rBg.className=rBg.className.replace(/over|down/,"out");
   }
   elm.onmousedown=function(){
    lBg.className=lBg.className.replace("over","down");
    rBg.className=rBg.className.replace("over","down");
   }
   elm.onmouseup=function(){
    lBg.className=lBg.className.replace("down","over");
    rBg.className=rBg.className.replace("down","over");
   }
   elm.onclick=element.click;
   break;
  //单选按钮与复选框
  case "checkbox":
  case "radio":
   element.style.display="none";
   var statu=element.checked;
   var elem=element.parentNode.insertBefore(document.createElement("<span class='form_input_"+elType+"_"+(statu?"":"no")+"check_out'></span>"),element);
   elem.onclick=function(){
    element.click(); //传递单击事件
    var cls=this.className;
    if(cls.indexOf("no")>-1){
     this.className=cls.replace("_nocheck_","_check_");
     element.checked="checked";
    }else{
     if(elType=="checkbox"){
      this.className=cls.replace("_check_","_nocheck_");
      element.checked="";
     }
    }
    //radio只允许选择一项
    if(elType=="radio"){
     var radioEl=element.document.getElementsByName(element.name);
     for(var i=radioEl.length;i>0;i--){
      if(radioEl[i-1].type&&radioEl[i-1].type=="radio"){
       radioEl[i-1].previousSibling.className=radioEl[i-1].previousSibling.className.replace(/form_input_radio_[^_]+_(out|over)/,"form_input_radio_"+(radioEl[i-1].checked?"":"no")+"check_$1"); 
      }
     }
    }
   };
   elem.onmouseover=function(){
    this.className=this.className.replace("out","over");
   };
   elem.onmouseout=function(){
    this.className=this.className.replace("over","out");
   };
   break;
  default:
 }
}
//处理select
function initSelect(){
 var opts=element.options;
 var selWidth=element.clientWidth;
 var selHeight=element.clientHeight;
 element.style.display="none";
 var elm=element.parentNode.insertBefore(document.createElement("<div class='form_input_text_out' style='position:absolute;top:"+element.offsetTop+"px;left:"+element.offsetLeft+"px;width:"+selWidth+"px;height:"+selHeight+"px'></div>"),element);
 var selInput=elm.appendChild(document.createElement("<input style='border:0;width:"+(selWidth-20)+"px;float:left;height:100%' readonly type='text' />"));
 var selIco=elm.appendChild(document.createElement("<div style='width:18px;height:100%;display:inline;float:right' class='form_select_out'></div>"))
 selInput.value=opts[element.selectedIndex].innerText; //写值
 //组合选项
 var selDiv=element.parentNode.insertBefore(document.createElement("<div style='display:none;background:#fff;position:absolute;width:"+selWidth+"px;margin:0;padding:0;overflow:visible;top:"+(element.offsetTop+selHeight)+"px;left:"+element.offsetLeft+"px;border:1px solid #000'></div>",element));
 var liOpts="";
 for(var i=0;i<opts.length;i++){
  liOpts+="<li class='form_select_li_out' value='"+i+"' onmouseover=\"this.className='form_select_li_over'\" onmouseout=\"this.className='form_select_li_out'\">"+opts[i].innerText+"</li>";
 }
 selDiv.innerHTML+="<ul style='list-style:none;margin:0;padding:0'>"+liOpts+"</ul>";

 //点击选项写入input
 selDiv.onclick=function(){
  selDiv.style.display="none";
  if(element.selectedIndex!=event.srcElement.value){
   element.selectedIndex=event.srcElement.value;
   element.fireEvent("onchange"); //触发onchange事件
   selInput.value=opts[event.srcElement.value].innerText;
  }
 }
 //隐藏或显示下拉选项
 element.document.onclick=function(){
  var src=event.srcElement;
  if(src==elm||src==selInput||src==selIco){
   selDiv.style.display="";
   if(selDiv.clientHeight>100){
    selDiv.style.height="100px";
    selDiv.style.overflowY="auto";
   }
  }else{
   selDiv.style.display="none";
  }
 }
 elm.onmouseover=function(){
  selIco.className=selIco.className.replace("out","over");
 }
 elm.onmouseout=function(){
  selIco.className=selIco.className.replace("over","out");
 }
}
function DoMouseOver(){
    element.className=element.className.replace("out","over");
}

function DoMouseOut(){
 element.className=element.className.replace("over","out");
}
</script>
</PUBLIC:COMPONENT>