<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<%@ taglib uri="/WEB-INF/struts-nested.tld" prefix="nested" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-template.tld" prefix="template" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ page contentType="text/html; charset=GBK" %>
<html:html xhtml="true" locale="true">
<head>
<title>
</title>
<html:base/>
</head>
<body οnlοad="comboBox()">
<html:form action="comboAction.do" method="POST">
<select id="MeizzComboBoxID" name="select">
<option>combo box</option>
<option value="11">疏影横斜水清浅</option>
<option value="22">暗香浮动月黄昏</option>
<option value="33">梅须逊雪三分白</option>
<option value="44">雪却输梅一段香</option>
<option value="55">梅花香自苦寒来</option>
</select>
<br />
<input type="submit" value="submit"/>
</html:form>
</body>
</html:html>
<SCRIPT LANGUAGE="JavaScript"><!--
function comboBox()
{
combox = new MeizzComboBox();
}
function MeizzComboBox()
{ //作者: meizz(梅花雪) meizz@hzcnc.com
this.object = getObjectById("MeizzComboBoxID");
this.input = document.createElement("input");
this.div = document.createElement("div");
document.body.appendChild(this.input);
document.body.appendChild(this.div);
this.SS = this.object.style;
this.IS = this.input.style;
this.DS = this.div.style;
this.IS.fontSize = this.SS.fontSize = this.DS.fontSize = "12px";
this.IS.position = this.SS.position = this.DS.position = "absolute";
this.top = getObjectTop(this.object);
this.left = getObjectLeft(this.object);
this.width = this.object.clientWidth;
this.height = this.object.clientHeight;
this.DS.border = "1px solid #000000";
this.DS.display = "none";
this.DS.color = "#000000";
this.DS.overflow = "auto";
this.DS.overflowX = "hidden";
this.DS.padding = "2 0 8 0";
this.IS.cursor = "default";
this.IS.borderRight = "0px";
this.DS.backgroundColor = "#FFFFFF";
this.IS.top = this.top;
this.DS.top = this.top + this.height;
this.IS.left = this.DS.left = this.left;
this.IS.width = this.width-18;
this.DS.width = this.width;
this.SS.clip = "rect(0 "+ this.width +" "+ this.height +" "+ this.IS.width +")";
this.inputIndex = this.object.selectedIndex;
this.input.value = this.object.options[this.object.selectedIndex].text;
this.inputValue = this.object.options[this.object.selectedIndex].value;
this.candidateValue = ""; //候选条目的选中项的 value
this.candidateText = ""; //候选条目的选中项的 text
this.candidateFocus = null; //候选项的当前焦点项
this.divIndex = -1; //候选项的当前焦点项的索引值
this.clientInput = ""; //该变量用来记录用户的输入内容
this.candidateSelect = false; //判断当前是否正在选择候选
this.candidateHeight = 118; //候选条显示的高度值
this.object.onchange = comboxSelectChange;
this.object.onclick = comboxSelectChange;
this.input.onblur = comboxInputBlur;
this.input.onkeydown = comboxInputKeyDown;
this.div.onscroll = comboxDivScrolling;
this.div.onmousedown = comboxDivScrolling;
this.div.onblur = comboxDivHidden;
} var combox;
function comboxDivScrolling(){combox.candidateSelect= true;}
function String.prototype.Trim() {return this.replace(/(^/s*)|(/s*$)/g,"");}
function getObjectById(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);}
}
function getObjectLeft(e)
{
var l=e.offsetLeft; while(e=e.offsetParent) l += e.offsetLeft; return l;
}
function getObjectTop(e)
{
var t=e.offsetTop; while(e=e.offsetParent) t += e.offsetTop; return t;
}
function setComboxClip()
{
combox.width = combox.object.clientWidth;
combox.IS.width = combox.width-18;
combox.DS.width = combox.width;
combox.SS.clip = "rect(0 "+ combox.width +" "+ combox.height +" "+ combox.IS.width +")";
combox.SS.left = combox.left + 1; //这个变态 select 的 clip 属性, 一定要 select 重载才发生作用
setTimeout("combox.SS.left = combox.left;");
}
function comboxSelectChange()
{
combox.inputIndex = combox.object.selectedIndex;
combox.input.value = combox.object.options[combox.object.selectedIndex].text;
combox.inputValue = combox.object.options[combox.object.selectedIndex].value;
combox.input.select();
}
function comboxInputBlur()
{
var a = combox.object.options, bb=true;
for(var i=0; i<a.length; i++)
{
if(combox.input.value.Trim() == a[i].text){bb = false; break;}
}
if(combox.input.value.Trim() != "" && bb && !combox.candidateSelect)
{
combox.inputValue = combox.clientInput;
combox.inputIndex = a.length;
a.add(new Option(combox.clientInput, combox.clientInput));
combox.object.options[combox.inputIndex].selected = true;
setTimeout("setComboxClip()");
}
if(!combox.candidateSelect) comboxDivHidden();
}
function comboxDivMouseover(obj)
{
var e = obj ? obj : window.event.srcElement;
e.style.background = "highlight";
e.style.color = "highlighttext";
combox.candidateSelect= true;
for(var i=0; i<combox.div.children.length; i++)
if(combox.div.children[i] == e) combox.divIndex = i;
combox.candidateFocus = e;
combox.inputIndex = parseInt(e.id.substr(17));
combox.candidateText = combox.object.options[combox.inputIndex].text;
combox.candidateValue = combox.object.options[combox.inputIndex].value;
}
function comboxDivMouseout(obj)
{
var e = obj ? obj : window.event.srcElement;
e.style.background = "#FFFFFF";
e.style.color = "#000000";
combox.candidateSelect = false;
combox.candidateFocus = null;
combox.candidateValue = "";
combox.candidateText = "";
}
function comboxDivClick()
{
if(combox.candidateSelect)
{
combox.input.value = combox.candidateText;
combox.inputValue = combox.candidateValue;
combox.object.options[combox.inputIndex].selected = true;
combox.input.select();
comboxDivHidden();
}
}
function comboxDivHidden()
{
for(var i=combox.div.children.length-1; i>=0; i--)
combox.div.removeChild(combox.div.children[i]);
combox.candidateSelect = false;
combox.candidateFocus = null;
combox.candidateValue = "";
combox.candidateText = "";
combox.divIndex = -1;
combox.DS.height = 0;
combox.DS.display = "none";
}
function comboxInputKeyDown()
{
switch(window.event.keyCode)
{
case 40 : comboxDivArrow(40); break;
case 38 : comboxDivArrow(38); break;
case 13 : comboxDivClick(combox.candidateFocus); break;
default : setTimeout("combox.clientInput=combox.input.value; comboxDivChildren()"); break;
}
}
function comboxDivChildren()
{
var s = combox.input.value, d = null, a = combox.object.options;
var divstyle = "font-size: 12px; padding: 2 1 0 2; color: #000000; cursor: default";
var sameness = false;
comboxDivHidden();
if(s != "")
{
for(var i=0; i<a.length; i++)
{
if(a[i].text.Trim().indexOf(s) == 0)
{
if(a[i].text.Trim() == s) sameness = true;
d = document.createElement("div");
d.style.cssText = divstyle;
d.id = "comboxDivChildren"+ i;
d.innerText = a[i].text;
d.onclick = comboxDivClick;
d.onmouseover = comboxDivMouseover;
d.onmouseout = comboxDivMouseout;
combox.div.appendChild(d);
d = null;
}
}
if(combox.div.children.length > 0 && !(sameness && combox.div.children.length==1))
combox.DS.display = "";
if(combox.div.clientHeight > combox.candidateHeight) combox.DS.height = combox.candidateHeight;
}
}
function comboxDivArrow(num)
{
var a = combox.div.children;
if(a.length == 0) return;
if(combox.candidateFocus != null) comboxDivMouseout(combox.candidateFocus);
if(num == 40) //住下翻选候选项
{
if(combox.divIndex < 0) combox.divIndex = 0;
else if(combox.divIndex == (a.length-1))
{
combox.input.value = combox.clientInput;
combox.divIndex = -1;
}
else combox.divIndex++;
}
else
{
if(combox.divIndex < 0) combox.divIndex = a.length-1;
else if(combox.divIndex == 0)
{
combox.input.value = combox.clientInput;
combox.divIndex = -1;
}
else combox.divIndex--;
}
if(combox.divIndex >= 0)
{
combox.candidateSelect = true;
combox.candidateFocus = a[combox.divIndex];
combox.inputIndex = parseInt(combox.candidateFocus.id.substr(17));
combox.input.value = combox.candidateText = combox.object.options[combox.inputIndex].text;
combox.inputValue = combox.object.options[combox.inputIndex].value;
combox.candidateFocus.style.background = "highlight";
combox.candidateFocus.style.color = "highlighttext";
}
}
//-->
</SCRIPT>
2816
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
