zoukankan      html  css  js  c++  java
  • JQuery 做的下拉文本框

    代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        
    <title>无标题页</title>
        
    <style type="text/css">
        .in 
    {border:1px solid #ccc;padding:2px;width:100px;height:20px;margin:0px;}
        .in input
    {border:0;width:80px}
        .list
    {margin:0px;padding:0px 2px;
        border
    :1px solid #ccc;height:300px;width:100px;overflow-x:hidden; overflow-y:auto;display:none;z-index:99;background-color:#FFF }
        .list li
    { cursor:pointer}
        
    </style>
        
    <SCRIPT src="/js/jquery-1.3.2.min.js" type=text/javascript></script>
        
    <script type="text/javascript">
        $(document).ready(
    function(){
            $(
    'img.imgbu').click(
            
    function(){showList()}
            );
            $(
    'ul.list li').click(function(){          
                $(
    'div.in input').val($(this).text());
            })
            $(
    'ul.list li').hover(
                
    function(){
                    $(
    this).css('background-color','red')
                },
                
    function(){
                    
                    $(
    this).css('background-color','')
                }
            )
        })
        
    var i=0;
        
    function showList()
        {     
                
    var o=$('div.in').offset();
                
    var t=o.top+24;
                
    var l=o.left;            
                $(
    'ul.list').css({"top":t,'left':l}).slideDown("slow"); 
                
                $(
    'body').mousemove(function(e){
                    
    var t=$('ul.list').offset();                
                    
    var th=t.top+parseInt($('ul.list').css('height').replace('.px',''))
                    
    var tw=t.left+parseInt($('ul.list').css('width').replace('.px',''))
                    
    var eX=e.clientX;
                    
    var eY=e.clientY;
                    
    if(eX>tw||eX<t.left||eY<t.top-25||eY>th)
                    {
                        i
    =window.setTimeout('SetTimeShow()',1000);
                        $(
    'body').unbind('mousemove');
                    }
                 });

        }
        
    function SetTimeShow()
        {        
            $(
    'ul.list').slideUp("slow"); 
            window.clearTimeout(i);
        }
        
    </script>
    </head>
    <body>
        
    <div class="in"><input id="Text1" type="text" /><img src="/img/1.png" class="imgbu" /></div>
        
    <div>adsfasfaslfjalskdfjdaslkf</div>
        
    <ul class="list" style="position:absolute">
        
    <li>列表1</li>
        
    <li>列表2</li>
        
    <li>列表3</li>
        
    <li>列表4</li>
        
    <li>列表5</li>
        
    <li>列表6</li>
        
    </ul>
        
    <div style="height:1000px; 1000px;"></div>
    </body>
    </html>
  • 相关阅读:
    【纯水题】POJ 1852 Ants
    【树形DP】BZOJ 1131 Sta
    【不知道怎么分类】HDU
    【树形DP】CF 1293E Xenon's Attack on the Gangs
    【贪心算法】CF Emergency Evacuation
    【思维】UVA 11300 Spreading the Wealth
    【树形DP】NOI2003 逃学的小孩
    【树形DP】BZOJ 3829 Farmcraft
    【树形DP】JSOI BZOJ4472 salesman
    【迷宫问题】CodeForces 1292A A NEKO's Maze Game
  • 原文地址:https://www.cnblogs.com/qingyi/p/1713804.html
Copyright © 2011-2022 走看看