<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Class_Combo</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD><SCRIPT LANGUAGE="JavaScript">
<!--
/**
** ==================================================================================================
** ClassName :CLASS_COMBO
** Intro :a control to replace select control in IE
** Example :
Ver : 0.1
---------------------------------------------------------------------------------------------------
<div id="demo"></div> <SCRIPT LANGUAGE="JavaScript">
<!--
var de = new CLASS_COMBO('demo',100);
de.add(new Option("<font color='red'>Red Word</font>","a"));
//--> < /SCRIPT>
---------------------------------------------------------------------------------------------------
** Author :ttyp
** Email :[email protected]
** Date :2007-1-23
** ==================================================================================================
**/ function CLASS_COMBO(id,width){ this.opended = false;
this.selectedIndex = -1;
this.options = new Array();
this.value = "";
this.text = "";
this.id = id; var me = this;
var ct = null; /* table */
var hv = null; /* hidden input */
var pl = null; /* show planel */
var pt = null; var o = document.getElementById(id);
if(o){
var tb = document.createElement("table");
o.appendChild(tb);
this.handle = tb;
var tr = tb.insertRow();
var tc = tr.insertCell();
var th = tr.insertCell(); tc.style.width = (width - 14) + 'px';
tc.style.whiteSpace = "nowrap";
ct = tc; th.style.fontFamily="webdings";
th.style.fontSize = "6pt";
th.style.width = "14px";
th.style.backgroundColor = "#f8f8f8";
th.align = "center";
th.innerText = "6";
th.onmouseover= function(){this.style.cursor='default';}
th.onselectstart = function(){return false;} tb.style.borderCollapse ="collapse";
tb.style.fontSize ="9pt";
tb.style.tableLayout = "fixed";
tb.border = 1;
tb.borderColor = "#f0f0f0";
tb.cellSpacing = 0;
tb.cellPadding = 1;
tb.setAttribute("accoc",id + "__combo_contain"); tb.onclick = function(){tb.focus();me.show();}
tb.onmouseover = function(){
this.borderColor = "#316ac5"; /*IE*/
this.style.border = "#316ac5 1px solid"; /* Safari, Opera and Mozilla */
}
tb.onmouseout = function(){
this.borderColor = "#f0f0f0"; /*IE*/
this.style.border = "#f0f0f0 1px solid"; /* Safari, Opera and Mozilla */
}
tb.onblur=function(){
var active = document.activeElement;
var stopHide = false; if(active!=null){
if(active.tagName =="TD"){
while(active!=null&&active.tagName!="TABLE"){
active = active.parentNode;
}
}
var ac = active.getAttribute("accoc");
if(ac!=null&&typeof(ac)!="undefined"&&ac==id + "__combo_contain"){
stopHide = true;
}
}
if(stopHide==false){
me.hide();
}
}
pl = document.createElement("div");
o.appendChild(pl);
pt = document.createElement("table");
pl.appendChild(pt); var w,l,t,h; w = me.handle.getBoundingClientRect().right - me.handle.getBoundingClientRect().left;
l = me.handle.getBoundingClientRect().left-2;
t = me.handle.getBoundingClientRect().bottom-2; pl.style.position = "absolute";
pl.style.top = t;
pl.style.left = l;
pl.style.width = w; pl.style.overflowY = "auto";
pl.style.overflowX = "hidden";
pl.style.backgroundColor = "#ffffff";
pl.style.border = "1px solid #f0f0f0";
pl.style.display = "none";
pl.style.padding = "0";
pl.setAttribute("accoc",id + "__combo_contain"); /* for scrolling */
pl.onblur = me.handle.onblur;
pl.onselectstart = function(){return false;}
pl.onfocus = function(){ me.handle.focus();} pt.style.borderCollapse ="collapse";
pt.style.fontSize ="9pt";
pt.style.width = "100%";
pt.border = 0;
pt.cellSpacing = 0;
pt.cellPadding = 1; hv = document.createElement("input"); /* Create hidden input for submit */
hv.type = "hidden";
hv.name = id + "__combo_hiden_value";
hv.id = id + "__combo_hiden_value"; o.appendChild(hv);
} this.add = function(op){
var tr = pt.insertRow();
var tc = tr.insertCell();
var dv = document.createElement("div");
tc.appendChild(dv); dv.style.width = "100%";
dv.style.border = "1px solid #f0f0f0";
dv.style.padding = "1 1 1 1";
dv.style.cursor = "hand";
dv.style.wordBreak = "break-all";
dv.style.wordWrap = "break-word";
dv.innerHTML = op.text;
dv.onmouseout = function(){this.style.border = "1px solid #f0f0f0";}
dv.onmouseover= function(){this.style.border = "1px solid #316ac5";}
dv.onmousedown = function(){var nn = this;while(nn!=null&&nn.tagName!="TR"){nn = nn.parentNode;}me.setIndex(nn.rowIndex);} /*when you use onclick event,the event while be ignored*/ if(this.selectedIndex<0){ /*set the first option for default*/
this.setIndex(0);
} this.options[this.options.length] = op; /*
* adjust panel height
*/
if(this.options.length>10)
{
pl.style.height = "200px";
}
} /* OnClick Event */
this.onclick = function(){
} /* OnChange Event */
this.onchange = function(){
} this.setIndex = function(index){
if(index>=0&&index<this.options.length){
var op = this.options[index];
this.selectedIndex = index;
this.value = hv.value;
this.text = op.text;
ct.innerHTML= toText(op.text);
hv.value = op.value; /*for submit*/
this.onchange(); /* fire event */
}else{
this.selectedIndex = -1;
this.value = "";
this.text = "";
hv.value = "";
ct.innerText= "";
this.onchange(); /* fire event */
}
}
function toText(txt){ /*inner function*/
var o = document.createElement("div");
o.innerHTML = txt;
var s = o.innerText; delete o;
o = null;
return s;
} this.getText = function(i){
var item = -1;
if(i==null&&typeof(i)=="undefined"){
item = this.selectedIndex;
}else{
item = i;
} if(this.options.length>0&&item>=0&&item<this.options.length){
return toText(this.options[item].text);
}else{
return undefined;
}
} this.show=function(){
this.opened = !this.opened;
if(this.opened&&this.options.length>0){
pl.style.display = "";
}else{
pl.style.display = "none";
}
} this.hide=function(){
this.opened = false;
pl.style.display = "none";
} this.clear = function(){
this.hide();
this.setIndex(-1);
this.options.length = 0;
for(var i=pt.rows.length-1;i>=0;i--){
pt.deleteRow();
}
} this.removeAt = function(index){
if(index>=0&&index<this.options.length){
this.hide();
this.options.splice(index,1);
pt.deleteRow(index);
if(index<=this.selectedIndex){
if(this.options.length>0){
if(index<this.options.length){
this.setIndex(index);
}else{
this.setIndex(this.options.length-1);
}
}else{
this.setIndex(-1);
}
} if(this.options.length<10){
pl.style.height = "";
}
}
}
}//-->
</SCRIPT>
<HTML>
<HEAD>
<TITLE>Class_Combo</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD><SCRIPT LANGUAGE="JavaScript">
<!--
/**
** ==================================================================================================
** ClassName :CLASS_COMBO
** Intro :a control to replace select control in IE
** Example :
Ver : 0.1
---------------------------------------------------------------------------------------------------
<div id="demo"></div> <SCRIPT LANGUAGE="JavaScript">
<!--
var de = new CLASS_COMBO('demo',100);
de.add(new Option("<font color='red'>Red Word</font>","a"));
//--> < /SCRIPT>
---------------------------------------------------------------------------------------------------
** Author :ttyp
** Email :[email protected]
** Date :2007-1-23
** ==================================================================================================
**/ function CLASS_COMBO(id,width){ this.opended = false;
this.selectedIndex = -1;
this.options = new Array();
this.value = "";
this.text = "";
this.id = id; var me = this;
var ct = null; /* table */
var hv = null; /* hidden input */
var pl = null; /* show planel */
var pt = null; var o = document.getElementById(id);
if(o){
var tb = document.createElement("table");
o.appendChild(tb);
this.handle = tb;
var tr = tb.insertRow();
var tc = tr.insertCell();
var th = tr.insertCell(); tc.style.width = (width - 14) + 'px';
tc.style.whiteSpace = "nowrap";
ct = tc; th.style.fontFamily="webdings";
th.style.fontSize = "6pt";
th.style.width = "14px";
th.style.backgroundColor = "#f8f8f8";
th.align = "center";
th.innerText = "6";
th.onmouseover= function(){this.style.cursor='default';}
th.onselectstart = function(){return false;} tb.style.borderCollapse ="collapse";
tb.style.fontSize ="9pt";
tb.style.tableLayout = "fixed";
tb.border = 1;
tb.borderColor = "#f0f0f0";
tb.cellSpacing = 0;
tb.cellPadding = 1;
tb.setAttribute("accoc",id + "__combo_contain"); tb.onclick = function(){tb.focus();me.show();}
tb.onmouseover = function(){
this.borderColor = "#316ac5"; /*IE*/
this.style.border = "#316ac5 1px solid"; /* Safari, Opera and Mozilla */
}
tb.onmouseout = function(){
this.borderColor = "#f0f0f0"; /*IE*/
this.style.border = "#f0f0f0 1px solid"; /* Safari, Opera and Mozilla */
}
tb.onblur=function(){
var active = document.activeElement;
var stopHide = false; if(active!=null){
if(active.tagName =="TD"){
while(active!=null&&active.tagName!="TABLE"){
active = active.parentNode;
}
}
var ac = active.getAttribute("accoc");
if(ac!=null&&typeof(ac)!="undefined"&&ac==id + "__combo_contain"){
stopHide = true;
}
}
if(stopHide==false){
me.hide();
}
}
pl = document.createElement("div");
o.appendChild(pl);
pt = document.createElement("table");
pl.appendChild(pt); var w,l,t,h; w = me.handle.getBoundingClientRect().right - me.handle.getBoundingClientRect().left;
l = me.handle.getBoundingClientRect().left-2;
t = me.handle.getBoundingClientRect().bottom-2; pl.style.position = "absolute";
pl.style.top = t;
pl.style.left = l;
pl.style.width = w; pl.style.overflowY = "auto";
pl.style.overflowX = "hidden";
pl.style.backgroundColor = "#ffffff";
pl.style.border = "1px solid #f0f0f0";
pl.style.display = "none";
pl.style.padding = "0";
pl.setAttribute("accoc",id + "__combo_contain"); /* for scrolling */
pl.onblur = me.handle.onblur;
pl.onselectstart = function(){return false;}
pl.onfocus = function(){ me.handle.focus();} pt.style.borderCollapse ="collapse";
pt.style.fontSize ="9pt";
pt.style.width = "100%";
pt.border = 0;
pt.cellSpacing = 0;
pt.cellPadding = 1; hv = document.createElement("input"); /* Create hidden input for submit */
hv.type = "hidden";
hv.name = id + "__combo_hiden_value";
hv.id = id + "__combo_hiden_value"; o.appendChild(hv);
} this.add = function(op){
var tr = pt.insertRow();
var tc = tr.insertCell();
var dv = document.createElement("div");
tc.appendChild(dv); dv.style.width = "100%";
dv.style.border = "1px solid #f0f0f0";
dv.style.padding = "1 1 1 1";
dv.style.cursor = "hand";
dv.style.wordBreak = "break-all";
dv.style.wordWrap = "break-word";
dv.innerHTML = op.text;
dv.onmouseout = function(){this.style.border = "1px solid #f0f0f0";}
dv.onmouseover= function(){this.style.border = "1px solid #316ac5";}
dv.onmousedown = function(){var nn = this;while(nn!=null&&nn.tagName!="TR"){nn = nn.parentNode;}me.setIndex(nn.rowIndex);} /*when you use onclick event,the event while be ignored*/ if(this.selectedIndex<0){ /*set the first option for default*/
this.setIndex(0);
} this.options[this.options.length] = op; /*
* adjust panel height
*/
if(this.options.length>10)
{
pl.style.height = "200px";
}
} /* OnClick Event */
this.onclick = function(){
} /* OnChange Event */
this.onchange = function(){
} this.setIndex = function(index){
if(index>=0&&index<this.options.length){
var op = this.options[index];
this.selectedIndex = index;
this.value = hv.value;
this.text = op.text;
ct.innerHTML= toText(op.text);
hv.value = op.value; /*for submit*/
this.onchange(); /* fire event */
}else{
this.selectedIndex = -1;
this.value = "";
this.text = "";
hv.value = "";
ct.innerText= "";
this.onchange(); /* fire event */
}
}
function toText(txt){ /*inner function*/
var o = document.createElement("div");
o.innerHTML = txt;
var s = o.innerText; delete o;
o = null;
return s;
} this.getText = function(i){
var item = -1;
if(i==null&&typeof(i)=="undefined"){
item = this.selectedIndex;
}else{
item = i;
} if(this.options.length>0&&item>=0&&item<this.options.length){
return toText(this.options[item].text);
}else{
return undefined;
}
} this.show=function(){
this.opened = !this.opened;
if(this.opened&&this.options.length>0){
pl.style.display = "";
}else{
pl.style.display = "none";
}
} this.hide=function(){
this.opened = false;
pl.style.display = "none";
} this.clear = function(){
this.hide();
this.setIndex(-1);
this.options.length = 0;
for(var i=pt.rows.length-1;i>=0;i--){
pt.deleteRow();
}
} this.removeAt = function(index){
if(index>=0&&index<this.options.length){
this.hide();
this.options.splice(index,1);
pt.deleteRow(index);
if(index<=this.selectedIndex){
if(this.options.length>0){
if(index<this.options.length){
this.setIndex(index);
}else{
this.setIndex(this.options.length-1);
}
}else{
this.setIndex(-1);
}
} if(this.options.length<10){
pl.style.height = "";
}
}
}
}//-->
</SCRIPT>
解决方案 »
- js根据文件路径上传文件
- 实现Window开始菜单效果
- with语句 函数
- 单击页面任一处跳转到指定页面
- 日期判断的问题?
- 急求:!!!!!!!!!!!!!!!!!!!!!JavaScript为什么不能控制页面问题
- 如何实现在页面加载时显示"数据加载中"显示框,等页面数据加载完了,关闭显示框,显示页面.
- 向高手请教:如何得到label的id号
- 高手求救:谁有ubb code 函数代码库?我曾经down了一些,但是不够用,如果同时在内容中插入两幅图片,就不能正常显示该图片,我已经被难
- 纯js怎么绘制多行的表格啊?
- 请大家给我出几个典型的正则题目 让我做下谢谢
- 请教一下达人:用javascript动态生成单选框(radio)组的问题?
<strong>Style:</strong>
<div id="demo"></div>
DSGDFGSDFG
<p></p><br>
<strong>Font:</strong>
<div id="demo1"></div> <SCRIPT LANGUAGE="JavaScript">
<!--
var de = new CLASS_COMBO('demo',228);
de.add(new Option("<font color='red'>Red Word</font>","a"));
de.add(new Option("<strong>Strong Word</strong>","b"));
de.add(new Option("<font size=6>Big Word</font>","c"));
de.add(new Option("<u>Underline</u>","d"));
de.add(new Option("<STRIKE>Strike Word</STRIKE>","e"));
de.add(new Option("<cite>Cite Word</cite>","f"));
de.add(new Option("<span style='background-color: black;color:white;width:100%'>Black Background</span>","g"));
de.add(new Option("<marquee>hello</marquee>","h"));
de.add(new Option("long word test","i"));
de.add(new Option("<strong>Strong Word</strong>","b"));
de.add(new Option("<font size=6>Big Word</font>","c"));
de.add(new Option("<u>Underline</u>","d"));
de.add(new Option("<STRIKE>Strike Word</STRIKE>","b"));
de.add(new Option("<cite>Cite Word</cite>","c"));
de.add(new Option("<span style='background-color: black;color:white;width:100%'>Black Background</span>","c")); /*
* Set Index Demo
*/
de.setIndex(1); /*
* OnChange Event Demo
*/
de.onchange = function(){
document.title =(de.getText());
}
var df = new CLASS_COMBO('demo1',128); df.add(new Option("<font face='Arial'>Arial</font>","h"));
df.add(new Option("<font face='Arial Black'>Arial Blak</font>","i"));
df.add(new Option("<font face='Comic Sans MS'>Comic Sans MS</font>","j"));
df.add(new Option("<font face='Courier New'>Courier New</font>","k"));
df.add(new Option("<font face='Monotype Corsiva'>Monotype Corsiva</font>","l"));
df.add(new Option("<font face='MS Sans Serif'>MS Sans Serif</font>","p"));
df.add(new Option("<font face='Verdana'>Verdana</font>","q")); //-->
</SCRIPT>
<p></p>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<input type=button value="setIndex" onclick="de.setIndex(3)"> <input type=button value="remove" onclick="de.removeAt(0)"> <input type=button value="clear" onclick="de.clear()"> <input type=button value="text" onclick="alert(de.text)"> <input type=button value="getText" onclick="alert(de.getText())"> <input type=button value="value" onclick="alert(de.value)">
</BODY>
</HTML>
在IE下效果不错,可FX就。
--------------
ie里,select虽说是个怪胎,可也有些地方值得学习:
tab键的应用
上下键的应用
键入第一个字母的查询
-------------
选项里图片可以自己可以加HTML就可以,但是文本里不行,但是如果需要也可以改造