打造个性化的Select(可编辑)_表单特效

2019年9月17日 05:22:22js教程评论1K views阅读模式

由于系统自带的Select实在是不好用,这里我用javascript写了一个全新的Select.

功能:

1.可编辑的Select

2.长度可以随意修改

3.可以遮盖系统Select

4.支持forms

5.支持CSS修改外观

6.修正在IE 5.0上运行出错的问题

7.支持使用js脚本

使用方法

[b]var 实体化变量=new editselect(名字,长度,默认字符串,宽度,高度,只读)[/b]

[b]实体化变量.add(option数值,JS脚本)[/b]

这只是一个测试版,很多功能没有完善,比如没有区分value和caption等等,希望大家提出宝贵意见.

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>EditSelect</title> 
<script> 
function isIE(){ 
a=navigator.appVersion.split(";") 
b=a[1].split(" ") 
return parseFloat(b[2]) 
} 
if (isIE()<5.5) 
{ 
 scHTML='<div id="selectcontent" class="selectdiv" style="visibility:hidden;"><div id="selecthtml" class="selectcontent">selectÁÐ表</div></div>' 
} 
else 
{ 
 scHTML='<div id="selectcontent" class="selectdiv" style="visibility:hidden;"><iframe id=selframe frameborder=0 height=100%></iframe><div id="selecthtml" class="selectcontent">selectÁÐ表</div></div>' 
} 
document.write(scHTML) 
vDiv=selectcontent 
vDivHtml=selecthtml 
function editselect(name,size,defaulttext,width,height,readonly){ 
 var combo=this; 
 this.options=new Array(); 
 this.oj=new Array(); 
 this.name=name; 
 this.divname=name+'_div'; 
 this.buttonname=name+'_button'; 
 this.tablename=name+'_table'; 
 this.htmltable=name+'_html' 
 if (!height) this.height=0; else this.height=height 
 if (width) this.width=width 
 if (!size) size=8 
 if (!defaulttext) defaulttext="" 
 if (!readonly || readonly==0) {readonly="" }else {if (readonly==1) readonly="readonly style=cursor:default";this.readonly=1} 
 esHTML='<div id='+this.divname+'>' 
 +'<table id='+this.tablename+' cellpadding=0 cellspacing=0 class=select><tr><td bgcolor=#FFFFFF>' 
 +'<input type=text class=selecttext size="'+size+'" name='+name+' value="'+defaulttext+'" '+readonly+'><td><button class=selectbutton id='+this.buttonname+'>6</td></tr></table>' 
 +'</div>' 
 document.write(esHTML) 
 this.sbutton=eval("document.all."+this.buttonname) 
 if (this.readonly==1) eval("document.all."+this.name).onclick=function(){combo.show()} 
 this.sbutton.onclick=function(){combo.show()} 
 this.show=function(){ 
 pDiv=eval(combo.divname) 
 pTable=eval(combo.tablename) 
 var vHTML='<table id=htmltable cellspacing="0" cellpadding="2" bgcolor="#ffffff" class="selecttable" width=100%>' 
 for (i=0;i<combo.options.length;i++) 
 { 
 vHTML+='<tr onmouseover="mo(this)" onmouseout="mu(this)" onclick="document.all.'+combo.name+'.value=this.innerText;selectcontent.style.visibility=\'hidden\';'+combo.oj[i]+'"><td nowrap>'+combo.options[i] 
 } 
 vHTML+="</table>" 
 vDivHtml.innerHTML=vHTML 
 vtop=pDiv.offsetTop+pDiv.offsetHeight 
 vleft=pDiv.offsetLeft+2 
 vParent = pDiv.offsetParent; 
 while (vParent.tagName.toUpperCase() != "BODY") 
 { 
 vleft += vParent.offsetLeft; 
 vtop += vParent.offsetTop; 
 vParent = vParent.offsetParent; 
 } 
 var redge=document.body.clientWidth-vleft 
 var bedge=document.body.clientHeight-vtop 
 if (!combo.width) {vDiv.style.width=pTable.offsetWidth} else {vDiv.style.width=combo.width} 
 if (combo.height==0) 
 { 
 vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2 
 vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2 
 } 
 else 
 { 
 if (htmltable.offsetHeight>combo.height) 
 { 
 vDiv.style.pixelHeight=combo.height 
 vDivHtml.style.pixelHeight=combo.height 
 } 
 else 
 { 
 vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2 
 vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2 
 } 
 } 
 vDivHtml.scrollTop=0 
 if (redge<vDiv.offsetWidth) 
 vDiv.style.left=vleft-1-(vDiv.offsetWidth-redge) 
 else 
 vDiv.style.left=vleft-1 
 if (bedge<vDiv.offsetHeight) 
 //vDiv.style.top=vtop-vDiv.offsetHeight-pDiv.offsetHeight 
 vDiv.style.top=vtop-vDiv.offsetHeight+bedge 
 else 
 vDiv.style.top=vtop 
 vDivHtml.style.width=parseInt(vDiv.style.width) 
 vDiv.style.visibility="visible" 
 } 
 this.add=function(text,js){ 
 combo.options[combo.options.length]=text 
 combo.oj[combo.oj.length]=js 
 } 
 this.clearall=function(){ 
 combo.options=new Array() 
 } 
 this.about=function(){ 
 } 
} 
function mo(obj){ 
obj.style.backgroundColor="#000099" 
obj.style.color="#ffffff" 
} 
function mu(obj){ 
obj.style.backgroundColor="" 
obj.style.color="#000000" 
} 
document.onmousedown=function(){ 
if (vDiv.style.visibility=="visible"){ 
mx=event.x + document.body.scrollLeft 
my=event.y + document.body.scrollTop; 
x1=vDiv.offsetLeft 
y1=vDiv.offsetTop 
x2=vDiv.offsetLeft+vDiv.offsetWidth 
y2=vDiv.offsetTop+vDiv.offsetHeight 
if (mx<x1 || my<y1 || x2<mx || y2<my) 
 { 
 vDiv.style.visibility='hidden' 
 } 
} 
}</script> 
<style> 
.selecttext{ 
border:0px 
height: 16; 
font-family:arial; 
font-size:12px; 
} 
.selectbutton{ 
font-family:webdings; 
font-size:10px; 
height: 19; 
width: 16; 
border:1px solid #83A5EB; 
line-height:0px; 
padding-bottom:3px; 
background-color:#D1E0FD 
} 
.selecttable{ 
font-family:arial; 
font-size:12px; 
cursor:default; 
} 
.selectcontent 
{ 
position: absolute; 
top:0; 
left:0; 
overflow:auto; 
border:1px solid #000000 
} 
.selectdiv 
{ 
position: absolute; 
width:100; 
overflow:hidden; 
} 
.select{ 
border-collapse: collapse; 
border:1px solid #7F9DB9 
} 
</style> 
</head> 
<body bgcolor="#83A5EB"> 
<table border="0" width="100%"> 
 <tr> 
 <td width="151" align="center">可编辑的Select</td> 
 <td><script> 
