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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 打造个性化的Select(可编辑)

Javascript: 自己开发Dojo的建议框架; js每次Title显示不同的名言; 不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术; 无限级别的菜单（侧拉菜单）; 点选TOP后并不是直接跳到页顶的，而是滚动上去; js下拉菜单中自动信息轮换播放; 英文首字母全大写的js实现脚本; 实例区别onClick和onDBClick两事件方法; 改变文本框字体颜色的js脚本; js星空效果代码; 判断li是否有样式的js代码; 文本框点击时文字消失，失去焦点时文字出现; 如何让一个层关闭之后，就算刷新页面了也不显示。除非关闭页面再次打开; 右下角弹出窗口效果代码; JS控制对象移动效果; 验证用户是否修改过页面的数据的实现方法; Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]; 正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度; EXT富客户端后台管理系统初步代码; 不同浏览器javascript变量作用域的处理方法

No. « ‹ 110 111 112 113 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 331 ::

收藏到网摘: n/a

一个很Cool的JS菜单效果真正的连续滚动图片

由于系统自带的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"><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 全选提示:你可先修改部分代码,再按运行]

一个很Cool的JS菜单效果真正的连续滚动图片

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

评论 (0) All

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