分享
 
 
 

用JavaScript美化select样式

王朝html/css/js·作者佚名  2006-07-21
窄屏简体版  字體: |||超大  

原文出处:http://www.nbb.cc/78/2006/05/javascriptselect_1.html

如图 代码来自yahoo

上网查找很多表单中 select 美化的代码,都没有合适的,偶尔有也不是很舒服只能在IE里面正常显示。看到 yahoo 上的代码在 FireFox下面也能正常显示,而且非常漂亮,所以花了点时间把它Copy下来呵呵,给大家分享。

代码实现原理用隐藏的input来代替select,然后用另外一个只读input来显示select的框,用图片来表示下拉箭头,用层来显示下拉列表,用javascript把下拉列表里面a的name的值赋给隐藏的input和只读的input,最终实现虚拟select的效果。

这样做不但多种浏览器支持,而且很方便对外观做美化,列表里面自由灵活的布局。

代码如下:

1.<link href="Css/Select.css" rel="stylesheet" type="text/css" /> Css样式表对我们虚拟出来的Select做美化

2.<script language="JavaScript" type="text/javascript" src="Js/Select.js"></script> 实现功能的主要JS

3.HTML代码以及如何调用

<form action="xyz.asp" method="post" name="add_composition" id="add_composition">

<div class="selectControl">

<input name="dengji" type="hidden" value="" />

<input name="dengji_c" size="5" value="请选择" readonly="readonly" />

</div>

<div class="selectControlOption" id="list_dengji" style="width:50px;height:150px;">

<table width="100%" align="center" border="0" cellspacing="5" cellpadding="0">

<tr><td><a href="#" name="" selected>请选择</a></td></tr>

<tr><td><a href="#" name="1">第一集</a></td></tr>

<tr><td><a href="#" name="2">第二集</a></td></tr>

<tr><td><a href="#" name="3">第三集</a></td></tr>

<tr><td><a href="#" name="4">第四集</a></td></tr>

<tr><td><a href="#" name="5">第五集</a></td></tr>

</table>

</div>

<script>

var e_dengji = new htmlElementSelect('add_composition', 'dengji_c', 'dengji', 'list_dengji');

</script>

</form>

以下是Select.css代码(点击下载):

/* CSS Document */

.selectControlOption{display:none;}