var sel1=new editselect("select1","25","可编辑的Select",""); 
sel1.add("这是一个可以编辑的Select") 
sel1.add("支持CSS") 
sel1.add("可以通过CSS，修改外形") 
sel1.add("突破原来的Select诸多限制") 
</script></td> 
 </tr> 
 <tr> 
 <td width="151" align="center">长度可以随意修改 
可以设置为只读</td> 
 <td> 
 <script> 
var sel2=new editselect("select2","20","长度可以随意修改",250,82,1); 
sel2.add("这是一个可以编辑的Select") 
sel2.add("支持CSS") 
sel2.add("可以通过CSS，修改外形") 
sel2.add("作者:舜子制作") 
sel2.add("MSN:puterjam@msn.com") 
</script> 
 </td> 
 </tr> 
 <tr> 
 <td width="151" align="center">可以遮盖系统Select</td> 
 <td> 
 <script> 
var sel3=new editselect("select3","25","可以遮盖系统Select","",41); 
sel3.add("这是一个可以编辑的Select") 
sel3.add("支持CSS") 
sel3.add("可以通过CSS，修改外形") 
sel3.add("突破原来的Select诸多限制") 
</script> 
 </td> 
 </tr> 
 <tr> 
 <td width="151" align="right">　</td> 
 <td><select><option>系统的Select</option></select>　</td> 
 </tr> 
</table> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]