none
如何动态设定一个Div相对于textbox等控件的位置? RRS feed

  • 问题

  • 因为页面上有一堆的可编辑下拉框,包括GridView的模板列,其内容是一样的,为了偷懒和方便更改,想用TextBox加div的方法来实现, 下拉内容放在div里,平时隐藏,当textbox获得焦点时,显示div,div上边框贴合textbox的下边框,显示内容供用户选择,选择完毕后再次隐藏,这样的话应该是取目标textbox当前在屏幕的位置,这样该怎么定位div的显示位置?
    2009年12月15日 4:10

答案

  • 再试试
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>无标题页</title>
        <style type="text/css">   
    .divstyle{     
        z-index:1;position:absolute;background-color:#999999;  
      
    }  
    #supplierDiv2 {  
        z-index:6;  
        position:relative;  
        text-align:right;  
        padding-left:5px;     
        padding-top:1px;      
      cursor: hand;   
      font-family: "Tahoma";    
    }   
    #supplierDiv3 {    
        z-index:7;  
        position:relative;    
        padding-top:10px;     
        padding-left:5px;  
      width:250px;  
        height:150px;  
        background-color:#ffffff;     
        padding: 0px;   
        text-align: left;   
        color: red;   
        font-size: 15px;      
        overflow-y:auto;      
        line-height:30px;   
        Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=100);       
    }     
    </style> 
    <script type="text/javascript">             
        function drawDiv(event,o)  
        {                 
         document.getElementById("supplierDiv1").style.left=event.clientX-40;  
         document.getElementById("supplierDiv1").style.top=event.clientY;                  
         document.getElementById("supplierDiv1").style.display="";  
        }     
        function closeDiv(){  
            document.getElementById("supplierDiv1").style.display="none";  
        }         
    </script>   
       
       
    </head>
    <body>
     <table border=1 width="1000px;"> 
               
                <tr> 
                    <td><a href="http://www.baidu.com"  onmousemove="drawDiv(event,this)" >测试文字</a></td> 
                    <td><a href="http://www.baidu.com"  onmousemove="drawDiv(event,this)" >测试文字</a></td> 
                    <td><a href="http://www.baidu.com"  onmousemove="drawDiv(event,this)">测试文字</a></td> 
                </tr> 
            </table> 
            <div id="supplierDiv1" class="divstyle" style="display:none;"> 
                <div id="supplierDiv2" onclick="closeDiv()">Close</div> 
                <div id="supplierDiv3"  > 
                       
                    <a href="http://www.baidu.com" >一三九移动互联网信息服务(北京)有限公司</a><br><br>          
                </div> 
            </div> 

    <p>
        <input id="Text1" type="text"  onclick="drawDiv(event,this)"/></p>

    </body>
    </html>


    努力+方法=成功
    • 已标记为答案 scate233 2009年12月16日 7:37
    2009年12月15日 8:21
  • 是传数组还是arrylist取决于你的喜好。

    如果是我,我就传string[]就行了。arrylist是以object的方式保存的,保存和使用的时候要经过类型转变。
    Microsoft Online Community Support
    • 已标记为答案 scate233 2009年12月16日 7:37
    2009年12月16日 2:30

