网页制作技术CSS之DIV长度相等的几个办法
JS实现无刷新联动菜单（select）的方法
[此文来源于互联网，牛C网只负责收集整理]
由于系统自带的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 >>webjx.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=selectcontentvDivHtml=selecthtmlfunction 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.scrollLeftmy=event.y document.body.scrollTop;x1=vDiv.offsetLefty1=vDiv.offsetTopx2=vDiv.offsetLeft vDiv.offsetWidthy2=vDiv.offsetTop vDiv.offsetHeightif (mx<x1 || my<y1 || x2<mx || y2<my) { vDiv.style.visibility='hidden' }}}</script><style>.selecttext{border:0pxheight: 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>
作者：gdgzboy@牛C网
地址：http://www.niuc.net/post/2696/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明！
牛C网推荐您再看看以下日志：
HTML表格标记教程(38) - 表头的边框色属性BORDERCOLOR
Javascript强制设为首页的网页代码
网页制作-JavaScript仿Windows关机效果
JS的IE和Firefox兼容性汇编
制作网页技巧-通过JavaScript实现页面自适应
小知识-JavaScript中substr和substring的区别
XML实现多渠道接入网站
CSS 争夺选择符控制权
Javascript实现动画导航
CSS 定义li样式
HTML表格标记教程(38) - 表头的边框色属性BORDERCOLOR
Javascript强制设为首页的网页代码
网页制作-JavaScript仿Windows关机效果
JS的IE和Firefox兼容性汇编
制作网页技巧-通过JavaScript实现页面自适应
小知识-JavaScript中substr和substring的区别
XML实现多渠道接入网站
CSS 争夺选择符控制权
Javascript实现动画导航
CSS 定义li样式
