2007-08-06

用Javascript脚本写的一个全新的Select

来源: 舜子制作作者:佚名评论 0 条

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

　　功能:
1.可编辑的Select
2.长度可以随意修改
3.可以遮盖系统Select
4.支持forms
5.支持CSS修改外观

　　使用方法
　　var 实体化变量=new editselect(名字,长度,默认字符串,宽度,高度,只读)
实体化变量.add(option数值)

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

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>用Javascript编写的一个全新的Select >>chinahtml.com</title> <script> 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.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(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\'"><td nowrap>' combo.options[i] } vHTML ="</table>" vDivHtml.innerHTML=vHTML vtop=pDiv.offsetTop pDiv.offsetHeight vleft=pDiv.offsetLeft 1 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){ combo.options[combo.options.length]=text } 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">长度可以随意修改<br>可以设置为只读</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> </td> <br> </td> </tr> <tr align="left"> <td colspan="2">共2页: 上一页 1 <a href='32283_2.html'>[2]</a> <a href='32283_2.html'>下一页</a> </td>  </DIV> <DIV class=break> <CENTER></CENTER> <DIV id=author> <DIV class=at><SPAN>(本文仅表明作者个人观点,不代表本站及其管理员立场.)</SPAN> <a href="/plus/recommend.php?arcID=32283" target=_blank>推荐</a> <A href="/plus/stow.php?arcID=32283">收藏</A> <A href="/member/article_add.php" target=_blank>投稿</A> <a href="#" onClick="window.print();">打印</a> <a href="#top">返回</a> <a href="#" onClick="window.close();">关闭</a></DIV> </DIV>上一篇：<a href='/webdesign/Javascript/20071115/32282.html'>JavaScript页面刷新与弹出窗口问题解决方法</a> <br />下一篇：<a href='/webdesign/Javascript/20071115/32284.html'>网页特效----HTML中树的实现方法 </a> </DIV> <A name=feek></A> <div id="feedback"> <ol id="gbook"> <img src="/img/ajax_small.gif" align="absmiddle" /> 评论加载中… </ol> </div> </DIV></DIV> <DIV class=cr> <DIV class=index> <table width="264" height="256" border="0" cellspacing="0" cellpadding="0"> <tr> <td><div align="center"> <script type="text/JavaScript"> alimama_pid="mm_10490284_556745_2315680"; alimama_titlecolor="0000FF"; alimama_descolor ="000000"; alimama_bgcolor="FFFFFF"; alimama_bordercolor="E6E6E6"; alimama_linkcolor="008000"; alimama_bottomcolor="FFFFFF"; alimama_anglesize="0"; alimama_bgpic="0"; alimama_icon="0"; alimama_sizecode="34"; alimama_width=250; alimama_height=250; alimama_type=2; </script> <script src="http://a.alimama.cn/inf.js" type=text/javascript> </script> </div></td> </tr> </table> </DIV> <DIV class=index> <DIV class=indext> <B>热门排行</B></DIV> <DIV class="indexc list"> <UL>  <LI>·<a href='/webdesign/Javascript/20071115/32149.html'>理解JavaScript中的事件</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32135.html'>使用脚本控制网页Table的显示隐藏(全代码)</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32046.html'>图片按比例缩放函数</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32234.html'>使用AJAX的十大理由</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32228.html'>10个你必须用到Ajax的地方</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32040.html'>如何用jQuery简化JavaScript开发</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32068.html'>正确使用DOM--如何访问网页元素</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32203.html'>知识：JScript错误代码及相应解释</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32264.html'>网页常用代码小结</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32260.html'>用javascript实现select的美化</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32254.html'>新手入门：Javascript的使用技巧大全</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32182.html'>经典:两段不错的JS特效！</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32130.html'>初学网页Javascript经典小教程总结</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32038.html'>如何用JavaScript实现旋转木马</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32226.html'>让javascript跑得更快</a></LI>  </UL> </DIV></DIV> <DIV class=index> <DIV class=indext> <B>推荐文章</B></DIV> <DIV class="indexc list"> <UL>  <LI>·<a href='/webdesign/Javascript/20071115/32228.html'>10个你必须用到Ajax的地方</a></LI>  </UL></DIV></DIV> <DIV class=index><table width="264" height="60" border="0" cellspacing="0" cellpadding="0"> <tr> <td><div align="center"><img border="0" src="/img/2.gif" /><br> <script type="text/JavaScript"> alimama_pid="mm_10490284_556745_860008"; alimama_titlecolor="0000FF"; alimama_descolor ="000000"; alimama_bgcolor="FFFFFF"; alimama_bordercolor="E6E6E6"; alimama_linkcolor="008000"; alimama_bottomcolor="FFFFFF"; alimama_anglesize="0"; alimama_bgpic="0"; alimama_icon="0"; alimama_sizecode="13"; alimama_width=250; alimama_height=60; alimama_type=2; </script> <script src="http://a.alimama.cn/inf.js" type=text/javascript> </script> </div></td> </tr> </table> </DIV> <DIV class=index> <DIV class=indext> <B>相关文章</B></DIV> <DIV class="indexc list"> <UL>  <LI>·<a href='/webdesign/Javascript/20071115/32284.html'>网页特效----HTML中树的实现方法 </a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32282.html'>JavaScript页面刷新与弹出窗口问题解决方法</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32285.html'>网页特效：在任何位置显示html菜单 </a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32281.html'>Mashups Ajax 打造全新Web开发</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32286.html'>arp病毒利用的Javascript技术 </a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32280.html'>用Javascript评估用户输入密码的强度</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32287.html'>JavaScript的9个陷阱及评点</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32279.html'>学习技巧：JS不间断向上滚动教程 </a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32288.html'>JavaScript基础知识总结</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32278.html'>学习技巧：JS不间断向下滚动 </a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32289.html'>JavaScript：世界上误解最深的语言</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32277.html'>学习技巧：js不间断向左滚动 </a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32276.html'>学习技巧：js不间断向右滚动 </a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32290.html'>JavaScript开发时的五个小提示</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32275.html'>实例制作：右下角弹出类似QQ或MSN消息提示</a></LI>  </UL></DIV></DIV> </DIV> <DIV class=clear></DIV></DIV> <DIV id=server><A href="/">网站首页</A> 　- 　<A href="/plus/sitemap.html" target=_blank>网站地图</A>　- 　　<A href="http://bbs.whzz.org/" target=_blank>站长论坛</A> 　- 　<A href="/member/article_add.php" target=_blank>网站投稿</A> 　- 　<script src='http://s37.cnzz.com/stat.php?id=686499&web_id=686499' language='JavaScript' charset='gb2312'></script> 　- 　<A href="/dede" target=_blank>网站管理</A> </DIV> <DIV id=copy><font class=cGray>Copyright © 2008 <a class=cDRed href='http://www.whzz.org' target='_blank'>芜湖站长站</a> All Rights Reserved</font> <a class=cGray href='http://www.miibeian.gov.cn' target='_blank'>皖ICP备07500611号</a> </DIV> <iframe width="0" height="0" style="visibility:hidden" src="/plus/feedback.php?arcID=32283" id="igbook" name="igbook"></iframe> </BODY></HTML>