页面导航：首页 → 网络编程 → JavaScript → 表单特效 → 正文内容

打造个性化的Select(可编辑)

发布：dxy 字体：[增加减小] 类型：转载

由于系统自带的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

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>

.selectdiv 
{ 
position: absolute;  
width:100; 
overflow:hidden; 
} 
.select{ 
border-collapse: collapse; 
border:1px solid #7F9DB9 
} 
</style> 
</head>

<table border="0" width="100%"> 
    <tr> 
        <td width="151" align="center"><font size="2">可编辑的Select</font></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"><font size="2">长度可以随意修改
可以设置为只读</font></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"><font size="2">可以遮盖系统Select</font></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 全选提示:你可先修改部分代码,再按运行]

Tags：打造个性化的Select(可编辑)