87,904
社区成员
发帖
与我相关
我的任务
分享高分求combobox的实用设计！老大们帮帮，网上竟然没有实用的喔！
在开发中用到了combobox的使用，需要一些功能:
1、外形：select控件的外形，最起码差不多！
2、功能：实现基本的combobox的功能（在文本框录入和点击下拉按钮出现下拉选项)。同时下拉选项可以挡住下面的控件！
3、扩展功能：可以动态监控录入，从而把把有录入字符的下拉选项动态显示出来！注意：下拉选项会有上千个，不然也不用这个扩展功能了!
4、实用：像select控件那样可以多个使用了！
在网上找了几个，包括著名的加应的设计，不符合我的使用呀！
而网上在这方面设计几乎没有，看来用到的人少吗？
我在csdn的老帖子里看到梅老大说已经设计了，www.meizz.com上却没有哦！
求老大们给指个招，分不够在添喽！
1、外形：select控件的外形，最起码差不多！
2、功能：实现基本的combobox的功能（在文本框录入和点击下拉按钮出现下拉选项)。同时下拉选项可以挡住下面的控件！
3、扩展功能：可以动态监控录入，从而把把有录入字符的下拉选项动态显示出来！注意：下拉选项会有上千个，不然也不用这个扩展功能了!
4、实用：像select控件那样可以多个使用了！
在网上找了几个，包括著名的加应的设计，不符合我的使用呀！
而网上在这方面设计几乎没有，看来用到的人少吗？
我在csdn的老帖子里看到梅老大说已经设计了，www.meizz.com上却没有哦！
求老大们给指个招，分不够在添喽！
...全文
请发表友善的回复…
发表回复
liuquanyi 2005-04-12
- 打赏
- 举报
揭帖，并对梅老大表示感谢！对jk老大表示感谢！
我在使用的时候结果如下：
好处就不说了，谈谈还需要的改进，纯使用角度，js小弟懂的不多！
1、会出现稍微的错位，非大碍！
2、选项匹配多的时候不会有滚动条！
3、在onchange事件的时候，仅开始的时候可以事件触发！在填写出现下拉的时候，无法触发！
揭帖散分！
我在使用的时候结果如下：
好处就不说了，谈谈还需要的改进，纯使用角度，js小弟懂的不多！
1、会出现稍微的错位，非大碍！
2、选项匹配多的时候不会有滚动条！
3、在onchange事件的时候，仅开始的时候可以事件触发！在填写出现下拉的时候，无法触发！
揭帖散分！
liuquanyi 2005-03-29
- 打赏
- 举报
错位的问题不是太大，我测试不是输入的时候，是跟周围的东西有关系的时候，在表格里不是太大的变化！
这是我见过的最实用的了！
这是我见过的最实用的了！
LCKKING 2005-03-29
- 打赏
- 举报
不过输入的字符多了，梅老大的东西就有错位的问题了~~
LCKKING 2005-03-29
- 打赏
- 举报
呵呵~~学习！！
liuquanyi 2005-03-29
- 打赏
- 举报
经典的控件，梅大哥（meizz）的倾力贡献，不看吃亏喔！
LCKKING 2005-03-29
- 打赏
- 举报
呵呵~~能用就好。。
liuquanyi 2005-03-27
- 打赏
- 举报
有些东西，我无法实现！不知在何处实现一些对输入的限制，午夜子时求老大支招！
fcsoft01 2005-03-26
- 打赏
- 举报
可以看看 方成eform自定义表单平台 中的fccode控件.
meizz 2005-03-25
- 打赏
- 举报
<SCRIPT LANGUAGE="JavaScript" src="WebComboBox.js"></SCRIPT>
<style>input{font-size: 9pt}</style>
<form name="mm" method="post">
<select name="ddMoneyType" id="ddMoneyType" class="select">
<option selected="selected" value="">所有类型</option>
<option value="0">0人民币</option>
<option value="1">1美 元</option>
<option value="2">2港 币</option>
</select><br>
<select name="ddMoneyType2" id="ddMoneyType" class="select">
<option selected="selected" value="">所有类型</option>
<option value="0">0人民币</option>
<option value="1">1美 元</option>
<option value="2">2港 币</option>
</select>
<SCRIPT LANGUAGE="JavaScript"><!--
var A = document.forms["mm"].elements
for (var i=0; i<A.length; i++)
{
if(A[i].tagName == "SELECT")
{
var a = WCB.add(A[i], true);
}
}
//--></SCRIPT>
<style>input{font-size: 9pt}</style>
<form name="mm" method="post">
<select name="ddMoneyType" id="ddMoneyType" class="select">
<option selected="selected" value="">所有类型</option>
<option value="0">0人民币</option>
<option value="1">1美 元</option>
<option value="2">2港 币</option>
</select><br>
<select name="ddMoneyType2" id="ddMoneyType" class="select">
<option selected="selected" value="">所有类型</option>
<option value="0">0人民币</option>
<option value="1">1美 元</option>
<option value="2">2港 币</option>
</select>
<SCRIPT LANGUAGE="JavaScript"><!--
var A = document.forms["mm"].elements
for (var i=0; i<A.length; i++)
{
if(A[i].tagName == "SELECT")
{
var a = WCB.add(A[i], true);
}
}
//--></SCRIPT>
meizz 2005-03-25
- 打赏
- 举报
if(this.divIndex > -1)
{
var bodyClientHeight = this.Layer.layer.document.body.clientHeight;
var bodyScrollTop = this.Layer.layer.document.body.scrollTop;
var itemTop = getAbsTop(a[this.divIndex]) + 16;
if (itemTop < bodyClientHeight) this.Layer.layer.document.body.scrollTop = 0;
if (itemTop > bodyClientHeight)
this.Layer.layer.document.body.scrollTop = itemTop - bodyClientHeight;
}
}
this.input.onkeydown = function()
{
var CB = eval(WCBN).items[WCBI];
switch(window.event.keyCode) //非IE浏览器, 这里可能会出现小问题
{
case 40 : CB.arrow(40); break;
case 38 : CB.arrow(38); break;
case 13 : CB.arrow(13); break;
default : setTimeout(WCBN +".items["+ WCBI +"].match()"); break;
}
}
this.click = function(n)
{
this.text = this.input.value =this.WCBItems[n].text;
this.index = this.source.selectedIndex = this.WCBItems[n].index;
this.value = this.WCBItems[n].value; this.hide();
}
this.input.onblur = function()
{
var CB = eval(WCBN).items[WCBI], A = CB.source.options;
if(!CB.mouse){ CB.hide(); CB.hideArrow();}
for(var i=0; i<A.length; i++) if(A[i].text==this.text) return;
if (CB.canAddOption)
{
CB.text = CB.value = CB.userInput;
A.add(new Option(CB.text, CB.value, true, true));
CB.source.selectedIndex = CB.index = A.length -1;
}
else
{
if (CB.reserveLastInput)
{
CB.text = CB.value = CB.userInput;
if(A.length == CB.sourceOpLen) A.add(new Option(CB.text, CB.value, true, true));
else { A[CB.sourceOpLen].text = CB.text; A[CB.sourceOpLen].value = CB.value; }
CB.source.selectedIndex = CB.index = CB.sourceOpLen; return;
}
CB.index = CB.source.selectedIndex;
CB.value = A[CB.index].value;
CB.text = CB.input.value = A[CB.index].text;
}
}
}
function WebConboBoxDataItem(WCBN, WCBI)
{
this.value = this.text = ""; this.index = -1;
this.toString = function(n, color, bgColor, fontSize, fontFamily)
{
return("<div style='color: "+ color +"; background-color: "+ bgColor
+"; font-size: "+ fontSize +"; font-family: "+ fontFamily +"' "
+"onclick ='parent."+ WCBN +".items["+ WCBI +"].click("+ n +")' "
+"onmouseover='parent."+ WCBN +".items["+ WCBI +"].mouseover(this)' "
+"onmouseout ='parent."+ WCBN +".items["+ WCBI +"].mouseout(this)' "
+"nowrap>"+ this.text +"</div>");
}
}
function WebLayer(layerName)
{
if(typeof(layerName) != "string") return("The layerName is wrong！");
this.layer = this.iframe = null;
this.IE = window.navigator.appName == "Microsoft Internet Explorer";
var Ver = window.navigator.appVersion;
this.popup = this.IE && parseFloat(Ver.substr(Ver.indexOf("MSIE")+5))>=5.5;
if (this.popup)
{
this.layer= window.createPopup();
with(this.layer.document.body.style)
{
border = "1px solid #000000";
overflow = "auto";
overflowX = "hidden";
margin = "4 0 4 0";
}
}
else
{
document.write("<iframe name='WebLayer_"+ layerName +"' id='WebLayer_"+ layerName +"' scrolling=yes"
+" frameborder=0 border=0 style='position: absolute; display: none; z-index: 10;'></iframe>");
this.iframe = getElementById("WebLayer_"+ layerName);
this.layer = window.frames["WebLayer_"+ layerName];
this.layer.document.write("<html><head>"
+" <meta http-equiv='Content-Type' content='text/html; charset=gb2312'></head><body "
+" style='border: 1px solid #000000; overflow:auto; overflow-x:hidden; margin: 4 0 4 0' "
+" onselectstart='return false' oncontextmenu='return false'></body></html>");
this.layer.document.close();
}
this.style = this.layer.document.body.style;
this.hide = function()
{
if (this.popup){this.layer.hide();}
else this.iframe.style.display = "none";
}
this.write = function(str)
{
if(this.popup) this.layer.document.body.innerHTML =
"<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>"+ str;
else this.layer.document.body.innerHTML = str;
}
this.show = function(e, width, height)
{
if(typeof(e)!="object") return("Layer need a head object！");
if( !(width && height)) return("Width or Height is wrong！");
var oh = e.offsetHeight;
var t = getAbsTop(e) + oh;
var l = getAbsLeft(e);
var dt = document.body.scrollTop;
var dl = document.body.scrollLeft;
var w = width;
var h = height;
if(this.popup)
{
var wt = window.screenTop;
var wl = window.screenLeft;
var sw = window.screen.width;
var sh = window.screen.height;
this.layer.show(0, 0, 0, 0);
var ldbs= this.layer.document.body.scrollHeight + 2;
var h = ldbs > h ? h : ldbs;
var left = (sw-l-wl+dl > w) ? l-dl+wl+2 : sw-w;
var top = (sh-t-wt+dt > h) ? t-dt+wt+2 : (t-dt-oh+wt < h) ? t-dt+wt+2 : t-h-dt-oh+wt;
this.layer.show(left, top, w, h);
}
else
{
var dw = document.body.clientWidth;
var dh = document.body.clientHeight;
var ldbs= this.layer.document.body.scrollHeight + 2;
with(this.iframe.style)
{
display = "";
width = w;
height = ldbs > h ? h : ldbs;
top = (dh+dt-t > h) ? t : (t-dt-oh<h) ? t : t-dt-oh;
left = (dw+dl-l > w) ? l : dw+dl-w;
}
}
}
}
function getAbsLeft(e){var l=e.offsetLeft; while(e=e.offsetParent) l += e.offsetLeft; return l;}
function getAbsTop(e){ var t=e.offsetTop; while(e=e.offsetParent) t += e.offsetTop; return t;}
function getElementById(id)
{
if (arguments.length == 0) return null;
/*@cc_on @*/ /*@if (@_jscript_version>=3) return document.all(id); @end @*/
try {return document.getElementById(id);} catch(e){ return eval(id);}
}
var WCB = new WebConboBox("WCB"); //所有的 Combo Box 公用一个数据展示层
// -->
{
var bodyClientHeight = this.Layer.layer.document.body.clientHeight;
var bodyScrollTop = this.Layer.layer.document.body.scrollTop;
var itemTop = getAbsTop(a[this.divIndex]) + 16;
if (itemTop < bodyClientHeight) this.Layer.layer.document.body.scrollTop = 0;
if (itemTop > bodyClientHeight)
this.Layer.layer.document.body.scrollTop = itemTop - bodyClientHeight;
}
}
this.input.onkeydown = function()
{
var CB = eval(WCBN).items[WCBI];
switch(window.event.keyCode) //非IE浏览器, 这里可能会出现小问题
{
case 40 : CB.arrow(40); break;
case 38 : CB.arrow(38); break;
case 13 : CB.arrow(13); break;
default : setTimeout(WCBN +".items["+ WCBI +"].match()"); break;
}
}
this.click = function(n)
{
this.text = this.input.value =this.WCBItems[n].text;
this.index = this.source.selectedIndex = this.WCBItems[n].index;
this.value = this.WCBItems[n].value; this.hide();
}
this.input.onblur = function()
{
var CB = eval(WCBN).items[WCBI], A = CB.source.options;
if(!CB.mouse){ CB.hide(); CB.hideArrow();}
for(var i=0; i<A.length; i++) if(A[i].text==this.text) return;
if (CB.canAddOption)
{
CB.text = CB.value = CB.userInput;
A.add(new Option(CB.text, CB.value, true, true));
CB.source.selectedIndex = CB.index = A.length -1;
}
else
{
if (CB.reserveLastInput)
{
CB.text = CB.value = CB.userInput;
if(A.length == CB.sourceOpLen) A.add(new Option(CB.text, CB.value, true, true));
else { A[CB.sourceOpLen].text = CB.text; A[CB.sourceOpLen].value = CB.value; }
CB.source.selectedIndex = CB.index = CB.sourceOpLen; return;
}
CB.index = CB.source.selectedIndex;
CB.value = A[CB.index].value;
CB.text = CB.input.value = A[CB.index].text;
}
}
}
function WebConboBoxDataItem(WCBN, WCBI)
{
this.value = this.text = ""; this.index = -1;
this.toString = function(n, color, bgColor, fontSize, fontFamily)
{
return("<div style='color: "+ color +"; background-color: "+ bgColor
+"; font-size: "+ fontSize +"; font-family: "+ fontFamily +"' "
+"onclick ='parent."+ WCBN +".items["+ WCBI +"].click("+ n +")' "
+"onmouseover='parent."+ WCBN +".items["+ WCBI +"].mouseover(this)' "
+"onmouseout ='parent."+ WCBN +".items["+ WCBI +"].mouseout(this)' "
+"nowrap>"+ this.text +"</div>");
}
}
function WebLayer(layerName)
{
if(typeof(layerName) != "string") return("The layerName is wrong！");
this.layer = this.iframe = null;
this.IE = window.navigator.appName == "Microsoft Internet Explorer";
var Ver = window.navigator.appVersion;
this.popup = this.IE && parseFloat(Ver.substr(Ver.indexOf("MSIE")+5))>=5.5;
if (this.popup)
{
this.layer= window.createPopup();
with(this.layer.document.body.style)
{
border = "1px solid #000000";
overflow = "auto";
overflowX = "hidden";
margin = "4 0 4 0";
}
}
else
{
document.write("<iframe name='WebLayer_"+ layerName +"' id='WebLayer_"+ layerName +"' scrolling=yes"
+" frameborder=0 border=0 style='position: absolute; display: none; z-index: 10;'></iframe>");
this.iframe = getElementById("WebLayer_"+ layerName);
this.layer = window.frames["WebLayer_"+ layerName];
this.layer.document.write("<html><head>"
+" <meta http-equiv='Content-Type' content='text/html; charset=gb2312'></head><body "
+" style='border: 1px solid #000000; overflow:auto; overflow-x:hidden; margin: 4 0 4 0' "
+" onselectstart='return false' oncontextmenu='return false'></body></html>");
this.layer.document.close();
}
this.style = this.layer.document.body.style;
this.hide = function()
{
if (this.popup){this.layer.hide();}
else this.iframe.style.display = "none";
}
this.write = function(str)
{
if(this.popup) this.layer.document.body.innerHTML =
"<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>"+ str;
else this.layer.document.body.innerHTML = str;
}
this.show = function(e, width, height)
{
if(typeof(e)!="object") return("Layer need a head object！");
if( !(width && height)) return("Width or Height is wrong！");
var oh = e.offsetHeight;
var t = getAbsTop(e) + oh;
var l = getAbsLeft(e);
var dt = document.body.scrollTop;
var dl = document.body.scrollLeft;
var w = width;
var h = height;
if(this.popup)
{
var wt = window.screenTop;
var wl = window.screenLeft;
var sw = window.screen.width;
var sh = window.screen.height;
this.layer.show(0, 0, 0, 0);
var ldbs= this.layer.document.body.scrollHeight + 2;
var h = ldbs > h ? h : ldbs;
var left = (sw-l-wl+dl > w) ? l-dl+wl+2 : sw-w;
var top = (sh-t-wt+dt > h) ? t-dt+wt+2 : (t-dt-oh+wt < h) ? t-dt+wt+2 : t-h-dt-oh+wt;
this.layer.show(left, top, w, h);
}
else
{
var dw = document.body.clientWidth;
var dh = document.body.clientHeight;
var ldbs= this.layer.document.body.scrollHeight + 2;
with(this.iframe.style)
{
display = "";
width = w;
height = ldbs > h ? h : ldbs;
top = (dh+dt-t > h) ? t : (t-dt-oh<h) ? t : t-dt-oh;
left = (dw+dl-l > w) ? l : dw+dl-w;
}
}
}
}
function getAbsLeft(e){var l=e.offsetLeft; while(e=e.offsetParent) l += e.offsetLeft; return l;}
function getAbsTop(e){ var t=e.offsetTop; while(e=e.offsetParent) t += e.offsetTop; return t;}
function getElementById(id)
{
if (arguments.length == 0) return null;
/*@cc_on @*/ /*@if (@_jscript_version>=3) return document.all(id); @end @*/
try {return document.getElementById(id);} catch(e){ return eval(id);}
}
var WCB = new WebConboBox("WCB"); //所有的 Combo Box 公用一个数据展示层
// -->
meizz 2005-03-25
- 打赏
- 举报
<!--
function WebConboBox(CollectionName)
{ //作者: meizz(梅花雪) QQ: 112889082 http://www.meizz.com/
if(typeof(CollectionName)!="string")
return("在您 new 一个 WebComboBox 的时候请把您将赋予的变量名也传递进来！");
this.layer = new WebLayer("meizzWCB");
this.items = new Array();
this.add = function(Source, ShowArrow, RLOp, AddOp)
{
var e = new WebComboBoxItem(CollectionName, this.items.length, Source, ShowArrow, RLOp, AddOp);
this.items[this.items.length] = e; return e;
}
}
function WebComboBoxItem(WCBN, WCBI, SourceObject, IsSArrow, IsRLOp, CanAddOp)
{
if(typeof(SourceObject)!="object" && SourceObject.tagName!="SELECT")
return("请把这个 ComboBox 对应的下拉框对象作为参数带进来！");
if(SourceObject.name=="") return("绑定的下拉框 name 不能为空！");
this.source = SourceObject;
if (this.source.multiple || (this.source.size && this.source.size>1))return false;
this.sourceOpLen=this.source.options.length; if(this.sourceOpLen==0) return false;
this.color = "#000000";
this.bgColor = "#FFFFFF";
this.fontSize = "9pt";
this.className= "";
this.fontFamily = "宋体";
this.isShowArrow = IsSArrow; //显示下拉框的那个下拉箭头
this.canAddOption = CanAddOp; //用户的每次新输入都记录到下拉框中
this.reserveLastInput = IsRLOp; //当此 canAddOption=false 时是否保留用户的最后一次输入
this.arroWidth= 18;
this.userInput= "";
if(this.source.selectedIndex == -1) this.source.selectedIndex = 0;
this.index = this.source.selectedIndex;
this.text = this.source.options[this.index].text;
this.value = this.source.options[this.index].value;
this.width = this.source.clientWidth;
this.height = this.source.clientHeight;
var WCBInput = "<input type=text id='WCBInput_"+ this.source.name +"' style='padding-left: 3;"
+"width : "+ this.width +"; height : "+ this.height +"; font-size: "+ this.fontSize +"'>";
this.source.insertAdjacentHTML("afterEnd", WCBInput);
this.input = getElementById("WCBInput_"+ this.source.name);
this.source.style.position = "absolute";
this.source.style.top = getAbsTop(this.input);
this.source.style.left = getAbsLeft(this.input);
this.divIndex = -1;
this.mouse = false;
this.iframe = null;
this.Layer = null;
this.LayerStatus = false;
this.WCBItems = new Array();
this.iframe = eval(WCBN).layer.iframe;
this.Layer = eval(WCBN).layer;
this.showArrow = function(){this.source.style.display = "";}
this.hideArrow = function(){if(!this.isShowArrow) this.source.style.display = "none";}
this.hide = function(){this.Layer.hide(); this.LayerStatus = false;}
this.source.attachEvent("onchange", function()
{
var CB = eval(WCBN).items[WCBI];
CB.index = CB.source.selectedIndex;
CB.text = CB.source.options[CB.index].text;
CB.value = CB.source.options[CB.index].value;
CB.input.value = CB.text; CB.input.select();
});
this.match = function()
{
var str = this.userInput = this.input.value;
if(str.replace(/^\s+|\s+$/, "")==""){this.hide(); return;}
this.WCBItems.length = 0; var a = this.source.options, s='';
for(var i=0; i<a.length; i++)
{
if(a[i].text!=str && a[i].text.indexOf(str)==0)
{
var e = new WebConboBoxDataItem(WCBN, WCBI);
e.index = i; e.text = a[i].text; e.value = a[i].value;
this.WCBItems[this.WCBItems.length] = e;
}
}
for(var i=0; i<this.WCBItems.length; i++)
s += this.WCBItems[i].toString(i, this.color, this.bgColor, this.fontSize, this.fontFamily);
if(s!="") { this.Layer.write(s); this.LayerStatus = true;
this.Layer.show(this.input, this.width, 108);} else this.hide();
}
this.setTopLeft = function()
{
this.source.style.top = getAbsTop(this.input);
this.source.style.left = getAbsLeft(this.input);
}
this.setParam = function()
{
with(this.source.style)
{
if(this.color != "") color = this.color;
if(this.fontSize!= "") fontSize = this.fontSize;
if(this.bgColor != "") backgroundColor = this.bgColor;
if(this.fontFamily!= "") fontFamily = this.fontFamily;
top = getAbsTop(this.input); left = getAbsLeft(this.input);
this.input.style.width = this.width = this.source.clientWidth;
this.input.style.height = this.height = this.source.clientHeight;
clip = "rect(2 "+(this.width-2)+" "+(this.height-2)+" "+(this.width-this.arroWidth)+")";
if (!this.isShowArrow) display = "none";
} this.input.value = this.text;
with(this.input.style)
{
if(this.color != "") color = this.color;
if(this.fontSize!= "") fontSize = this.fontSize;
if(this.bgColor != "") backgroundColor = this.bgColor;
if(this.fontFamily!= "") fontFamily = this.fontFamily;
} if(this.className != "") this.input.className = this.className;
}
this.input.onfocus = function(){eval(WCBN +".items["+ WCBI +"]").showArrow();}
this.input.onmouseover = function(){eval(WCBN +".items["+ WCBI +"]").showArrow();}
this.source.onblur = function(){eval(WCBN +".items["+ WCBI +"]").hideArrow();}
window.attachEvent("onscroll", function(){eval(WCBN +".items["+ WCBI +"]").setTopLeft();});
window.attachEvent("onresize", function(){eval(WCBN +".items["+ WCBI +"]").setTopLeft();});
window.attachEvent("onload", function()
{eval(WCBN +".items["+ WCBI +"]").setParam(); eval(WCBN +".items["+ WCBI +"]").setTopLeft();});
this.input.onmouseout = function(){var CB = eval(WCBN +".items["+ WCBI +"]");
if(document.activeElement != this && window.event.toElement!=CB.source) CB.hideArrow();}
//对匹配后的数据展现层的控制
this.mouseover= function(e)
{
var a = this.Layer.layer.document.getElementsByTagName("div");
if(this.divIndex!=-1){with(a[this.divIndex].style)
{color=this.color; backgroundColor=this.bgColor;}} this.mouse=true;
for(var i=0; i<a.length; i++) if(a[i]==e){this.divIndex = i; break;}
with(e.style){ color="highlighttext"; background="highlight"; }
}
this.mouseout = function(e)
{
this.mouse=false; this.divIndex = -1;
with(e.style){ color=this.color; backgroundColor=this.bgColor;}
}
this.arrow = function(n)
{
if(!this.LayerStatus) {this.divIndex = -1; return;}
if(n==13)
{
if(this.mouse)
{
this.text = this.input.value = this.WCBItems[this.divIndex].text;
this.value= this.WCBItems[this.divIndex].value; this.mouse = false;
this.index= this.source.selectedIndex = this.WCBItems[this.divIndex].index;
this.hide(); window.event.keyCode = 0; window.event.returnValue = false;
} return;
}
var a = this.Layer.layer.document.getElementsByTagName("div");
if(this.divIndex!=-1){ this.mouse=false; with(a[this.divIndex].style)
{color=this.color; backgroundColor=this.bgColor;}}
if(n==40)
{
if(this.divIndex<a.length-1){this.mouse=true; this.divIndex++;
this.input.value = this.WCBItems[this.divIndex].text;
with(a[this.divIndex].style){color="highlighttext"; background="highlight";}}
else {this.mouse=false; this.divIndex=-1; this.input.value = this.userInput;}
}
else if(n==38)
{
if(this.divIndex!=0){if(this.divIndex==-1) this.divIndex=a.length;
this.mouse=true; this.divIndex--;
this.input.value = this.WCBItems[this.divIndex].text;
with(a[this.divIndex].style){color="highlighttext"; background="highlight";}}
else {this.mouse=false; this.divIndex=-1; this.input.value = this.userInput;}
}
function WebConboBox(CollectionName)
{ //作者: meizz(梅花雪) QQ: 112889082 http://www.meizz.com/
if(typeof(CollectionName)!="string")
return("在您 new 一个 WebComboBox 的时候请把您将赋予的变量名也传递进来！");
this.layer = new WebLayer("meizzWCB");
this.items = new Array();
this.add = function(Source, ShowArrow, RLOp, AddOp)
{
var e = new WebComboBoxItem(CollectionName, this.items.length, Source, ShowArrow, RLOp, AddOp);
this.items[this.items.length] = e; return e;
}
}
function WebComboBoxItem(WCBN, WCBI, SourceObject, IsSArrow, IsRLOp, CanAddOp)
{
if(typeof(SourceObject)!="object" && SourceObject.tagName!="SELECT")
return("请把这个 ComboBox 对应的下拉框对象作为参数带进来！");
if(SourceObject.name=="") return("绑定的下拉框 name 不能为空！");
this.source = SourceObject;
if (this.source.multiple || (this.source.size && this.source.size>1))return false;
this.sourceOpLen=this.source.options.length; if(this.sourceOpLen==0) return false;
this.color = "#000000";
this.bgColor = "#FFFFFF";
this.fontSize = "9pt";
this.className= "";
this.fontFamily = "宋体";
this.isShowArrow = IsSArrow; //显示下拉框的那个下拉箭头
this.canAddOption = CanAddOp; //用户的每次新输入都记录到下拉框中
this.reserveLastInput = IsRLOp; //当此 canAddOption=false 时是否保留用户的最后一次输入
this.arroWidth= 18;
this.userInput= "";
if(this.source.selectedIndex == -1) this.source.selectedIndex = 0;
this.index = this.source.selectedIndex;
this.text = this.source.options[this.index].text;
this.value = this.source.options[this.index].value;
this.width = this.source.clientWidth;
this.height = this.source.clientHeight;
var WCBInput = "<input type=text id='WCBInput_"+ this.source.name +"' style='padding-left: 3;"
+"width : "+ this.width +"; height : "+ this.height +"; font-size: "+ this.fontSize +"'>";
this.source.insertAdjacentHTML("afterEnd", WCBInput);
this.input = getElementById("WCBInput_"+ this.source.name);
this.source.style.position = "absolute";
this.source.style.top = getAbsTop(this.input);
this.source.style.left = getAbsLeft(this.input);
this.divIndex = -1;
this.mouse = false;
this.iframe = null;
this.Layer = null;
this.LayerStatus = false;
this.WCBItems = new Array();
this.iframe = eval(WCBN).layer.iframe;
this.Layer = eval(WCBN).layer;
this.showArrow = function(){this.source.style.display = "";}
this.hideArrow = function(){if(!this.isShowArrow) this.source.style.display = "none";}
this.hide = function(){this.Layer.hide(); this.LayerStatus = false;}
this.source.attachEvent("onchange", function()
{
var CB = eval(WCBN).items[WCBI];
CB.index = CB.source.selectedIndex;
CB.text = CB.source.options[CB.index].text;
CB.value = CB.source.options[CB.index].value;
CB.input.value = CB.text; CB.input.select();
});
this.match = function()
{
var str = this.userInput = this.input.value;
if(str.replace(/^\s+|\s+$/, "")==""){this.hide(); return;}
this.WCBItems.length = 0; var a = this.source.options, s='';
for(var i=0; i<a.length; i++)
{
if(a[i].text!=str && a[i].text.indexOf(str)==0)
{
var e = new WebConboBoxDataItem(WCBN, WCBI);
e.index = i; e.text = a[i].text; e.value = a[i].value;
this.WCBItems[this.WCBItems.length] = e;
}
}
for(var i=0; i<this.WCBItems.length; i++)
s += this.WCBItems[i].toString(i, this.color, this.bgColor, this.fontSize, this.fontFamily);
if(s!="") { this.Layer.write(s); this.LayerStatus = true;
this.Layer.show(this.input, this.width, 108);} else this.hide();
}
this.setTopLeft = function()
{
this.source.style.top = getAbsTop(this.input);
this.source.style.left = getAbsLeft(this.input);
}
this.setParam = function()
{
with(this.source.style)
{
if(this.color != "") color = this.color;
if(this.fontSize!= "") fontSize = this.fontSize;
if(this.bgColor != "") backgroundColor = this.bgColor;
if(this.fontFamily!= "") fontFamily = this.fontFamily;
top = getAbsTop(this.input); left = getAbsLeft(this.input);
this.input.style.width = this.width = this.source.clientWidth;
this.input.style.height = this.height = this.source.clientHeight;
clip = "rect(2 "+(this.width-2)+" "+(this.height-2)+" "+(this.width-this.arroWidth)+")";
if (!this.isShowArrow) display = "none";
} this.input.value = this.text;
with(this.input.style)
{
if(this.color != "") color = this.color;
if(this.fontSize!= "") fontSize = this.fontSize;
if(this.bgColor != "") backgroundColor = this.bgColor;
if(this.fontFamily!= "") fontFamily = this.fontFamily;
} if(this.className != "") this.input.className = this.className;
}
this.input.onfocus = function(){eval(WCBN +".items["+ WCBI +"]").showArrow();}
this.input.onmouseover = function(){eval(WCBN +".items["+ WCBI +"]").showArrow();}
this.source.onblur = function(){eval(WCBN +".items["+ WCBI +"]").hideArrow();}
window.attachEvent("onscroll", function(){eval(WCBN +".items["+ WCBI +"]").setTopLeft();});
window.attachEvent("onresize", function(){eval(WCBN +".items["+ WCBI +"]").setTopLeft();});
window.attachEvent("onload", function()
{eval(WCBN +".items["+ WCBI +"]").setParam(); eval(WCBN +".items["+ WCBI +"]").setTopLeft();});
this.input.onmouseout = function(){var CB = eval(WCBN +".items["+ WCBI +"]");
if(document.activeElement != this && window.event.toElement!=CB.source) CB.hideArrow();}
//对匹配后的数据展现层的控制
this.mouseover= function(e)
{
var a = this.Layer.layer.document.getElementsByTagName("div");
if(this.divIndex!=-1){with(a[this.divIndex].style)
{color=this.color; backgroundColor=this.bgColor;}} this.mouse=true;
for(var i=0; i<a.length; i++) if(a[i]==e){this.divIndex = i; break;}
with(e.style){ color="highlighttext"; background="highlight"; }
}
this.mouseout = function(e)
{
this.mouse=false; this.divIndex = -1;
with(e.style){ color=this.color; backgroundColor=this.bgColor;}
}
this.arrow = function(n)
{
if(!this.LayerStatus) {this.divIndex = -1; return;}
if(n==13)
{
if(this.mouse)
{
this.text = this.input.value = this.WCBItems[this.divIndex].text;
this.value= this.WCBItems[this.divIndex].value; this.mouse = false;
this.index= this.source.selectedIndex = this.WCBItems[this.divIndex].index;
this.hide(); window.event.keyCode = 0; window.event.returnValue = false;
} return;
}
var a = this.Layer.layer.document.getElementsByTagName("div");
if(this.divIndex!=-1){ this.mouse=false; with(a[this.divIndex].style)
{color=this.color; backgroundColor=this.bgColor;}}
if(n==40)
{
if(this.divIndex<a.length-1){this.mouse=true; this.divIndex++;
this.input.value = this.WCBItems[this.divIndex].text;
with(a[this.divIndex].style){color="highlighttext"; background="highlight";}}
else {this.mouse=false; this.divIndex=-1; this.input.value = this.userInput;}
}
else if(n==38)
{
if(this.divIndex!=0){if(this.divIndex==-1) this.divIndex=a.length;
this.mouse=true; this.divIndex--;
this.input.value = this.WCBItems[this.divIndex].text;
with(a[this.divIndex].style){color="highlighttext"; background="highlight";}}
else {this.mouse=false; this.divIndex=-1; this.input.value = this.userInput;}
}
meizz 2005-03-25
- 打赏
- 举报
确实我没有把 combo box 加到我的网站上去, 这段时间我只顾忙我自己的JSAM框架去了, 而原来我写的 combo box 我正想把它们移植到JSAM框架上去, 所以我就没有公开了.
JK_10000 2005-03-25
- 打赏
- 举报
惭愧中... ...
顶一下
顶一下
liuquanyi 2005-03-25
- 打赏
- 举报
谢谢meizz(梅花雪) 老大的雪中送炭，我对JK_10000(JK)老大的设计特别感兴趣，只是不是我要得！
本来想改进使用的，并发了邮件得到JK_10000(JK)的指点，后来投降了！我查了两周的资料，后来还是不行－－水平是主要的因素！
星爷说过：高手不是这样练的！^_^
我先仔细看看！再次感谢并感动中……
本来想改进使用的，并发了邮件得到JK_10000(JK)的指点，后来投降了！我查了两周的资料，后来还是不行－－水平是主要的因素！
星爷说过：高手不是这样练的！^_^
我先仔细看看！再次感谢并感动中……
