一个XP风格的下拉选择输入框,下拉/输入兼容

功能介绍:<BR>
可以用键盘的向下向上键对要选择的内容进行操作<BR>
可以用Enter键得到选择<BR>
如果控件设置为可输入时,控件会根据你输入的内容显示相匹配的选项(如果有的话)<BR>
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
.dockeditor
{
FONT-SIZE: 9pt;
BORDER-RIGHT: #0a246a 0px solid;
BORDER-TOP: #0a246a 1px solid;
SCROLLBAR-FACE-COLOR: window;
SCROLLBAR-HIGHLIGHT-COLOR: lightgrey;
BORDER-LEFT: #0a246a 1px solid;
SCROLLBAR-SHADOW-COLOR: gray;
SCROLLBAR-3DLIGHT-COLOR: window;
BORDER-BOTTOM: #0a246a 1px solid;
SCROLLBAR-DARKSHADOW-COLOR: window
HEIGHT: 20px;
width:83px;
}
.button
{
BORDER-RIGHT: #0a246a 1px solid;
BORDER-TOP: #0a246a 1px solid;
FONT-SIZE: 9pt;
BORDER-LEFT: #0a246a 1px solid;
CURSOR: hand;
BORDER-BOTTOM: #0a246a 1px solid;
HEIGHT: 19px;
width:16px;
BACKGROUND-COLOR: #b6bdd2;
font-family:webdings;
font-size: 9px;
}
.dockeditor1
{
FONT-SIZE: 9pt;
BORDER-RIGHT: #ffffff 0px solid;
BORDER-TOP: #ffffff 1px solid;
SCROLLBAR-FACE-COLOR: window;
SCROLLBAR-HIGHLIGHT-COLOR: lightgrey;
BORDER-LEFT: #ffffff 1px solid;
SCROLLBAR-SHADOW-COLOR: gray;
SCROLLBAR-3DLIGHT-COLOR: window;
BORDER-BOTTOM: #ffffff 1px solid;
SCROLLBAR-DARKSHADOW-COLOR: window
HEIGHT: 20px;
width:83px;
}
.button1
{
BORDER-RIGHT: #ffffff 1px solid;
BORDER-TOP: #ffffff 1px solid;
FONT-SIZE: 9pt;
BORDER-LEFT: #ffffff 1px solid;
CURSOR: hand;
BORDER-BOTTOM: #ffffff 1px solid;
HEIGHT: 19px;
width:16px;
BACKGROUND-COLOR: #d4d0c8;
font-family:Marlett;
font-size: 12px;
}
.firstColumnNormal {
font-size: 12px;
height:18px;
BORDER-TOP: #ffffff 1px solid;
BORDER-RIGHT: #ffffff 1px solid;
BACKGROUND: #ffffff;
BORDER-LEFT: #ffffff 1px solid;
CURSOR: default;
BORDER-BOTTOM: #ffffff 1px solid;
}
.firstColumnEffect {
font-size: 12px;
height:18px;
BORDER-TOP: #0a246a 1px solid;
BORDER-RIGHT: #0a246a 1px solid;
BACKGROUND: #b6bdd2;
BORDER-LEFT: #0a246a 1px solid;
CURSOR: default;
BORDER-BOTTOM: #0a246a 1px solid;
}
</style>
<script language=javascript>
var current = 0;
var flag = 1;
var flag1 = 1;
var tt="";
function getAbsPosition(obj, offsetObj){//得到标志的相对位置
var _offsetObj=(offsetObj)?offsetObj:document.body;
var x=obj.offsetLeft;
var y=obj.offsetTop;
var tmpObj=obj.offsetParent;

while ((tmpObj!=_offsetObj) && tmpObj){
x+=tmpObj.offsetLeft+tmpObj.clientLeft-tmpObj.scrollLeft;
y+=tmpObj.offsetTop+tmpObj.clientTop-tmpObj.scrollTop+2;
tmpObj=tmpObj.offsetParent;
}
return ([x, y]);
}
function aa(ltable,stext,sbutton,ldiv){//控制按钮onclick行为
var el = ltable.children(0).children(0);
var str1;
var j = 0;
var str2 = stext.value;
var el1 = ltable.children(0).children(0);
if(ldiv.style.visibility=='hidden'){
showdiv(stext,ldiv);
ldiv.style.visibility='visible';
flag1 = 0;
sbutton.value='5';
while(el1!= null){
el1.children(0).className = 'firstColumnNormal';
el1 = el1.nextSibling;
}
if(str2!=""){
while(el!= null){
str1 = el.children(0).innerText;
if(str2==str1){
el.children(0).className = 'firstColumnEffect';
ldiv.scrollTop = el.offsetTop;
break;
}
el = el.nextSibling;
j = j+1;
}
}
current = j;
}
else{
ldiv.style.visibility='hidden';
flag1 = 1;
sbutton.value='6';
}
}
function bb(stable,stext,sbutton,ldiv){//控制文本框输入行为
var str2=stext.value;
var str1;
var j=0;
var el = stable.children(0).children(0);
var el1 = stable.children(0).children(0);
while(el1!= null){
el1.children(0).className = 'firstColumnNormal';
el1 = el1.nextSibling;
}
while(el!= null){
str1 = el.children(0).innerText;
stext.className='dockeditor';
sbutton.className='button';
if(str1.length>=str2.length){
if(str2!=""&&str2==str1.substring(0,str2.length)){
if(ldiv.style.visibility=='hidden')
ldiv.style.visibility='visible';
flag1 = 0;
sbutton.value='5';
el.children(0).className = 'firstColumnEffect';
ldiv.scrollTop = el.offsetTop;
flag = 0;
break;
}

else{
el.children(0).className = 'firstColumnNormal';
ldiv.style.visibility='hidden';
flag1 = 1;
sbutton.value='6';
}
}
else{
el.children(0).className = 'firstColumnNormal';
ldiv.style.visibility='hidden';
flag1 = 1;
sbutton.value='6';
}
el = el.nextSibling;
j=j+1;
}
current = j;
}
function DoOverEvent(el,stable)//响应列表的onmouseover事件
{
var el1 = stable.children(0).children(0);
while(el1!= null){
el1.children(0).className = 'firstColumnNormal';
el1 = el1.nextSibling;
}
el.className = "firstColumnEffect";
}
function DoOutEvent(el)//响应列表的onmouseout事件
{
el.className = "firstColumnNormal";
}
function document.onclick()
{
var collObjects = document.getElementsByTagName("DIV");
var nLen = collObjects.length;
for (var i=0; i<nLen; i++){
if (collObjects[i].getAttribute("combox")){
var comboxName = collObjects[i].id ;
comboxName = comboxName.substring(0,comboxName.length-4);
var stable = eval(comboxName+'con');
var stext = eval(comboxName+'txt');
var sbutton = eval(comboxName+'btn');
var ldiv = eval(comboxName+'div2');
sclick(stext,sbutton,ldiv);
}
}
}
function sclick(stext,sbutton,ldiv)//控制页面onclick事件的行为
{
//alert(tt);

if(eval(tt)){
ldiv.style.visibility='hidden';
if(stext.value==''&&document.activeElement.name != stext.name){
stext.className='dockeditor1';
sbutton.className='button1';
}
sbutton.value = '6';
}
}
function getTrue(){//产生条件判断语句
var collObjects = document.getElementsByTagName("INPUT");
var nLen = collObjects.length;
for (var i=0; i<nLen; i++)
{
if ('button1' == collObjects[i].className)
{
tt=tt+"event.srcElement.name != '"+collObjects[i].name+"'&&";
}
}
tt=tt.substring(0,tt.length-2);
}
function document.onkeydown()
{
var collObjects = document.getElementsByTagName("DIV");
var nLen = collObjects.length;
for (var i=0; i<nLen; i++){
if (collObjects[i].getAttribute("combox")){
var comboxName = collObjects[i].id ;
comboxName = comboxName.substring(0,comboxName.length-4);
var stable = eval(comboxName+'con');
var stext = eval(comboxName+'txt');
var sbutton = eval(comboxName+'btn');
var ldiv = eval(comboxName+'div2');
skeydown(stable,stext,sbutton,ldiv);

}
}
}
function skeydown(stable,stext,sbutton,ldiv){//控制键盘按键的行为
var el2 = stable.children(0).children(0);
if(ldiv.style.visibility=='visible'){
switch(event.keyCode){
case 13:{//Enter
while(el2!= null){
if(el2.children(0).className != 'firstColumnNormal'){
stext.value = el2.children(0).innerText;
ldiv.style.visibility = 'hidden';
if(flag == 0){
flag1 = 1;
flag = 1;
}
sbutton.value='6';
stext.className='dockeditor';
sbutton.className='button';
break;
}
el2 = el2.nextSibling;
}
break;
}
case 38:{//PgUp
clearclass(stable);
if(current>0){
current = current-1;
ldiv.scrollTop =stable.rows(current).children(0).offsetTop;
stable.rows(current).children(0).className = 'firstColumnEffect';
stext.value = stable.rows(current).children(0).innerText;
}
else{
ldiv.scrollTop =stable.rows(0).children(0).offsetTop;
stable.rows(0).children(0).className = 'firstColumnEffect';
stext.value = stable.rows(0).children(0).innerText;
}
break;
}
case 40:{//PgDn
clearclass(stable);
if(current<stable.rows.length-1){
current = current+1;
ldiv.scrollTop =stable.rows(current).children(0).offsetTop;
stable.rows(current).children(0).className = 'firstColumnEffect';
stext.value = stable.rows(current).children(0).innerText;
}
else{
ldiv.scrollTop =stable.rows(stable.rows.length-1).children(0).offsetTop;
stable.rows(stable.rows.length-1).children(0).className = 'firstColumnEffect';
stext.value = stable.rows(stable.rows.length-1).children(0).innerText;
}
break;
}
}
}
}
function clearclass(stable){//将列表的样式清除
var el1 = stable.children(0).children(0);
while(el1!= null){
el1.children(0).className = 'firstColumnNormal';
el1 = el1.nextSibling;
}
}
function showdiv(el,ldiv){//确定列表的显示的位置
var pos=getAbsPosition(el,document.body);
if(pos[1]+el.offsetHeight+ldiv.offsetHeight<document.body.clientHeight + document.body.scrollTop)
ldiv.style.posTop = pos[1]+el.offsetHeight-1;
else
ldiv.style.posTop = pos[1]-ldiv.offsetHeight-1;
ldiv.style.posLeft = pos[0];
}
function scrollBar()//控制滚动条的样式
{
var line="#0a246a";
var face="#b6bdd2";

with(document.body.style)
{
scrollbarDarkShadowColor=line;
scrollbar3dLightColor=line;
scrollbarArrowColor="black";
scrollbarBaseColor=face;
scrollbarFaceColor=face;
scrollbarHighlightColor=face;
scrollbarShadowColor=face;
scrollbarTrackColor=face;
}
}
function combox(comboName){//生成combox的代码

this.str='';
this.name=comboName;
this.Names = new Array();
this.Values = new Array();
this.SetType=function(type){
this.type=type;
}
this.AddItem=function(name,value){
this.Names[this.Names.length] = name;
this.Values[this.Values.length] = value;
}
this.build=function(){
var st;
if(this.Names.length<5)
st = "width:100;height:100;";
else
st = "width:100;overflow: auto;height:100;";
this.str += '<input type="hidden" name="' + this.name + '">'
this.str += '<div id='+this.name+'div1 combox=true style="display:inline;left:0px;z-index:1;top:0px;width:100"><input type="text" name='+this.name+'txt class="dockeditor1" onkeyup="if(event.keyCode!=13&&event.keyCode!=38&&event.keyCode!=40) bb('+this.name+'con,'+this.name+'txt,'+this.name+'btn,'+this.name+'div2)" onmouseout="if(document.all(\''+this.name+'div2\').style.visibility==\'hidden\'&&document.all(\''+this.name+'txt\').value==\'\'&&document.activeElement.name != \''+this.name+'txt\'){document.all(\''+this.name+'txt\').className=\'dockeditor1\';document.all(\''+this.name+'btn\').className=\'button1\';}"onmouseover="document.all(\''+this.name+'txt\').className=\'dockeditor\';document.all(\''+this.name+'btn\').className=\'button\';" ' + this.type + '><input type="button" value="6" style="font-family: Marlett; font-size: 12px; " class="button1" name="'+this.name+'btn" onclick="aa('+this.name+'con,'+this.name+'txt,'+this.name+'btn,'+this.name+'div2);window.event.cancelBubble=true;" onmouseout="if(document.all(\''+this.name+'div2\').style.visibility==\'hidden\'&&document.all(\''+this.name+'txt\').value==\'\'&&document.activeElement.name != \''+this.name+'txt\'){document.all(\''+this.name+'txt\').className=\'dockeditor1\';document.all(\''+this.name+'btn\').className=\'button1\';}" onmouseover="document.all(\''+this.name+'txt\').className=\'dockeditor\';document.all(\''+this.name+'btn\').className=\'button\';" onfocus="document.all.'+this.name+'txt.focus()"></div>';
this.str += '<div id='+this.name+'div2 style="display:inline;z-index:100;top:34px;' + st + 'border:1 groove #b6bdd2; VISIBILITY: hidden; POSITION: absolute ; filter: blendTrans(duration=2)">';
this.str += '<table id='+this.name+'con cellSpacing=1 cellPadding=0 width="100%" border="0">';
for(var i=0;i<this.Names.length;i++){
this.str += '<tr>';
this.str += '<td value="' + this.Values[i] + '" onclick="' + this.name + '.value=this.value;'+this.name+'txt.value=this.innerText;document.all(\''+this.name+'div2\').style.visibility=\'hidden\'" style="cursor:hand" class=firstColumnNormal onmouseover=DoOverEvent(this,'+this.name+'con) onmouseout=DoOutEvent(this)>'+this.Names[i]+'</td>';
this.str += '</tr>';
}
this.str += '</table>';
this.str += '</div>';
return this.str;

}
this.show=function(){
document.write(this.build());
}
}</script>
</head>

<body onload="getTrue()">
<script>
var c1=new combox('test');
c1.AddItem("test","0");
c1.AddItem("test1","1");
c1.AddItem("test2","2");
c1.AddItem("test3","3");
c1.AddItem("test4","4");
c1.AddItem("test5","5");
c1.SetType("readonly");
c1.show();
var c2=new combox('test1');
c2.AddItem("test","0");
c2.AddItem("test1","1");
c2.AddItem("test2","2");
c2.AddItem("test3","3");
c2.AddItem("test4","4");
c2.SetType("");
c2.show();
</script>
<div id=div3></div>
</body>
</html>
<script language="JavaScript1.2">

</script>

posted on 2007-01-24 13:34 mbskys 阅读(237) 评论(0) 收藏举报