.NET学习爱好者

热爱编程事业
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

用DIV实现下拉框

<html>
<head>
<title>
一个文框下拉的例子
</title>
<script language="javascript">

//-----------------页面加载时创建一个DIV-----------------//
   function creatediv()
   {
     var div_box = document.createElement("DIV")
      div_box.id = "box"
      div_box.style.position="absolute"
       div_box.style.top=100
        div_box.style.left=200
         div_box.style.background = "#FFFF00"
        div_box.style.display="none";
         div_box.innerHTML="testewqewqewqqqweqwewqeqw"
        document.body.appendChild(div_box)

   }
   
 //------------------展开DIV,算对象在网页的位置-----------//
   function   getAbsPoint(e)   
    { 
   _width=e.offsetWidth;
   _height=e.offsetHeight;
    var   x   =   e.offsetLeft,   y   =   e.offsetTop;   
    while(e=e.offsetParent) 
    { 
       x   +=   e.offsetLeft;   
       y   +=   e.offsetTop;
    } 
    $("box").style.display="block";
    $("box").style.top=y+_height;
    $("box").style.left=x;
    $("box").style.width=_width;
    $("box").style.wordWrap="break-word";
    } 
//-------------------当网页改变时,得新加载这个对象--------------//   
    function getAbs()
    {
        var ex=$("box");
        if(ex)
        {
            if(ex.style.display=="block")
            {
                var src=document.activeElement;
                getAbsPoint(src);
            }
        }
    }
    //------------通用获取ID---------------//
    function $(id)
    {
        return document.getElementById(id);
    }
    //--------通用获取值------------//
    function $v(id)
    {
        return document.getElementById(id).value;
    }
    
</script>

</head>
<body onload="creatediv()" onResize="getAbs()" >
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
    &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input id="Text1"
        type="text" onclick="getAbsPoint(this)" size="40"/>
    <br />
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;<input
        id="Text2" type="text" onclick="getAbsPoint(this)"/>
    <input id="Text3" type="text" onclick="getAbsPoint(this)"/><br />
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;<input
        id="Text4" type="text" onclick="getAbsPoint(this)"/>&nbsp;
    <input id="Text5" type="text" onclick="getAbsPoint(this)" />
    <input id="Text6" type="text" onclick="getAbsPoint(this)" />
    <input id="Button1" type="button" value="button" onclick="getAbsPoint(this)" />

</body >
</html>
posted on 2007-09-25 13:43  风景  阅读(916)  评论(0)    收藏  举报