.selectDownList a:link,.selectDownList a:visited{font-size:12px;display:block;width:100%;text-decoration:none;color:#000;}

.selectDownList a:hover,.selectDownList a:active{

font-size:12px;

display:block;

width:100%;

text-decoration:none;

color:#fff;

background-color: #6699FF;

}

.selectControlBtn,.selectBtnover,.selectBtnclick{cursor:pointer;_cursor /* */:hand;}

.selectControlBtn{position:absolute;width:16px;height:20px;overflow:hidden;background:url(../Img/Select_btn.gif) no-repeat;top:0;_top:1px;}

.selectControl{position:relative;}

.clsInput{border:1px solid #2f6bc1 !important;font-size:12px !important;padding:.2em .1em .15em .1em; _height /* */:20px;}

.selectBtnover{background:url(../Img/Select_btnover.gif) no-repeat;}

.selectBtnclick{background:url(../Img/Select_btnclk.gif) no-repeat;}

.selectDownList{

position:absolute;

overflow:auto;

background:#fff;

z-index:100;

border: 1px solid #99CCFF;

}

.selectCurStatus {color:#ff0000;}

以下是Select.js代码(点击下载):

[code]var htmlElementSelectManager={lastSelectElement:null,lastSelectIframeElement:null};function htmlElementSelect(frmName,inpName,valName,lstId){this.init(frmName,inpName,valName,lstId);}

htmlElementSelect.prototype.version="0.1.2";htmlElementSelect.prototype.parentForm=null;htmlElementSelect.prototype.self=null;htmlElementSelect.prototype.saveValue=null;htmlElementSelect.prototype.selectButton=null;htmlElementSelect.prototype.listContent=null;htmlElementSelect.prototype.dropDownList="";htmlElementSelect.prototype.relationControl=null;htmlElementSelect.prototype.init=function(frmName,inpName,valName,lstId){var that=this;if(!document.forms[frmName]||!document.forms[frmName].elements[inpName]||!document.forms[frmName].elements[valName]||!document.getElementById(lstId))return false;this.listContent=document.getElementById(lstId);this.parentForm=document.forms[frmName];this.self=document.forms[frmName].elements[inpName];this.saveValue=document.forms[frmName].elements[valName];var divp=this.self.parentNode;if(!divp)return false;this.self.className="clsInput";divp.style.width=this.self.offsetWidth+"px";divp.style.height=this.self.offsetHeight+"px";var downBtn=document.createElement("div");downBtn.className='selectControlBtn';downBtn.style.right="-15px";divp.appendChild(downBtn);this.selectButton=downBtn;var lstdiv=document.createElement("div");lstdiv.className="selectDownList";lstdiv.id=frmName+"_"+inpName+"_downlistId";lstdiv.style.display="none";this.dropDownList=lstdiv.id;divp.appendChild(lstdiv);var lstifrm=document.createElement("iframe");lstifrm.id=lstdiv.id+"_ifrm";lstifrm.zIndex=parseInt(lstdiv.style.zIndex)-1;lstifrm.style.display="none";lstifrm.frameBorder=0;lstifrm.style.position="absolute";lstifrm.style.filter="alpha(opacity:0)";lstifrm.style.background="transparent";lstifrm.scrolling="no";divp.appendChild(lstifrm);downBtn.onmouseover=function(){that.handleOverBtn(that);}

downBtn.onmouseup=function(){that.handleOverBtn(that);}

downBtn.onmouseout=function(e){that.handleOutBtn(that,e);}

downBtn.onmousedown=function(){that.handleClickBtn(that);}

this.self.onclick=downBtn.onmousedown;this.self.onmouseout=downBtn.onmouseout;this.self.onmouseover=downBtn.onmouseover;downBtn=null;};htmlElementSelect.prototype.handleOverBtn=function(o){o.selectButton.className="selectControlBtn selectBtnover";};htmlElementSelect.prototype.handleOutBtn=function(o,e){o.selectButton.className="selectControlBtn";};htmlElementSelect.prototype.handleClickBtn=function(o){var downlstfrm=document.getElementById(o.dropDownList+"_ifrm");var downlst=document.getElementById(o.dropDownList);var selectmgr=htmlElementSelectManager;if(selectmgr.lastSelectElement!=null&&selectmgr.lastSelectElement!=downlst){selectmgr.lastSelectElement.style.display="none";selectmgr.lastSelectIframeElement.style.display="none";}

selectmgr.lastSelectElement=downlst;selectmgr.lastSelectIframeElement=downlstfrm;downlst.parentNode.style.zIndex=100;o.selectButton.className="selectControlBtn selectBtnclick";downlst.style.width=(o.listContent.style.width==""||parseInt(o.listContent.style.width.replace("px",""))<o.self.offsetWidth+15)?(o.self.offsetWidth+15)+"px":o.listContent.style.width;downlst.style.height=(o.listContent.style.height=="")?"200px":o.listContent.style.height;if(o.listContent.innerHTML==""){downlst.style.height="20px";downlst.style.width=(o.self.offsetWidth+18)+"px"}

downlstfrm.style.width=downlst.style.width;downlstfrm.style.height=downlst.style.height;var direc=o.showDirection(o,[downlst.style.width.replace("px",""),downlst.style.height.replace("px",""),o.self.parentNode.offsetLeft,o.self.parentNode.offsetTop,o.self.offsetHeight]);if(direc[0]=='left'){downlst.style.left=0;downlstfrm.style.left=0;}else if(direc[0]=='right'){downlst.style.right="-16px";downlstfrm.style.right="-16px";}

if(direc[1]=='down'){downlst.style.top=o.self.offsetHeight+"px";downlstfrm.style.top=o.self.offsetHeight+"px";}else if(direc[1]=='up'){downlst.style.top="-"+(parseInt(downlst.style.height.replace("px",""))-1)+"px";downlstfrm.style.top="-"+(parseInt(downlst.style.height.replace("px",""))-1)+"px";}

downlst.style.display=(downlst.style.display=="block")?"none":"block";downlstfrm.style.display=downlst.style.display;downlst.innerHTML=o.listContent.innerHTML;if(downlst.style.display=="block"){var itms=downlst.getElementsByTagName("a");for(var i=0;i<itms.length;i++){itms[i].onclick=function(){o.handleSetValue(o,this);downlst.style.display="none";o.changeListContentState(o,this.name);downlstfrm.style.display="none";return false;}}

itms=null;var mout=function(e){o.selectButton.className="selectControlBtn";if(!e)var e=window.event;if(e.relatedTarget){var relTarget=e.relatedTarget;}else{var relTarget=e.toElement;}

if(!relTarget)return;try{if(relTarget.tagName.toLowerCase()=="html"||relTarget.tagName.toLowerCase()=="body"){downlst.style.display="none";downlstfrm.style.display="none";downlst.parentNode.style.zIndex=0;}else if(o.isInTarget(relTarget,o.dropDownList)){downlst.style.display="block";downlstfrm.style.display="block";downlst.parentNode.style.zIndex=100;}else if(relTarget.tagName.toLowerCase()=="a"&&relTarget.name!=""){downlst.style.display="block";downlstfrm.style.display="block";downlst.parentNode.style.zIndex=100;}else if(relTarget.className!="clsInput"&&relTarget.className!="selectDownList"&&relTarget.className!="selectControlBtn"){downlst.style.display="none";downlstfrm.style.display="none";downlst.parentNode.style.zIndex=0;}}catch(err){}};o.selectButton.onmouseout=mout;o.self.onmouseout=mout;document.onclick=function(e){var e=(e)?e:window.event;var el=(e.target)?((e.target.nodeValue==3)?e.target.parentNode:e.target):e.srcElement;if(!o.isInTarget(el,o.dropDownList)&&el!=o.selectButton&&el!=o.self){downlst.style.display="none";downlstfrm.style.display="none";downlst.parentNode.style.zIndex=0;document.onclick=null;}};}};htmlElementSelect.prototype.isInTarget=function(targo,id){var el=targo;if(!el)return false;while(el==null||el.tagName.toLowerCase()!="body"){if(el.id==id){return true;}

if(!el.parentNode)return false;el=el.parentNode;}};htmlElementSelect.prototype.showDirection=function(o,dimArry){var dlstW=(o.listContent.style.width==""||parseInt(o.listContent.style.width.replace("px",""))<o.self.offsetWidth+15)?o.self.offsetWidth+15:parseInt(o.listContent.style.width.replace("px",""));var dlstH=(o.listContent.style.height=="")?200:parseInt(o.listContent.style.height.replace("px",""));if(typeof(window.innerHeight)=='number'){var wH=window.innerHeight;var wW=window.innerWidth;}else if(document.documentElement&&document.documentElement.clientHeight){var wH=document.documentElement.clientHeight;var wW=document.documentElement.clientWidth;}else{var wH=document.body.clientHeight;var wW=document.body.clientWidth;}

var sY=0;if(document.documentElement&&document.documentElement.scrollTop){sY=document.documentElement.scrollTop;}else if(document.body&&document.body.scrollTop){sY=document.body.scrollTop;}else if(window.pageYOffset){sY=window.pageYoffset;}else if(window.scrollY){sY=window.scrollY;}

if(dimArry[0]>dimArry[2]&&(dimArry[3]-sY)+dimArry[4]+dlstH>wH){return['left','up'];}else if(dimArry[0]<=dimArry[2]&&(dimArry[3]-sY)+dimArry[4]+dlstH>=wH){return['right','up'];}else if(dimArry[0]<=dimArry[2]&&(dimArry[3]-sY)+dimArry[4]+dlstH<wH){return['right','down'];}else{return['left','down'];}};htmlElementSelect.prototype.changeListContentState=function(o,elnm){if(!elnm||elnm=='')return;var itms_c=o.listContent.getElementsByTagName("a");for(var j=0;j<itms_c.length;j++){if(elnm==itms_c[j].name){itms_c[j].style.backgroundColor="#0000be";itms_c[j].style.color="#ffffff";}else{itms_c[j].style.backgroundColor="";itms_c[j].style.color="";}}};htmlElementSelect.prototype.handleSetValue=function(o,itm){setSelectItemValue(o,itm);};htmlElementSelect.prototype.setRelationControl=function(o,relo){o.relationControl=relo;}

function setSelectItemValue(o, itm){

o.saveValue.value = itm.name;

o.self.value = itm.innerHTML;

}[/code]

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有