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; width:1000px;" ></ div >
</ body >
</ html >

 

转载于:https://www.cnblogs.com/qingyi/archive/2010/04/16/1713804.html