全部回复

  • 你这个需求通过AjaxControlTookit中的 HoverMenu http://www.asp.net/AJAX/AjaxControlToolkit/Samples/HoverMenu/HoverMenu.aspx

    还有PopupControl都可以实现的 http://www.asp.net/AJAX/AjaxControlToolkit/Samples/PopupControl/PopupControl.aspx
    Wenn ich dich hab’,gibt es nichts, was unerträglich ist.坚持不懈!My blog~~~
    2009年12月15日 5:10
    版主
  • 参照下这
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>无标题页</title>
        <style type="text/css">   
    .divstyle{     
        z-index:1;position:absolute;background-color:#999999;  
    }  
    #supplierDiv2 {  
        z-index:6;  
        position:relative;  
        text-align:right;  
        padding-left:5px;     
        padding-top:1px;      
      cursor: hand;   
      font-family: "Tahoma";    
    }   
    #supplierDiv3 {    
        z-index:7;  
        position:relative;    
        padding-top:10px;     
        padding-left:5px;  
      width:350px;  
        height:150px;  
        background-color:#ffffff;     
        padding: 5px;   
        text-align: left;   
        color: red;   
        font-size: 15px;      
        overflow-y:auto;      
        line-height:30px;   
        Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=100);       
    }     
    </style> 
    <script type="text/javascript">             
        function drawDiv(event,o)  
        {                 
         document.getElementById("supplierDiv1").style.left=event.clientX;  
         document.getElementById("supplierDiv1").style.top=event.clientY;                  
         document.getElementById("supplierDiv1").style.display="";  
        }     
        function closeDiv(){  
            document.getElementById("supplierDiv1").style.display="none";  
        }         
    </script>   
       
       
    </head>
    <body>
     
    <p>
        <input id="Text1" type="text"  onclick="drawDiv(event,this)"/></p>

    </body>
    </html>


    努力+方法=成功
    2009年12月15日 5:19
  • PopupControl 用不上 用 HoverMenu 的话,就要表格里一个,外面又一个了,而且当表格的数据绑定完成后会生成很多个
    2楼的 supplierDiv3  这个样式比较合适,但好像无法和目标textbox的边挨着,总是距离很远
    2009年12月15日 8:10
  • 再试试
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>无标题页</title>
        <style type="text/css">   
    .divstyle{     
        z-index:1;position:absolute;background-color:#999999;  
      
    }  
    #supplierDiv2 {  
        z-index:6;  
        position:relative;  
        text-align:right;  
        padding-left:5px;     
        padding-top:1px;      
      cursor: hand;   
      font-family: "Tahoma";    
    }   
    #supplierDiv3 {    
        z-index:7;  
        position:relative;    
        padding-top:10px;     
        padding-left:5px;  
      width:250px;  
        height:150px;  
        background-color:#ffffff;     
        padding: 0px;   
        text-align: left;   
        color: red;   
        font-size: 15px;      
        overflow-y:auto;      
        line-height:30px;   
        Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=100);       
    }     
    </style> 
    <script type="text/javascript">             
        function drawDiv(event,o)  
        {                 
         document.getElementById("supplierDiv1").style.left=event.clientX-40;  
         document.getElementById("supplierDiv1").style.top=event.clientY;                  
         document.getElementById("supplierDiv1").style.display="";  
        }     
        function closeDiv(){  
            document.getElementById("supplierDiv1").style.display="none";  
        }         
    </script>   
       
       
    </head>
    <body>
     <table border=1 width="1000px;"> 
               
                <tr> 
                    <td><a href="http://www.baidu.com"  onmousemove="drawDiv(event,this)" >测试文字</a></td> 
                    <td><a href="http://www.baidu.com"  onmousemove="drawDiv(event,this)" >测试文字</a></td> 
                    <td><a href="http://www.baidu.com"  onmousemove="drawDiv(event,this)">测试文字</a></td> 
                </tr> 
            </table> 
            <div id="supplierDiv1" class="divstyle" style="display:none;"> 
                <div id="supplierDiv2" onclick="closeDiv()">Close</div> 
                <div id="supplierDiv3"  > 
                       
                    <a href="http://www.baidu.com" >一三九移动互联网信息服务(北京)有限公司</a><br><br>          
                </div> 
            </div> 

    <p>
        <input id="Text1" type="text"  onclick="drawDiv(event,this)"/></p>

    </body>
    </html>


    努力+方法=成功
    • 已标记为答案 scate233 2009年12月16日 7:37
    2009年12月15日 8:21
  • 非常接近了,回头看看调一下把出现的div定死出现在textbox的下框就完美了!

    顺带问一下,如果div里的文字是从后台传过去的话,传数组是C#的Array还是ArryList?我要传一些东西过去,如城市名

    广州
    深圳
    佛山
    惠州

    这样显示陈列在div上,当用户点击某个城市名时就把那个名字写到textbox上

    2009年12月15日 10:25
  • 是传数组还是arrylist取决于你的喜好。

    如果是我,我就传string[]就行了。arrylist是以object的方式保存的,保存和使用的时候要经过类型转变。
    Microsoft Online Community Support
    • 已标记为答案 scate233 2009年12月16日 7:37
    2009年12月16日 2:30