用javascript和css模拟select的脚本- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用javascript和css模拟select的脚本

技术文章搜索

关键字

Javascript 中的用javascript和css模拟select的脚本

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

收藏到网摘: n/a

javascript解析xml字符串的函数 javascript操作select参考代码

传统的select控件比较难看，用css美化也达不到好的效果，而javascript和css结合起来，用div等元素模拟一个select达到想要的效果就很容易了。

点击运行可以看到效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>模拟 美化 select_软晨学习网</title>
<script type="text/javascript">
var zQuery=function(ele,tagName,className){ //核心对象 if ( window == this ) return new zQuery(ele,tagName,className); if(!arr){var arr=new Array;} if(ele){ if(ele.constructor!=zQuery){ var elem=typeof(ele)=="object"?ele:document.getElementById(ele); if(!tagName){ arr.push(elem); }else{ var tags=elem.all&&!window.opera?tagName=="*"?elem.all:elem.all.tags(tagName):elem.getElementsByTagName(tagName); if(!className){ for(var i=0, l=tags.length; i<l; i++){ arr.push(tags[i]); } }else{ var reClassName=RegExp("(^|\\s+)"+className+"($|\\s+)"); for(var i=0, l=tags.length; i<l; i++){ if(reClassName.test(tags[i].className)){ arr.push(tags[i]); } } } } }else{ for(var i=0, l=ele.length; i<l; i++){ arr=arr.concat(Array.prototype.slice.call(zQuery(ele[i],tagName,className))); } } } return this.setArray(arr); //借鉴jQuery方法，这里返回zQuery对象原型（一个DOM集合对象），不再是返回单纯的DOM数组对象
}
zQuery.prototype.setArray = function( arr ) { this.length = 0; Array.prototype.push.apply( this, arr ); //这里的概念非常重要，zQuery方法对象执行了Array原型的push()方法 return this;
}
zQuery.fn=zQuery.prototype;
var $=zQuery;
//取select的绝对位置、高、宽
function Offset(obj){ var t = obj.offsetTop; var l = obj.offsetLeft; var w = obj.offsetWidth; var h = obj.offsetHeight-2; //var h=obj.style.height; while(obj=obj.offsetParent) { t+=obj.offsetTop; l+=obj.offsetLeft; } return { top : t, left : l, width : w, height : h }
}
//模拟select
function instSelect(obj){ var offSet=Offset(obj); obj.style.display="none"; var sDiv=document.createElement("div"); sDiv.id="div"+obj.name; sDiv.className="divSlt"; sDiv.style.width=offSet.width+"px"; //sDiv.style.height=offSet.height+"px"; sDiv.style.left=offSet.left+"px"; sDiv.style.top=offSet.top+"px"; document.body.appendChild(sDiv); var sSpan=document.createElement("span"); var spanId=obj.options[obj.selectedIndex].value; var spanText=obj.options[obj.selectedIndex].text; sSpan.id=spanId; sSpan.style.lineHeight=offSet.height+"px"; sTxt=document.createTextNode(spanText); sSpan.appendChild(sTxt); sDiv.appendChild(sSpan); sSpan.onclick=function(){ if($("div"+obj.name,"ul").length==0){ var sUl=document.createElement("ul"); sDiv.appendChild(sUl); var optLen=obj.options.length; var tmp=document.createDocumentFragment(); for(var j=0;j<optLen;j++){ var sltVal=obj.options[j].value; var sltTxt=obj.options[j].text; var sLi=document.createElement("li"); sLi.id=sltVal; sLi.appendChild(document.createTextNode(sltTxt)); sLi.onmouseover=function(){ this.style.background="#cccccc"; this.style.color="white"; } sLi.onmouseout=function(){ this.style.background="white"; this.style.color="black"; } sLi.onclick=function(){ sSpan.innerHTML=this.innerHTML; obj.value=this.id; sUl.style.display="none"; } tmp.appendChild(sLi); } sUl.appendChild(tmp); if(optLen>3){ sUl.style.overflowY="scroll"; sUl.style.height="100px"; } } else{ if($("div"+obj.name,"ul")[0].style.display=="none") $("div"+obj.name,"ul")[0].style.display="block"; else $("div"+obj.name,"ul")[0].style.display="none"; } }
}
//取得slect的个数，并且对每个select执行函数
function initSelect(){ var slt=$(document,"select"); var sltLen=slt.length; for(var i=0;i<sltLen;i++){ instSelect(slt[i]); }
}
window.onload=initSelect;
document.onclick=function(){ var evt=getEvent(); var element=evt.srcElement || evt.target; var s=$(document,"select"); if((element.parentNode.parentNode==null||element.parentNode.parentNode.className!="divSlt")&&element.nodeName!="SPAN"){ for (var i=0; i<s.length; i++) { if(!$("div" + s[i].name,"ul")[0]) continue; $("div" + s[i].name,"ul")[0].style.display="none"; } }
}
function getEvent(){ //同时兼容ie和ff的写法 if(document.all) return window.event; func=getEvent.caller; while(func!=null){ var arg0=func.arguments[0]; if(arg0){ if((arg0.constructor==Event || arg0.constructor ==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){ return arg0; } } func=func.caller; } return null;
}
</script>
<style type="text/css">
select{
height:20px;
width:150px;
}
.divSlt{
position:absolute;
font-size:12px;
}
.divSlt span{
display:block;
width:100%;
border:1px solid #999999;
background:url(down.gif) no-repeat right center;
text-indent:6px;
cursor:pointer;
}
.divSlt ul{
display:block;
background-color:#FFFFFF;
width:100%;
border:1px solid #999999;
border-top:0px;
margin:0px;
padding:0px;
list-style:none;
}
.divSlt ul li{
text-indent:5px;
height:20px;
line-height:20px;
cursor:pointer;
}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="rq.asp"><table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="200" height="30"> </td> <td width="200" height="30"> </td> <td width="200" height="30"> </td> </tr> <tr> <td width="200" height="30"> </td> <td width="200" height="30"> </td> <td width="200" height="30"><select name="slt1" id="slt1"> <option value="选项一" selected="selected">选项一</option> <option value="选项二">选项二</option> <option value="选项三">选项三</option> <option value="选项四">选项四</option> <option value="选项五">选项五</option> <option value="选项六">选项六</option> <option value="选项七">选项七</option> </select></td> </tr> <tr> <td width="200" height="30"> </td> <td width="200" height="30"><select name="slt2" id="slt2"> <option value="选项一" selected="selected">选项一</option> <option value="选项二">选项二</option> <option value="选项三">选项三</option> </select></td> <td width="200" height="30"> </td> </tr> <tr> <td width="200" height="30"> </td> <td width="200" height="30"><input type="submit" name="Submit" value="提交" /></td> <td width="200" height="30"> </td> </tr>
</table>
</form>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

javascript解析xml字符串的函数 javascript操作select参考代码

Javascript 中的 用javascript和css模拟select的脚本

评论 (0) All

Javascript 中的用javascript和css模拟select的脚本