笔记

JS实现点击文本框弹出DIV层

 
  1. <html>   
  2. <head>   
  3. <meta name="GENERATOR" content="Microsoft FrontPage 6.0">   
  4. <meta name="ProgId" content="FrontPage.Editor.Document">   
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">   
  6. <title>new page</title>   
  7. <script type="text/javascript" language="javascript">   
  8. function crertdiv(_parent,_element,_id,_css){//创建层   
  9.                 var newObj = document.createElement(_element);   
  10.                 if(_id && _id!="")newObj.id=_id;   
  11.                 if(_css && _css!=""){   
  12.                         newObj.setAttribute("style",_css);   
  13.                         newObj.style.cssText = _css;   
  14.                 }   
  15.                 if(_parent && _parent!=""){   
  16.                         var theObj=getobj(_parent);   
  17.                         var parent = theObj.parentNode;   
  18.                         if(parent.lastChild == theObj){   
  19.                                 theObj.appendChild(newObj);   
  20.                         }    
  21.                         else{   
  22.                                 theObj.insertBefore(newObj, theObj.nextSibling);   
  23.                         }   
  24.                 }   
  25.                 else        document.body.appendChild(newObj);   
  26. }   
  27. function getobj(o){//获取对象   
  28.                 return document.getElementById(o)   
  29. }   
  30. var swtemp=0,objtemp;   
  31. function showdiv(inputid,inputlist){//显示层   
  32.         if (swtemp==1){getobj(objtemp+"mydiv").style.display="none";}   
  33.         var text_list=inputlist.split(",")   
  34.                 if (!getobj(inputid+"mydiv")){//若尚未创建就建之   
  35.                         var divcss="font-size:12px;color:#00f;position:absolute;left:"+(getobj(inputid).offsetLeft+0)+"px;top:"+(getobj(inputid).offsetTop+25)+"px;border:1px solid red"  
  36.                         crertdiv("","div",inputid+"mydiv",divcss);//创建层"mydiv"   
  37.                         //alert(document.getElementById("mydiv").outerHTML)   
  38.                         crertdiv(inputid+"mydiv","ul",inputid+"myul");//创建ul           
  39.                         for (var i=0,j=text_list.length;i<j;i++){//创建"text_list"li   
  40.                                 crertdiv(inputid+"myul","li",inputid+"li"+i,"background:#fff");   
  41.                                 getobj(inputid+"li"+i).innerHTML=text_list;   
  42.                         }   
  43.                         crertdiv(inputid+"myul","li",inputid+"li"+j,"color:#f00;background:#fff");//创建"clear"li   
  44.                         getobj(inputid+"li"+j).innerHTML="clear";   
  45.                         getobj(inputid+"mydiv").innerHTML +="<style type='text/css'>#"+inputid+"mydiv ul {padding:0px;margin:0;}#"+inputid+"mydiv ul li{list-style-type:none;padding:5px;margin:0;float:left;CURSOR: pointer;}</style>"  
  46.                         for (var i=0;i<=j;i++){   
  47.                                         getobj(inputid+"li"+i).onmouseover=function(){this.style.background="#eee";clearTimeout(timer)}   
  48.                                         getobj(inputid+"li"+i).onmouseout=function(){this.style.background="#fff"}   
  49.                         }   
  50.                 }   
  51.                 var newdiv=getobj(inputid+"mydiv")   
  52.                 newdiv.onclick=function(){hiddiv(event,inputid);}   
  53.                 newdiv.onmouseout=function(){Mout(this)}   
  54.                 newdiv.onmouseover=function(){clearTimeout(timer)}   
  55.                 getobj(inputid).onmouseout=function(){Mout(newdiv)}   
  56.                 newdiv.style.display="block";   
  57.                 swtemp=1;   
  58.                 objtemp=inputid;   
  59. }   
  60. var timer   
  61. function Mout(o){   
  62. timer=setTimeout(function(){o.style.display="none";},300)   
  63.                 swtemp=0;   
  64. }   
  65. function hiddiv(e,inputid){   
  66.     e=e||window.event;   
  67.     ev=e.target||e.srcElement;   
  68.     v=ev.innerText||ev.textContent;   
  69.     if (v!="clear")getobj(inputid).value=v;else getobj(inputid).value=""  
  70.                 getobj(inputid+"mydiv").style.display="none";   
  71. }   
  72. </script>   
  73. </head>   
  74. <body>   
  75. <br>   
  76. <br>   
  77. <br>   
  78. <br>   
  79. ....利用定义标签赋值....（onclick）....<input id="mytext" type="text"onclick="showdiv(this.id,this.list)" list="文本框,弹出层,值赋"/>   
  80. <br>   
  81. <br>   
  82. <script>   
  83. var list="文本框2,弹出层2,值赋2,文本框2-1,弹出层2-1,值赋2-1"  
  84. </script>   
  85. ....利用定义JS变量赋值...（onclick）....<input id="mytext2" type="text" onClick="showdiv(this.id,list)"/>   
  86. <input type="hidden" value="点击,弹出,显示,消失,实现" id="list">   
  87. ....利用隐藏域值赋值....（onmouseover）.....<input id="mytext3" type="text" onMouseOver="showdiv(this.id,getobj('list').value)"/>   
  88. </body>   
  89. </html>   

posted on 2013-08-29 10:39  MisterS  阅读(177)  评论(0)  编辑  收藏  举报

导航