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>
<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>
