替换Select标签的javascript类

最新推荐文章于 2022-07-20 08:58:28 发布

原创最新推荐文章于 2022-07-20 08:58:28 发布 · 446 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #null #opera #fun #safari

Javascript 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一个JavaScript类，用于实现网页中下拉列表的美观展示及交互功能，包括创建自定义样式的下拉列表、响应点击事件以显示或隐藏下拉菜单、处理鼠标悬停效果等。

// 下拉列表类 // PubEdition: Version 1.0.0.0 // ModifyDate: 2009-12-09 9:30:00 // FinishDate: 2009-12-09 9:30:00 // AuthorName: binbin( Mail:pl45@163.com / Tel:13893302154 ) var droplistswap=function(){}; droplistswap.prototype.originalElement=new Array(); // droplistswap.prototype.hidedroplist=function(evt){ // var my = this; // var _event = window.event?window.event:evt; // var obj = _event.toElement?_event.toElement:_event.relatedTarget; // while( obj!=null && obj.id!="droplistElement"){ // obj = obj.parentNode; // } // if(obj==null)document.getElementById("droplistElement").style.display="none"; // } droplistswap.prototype.initialize=function(DropID,index){ var my = this; my.originalElement.push(document.getElementById(DropID)); var selectElement=document.createElement('div'); selectElement.innerHTML="<label>"+document.getElementById(DropID).options[document.getElementById(DropID).selectedIndex].text+"</label>"; //selectElement.style.position="relative"; selectElement.id="selectElement"+index; selectElement.className="droplistswap"; //selectElement.style.width="80px"; selectElement.style.top=document.getElementById(DropID).style.top; selectElement.style.left= document.getElementById(DropID).style.left; document.getElementById(DropID).parentNode.appendChild(selectElement); document.getElementById(DropID).style.display="none"; //function的参数名称不能和类成员的参数名称相同 // my.addEventListener(document,"click",function(event){my.hidedroplist.call(my,event)}); my.addEventListener(selectElement,"click",function(event,p_ID,p_Index){my.handledroplist.call(my,event,DropID,index)}); } droplistswap.prototype.handledroplist=function(evt,DropID,OriIndex) { var my = this; //alert(OriIndex); var _event = window.event?window.event:evt; // if( _event == null ||typeof(_event) == 'undefined'){ // var _fun = my.handledroplist.caller; // _event = _fun.arguments[0]; // } var elementtarget=_event.srcElement?_event.srcElement:_event.target; if(document.getElementById("droplistElement")) { var removenode=document.getElementById("droplistElement"); var parentnode=removenode.parentNode; parentnode.removeChild(removenode); } var droplistElement=document.createElement('div'); droplistElement.id="droplistElement"; droplistElement.style.display="block"; droplistElement.style.position="absolute"; droplistElement.style.zIndex="999"; droplistElement.style.top=my.getObjectPosition(document.getElementById("selectElement"+OriIndex)).y+19+"px"; droplistElement.style.left=my.getObjectPosition(document.getElementById("selectElement"+OriIndex)).x+"px"; droplistElement.style.padding="0px"; droplistElement.style.margin="0px"; droplistElement.style.overflow="hidden"; droplistElement.style.textAlign="left"; var ulElement=document.createElement('ul'); ulElement.style.listStyleType="none"; ulElement.style.padding="0px"; ulElement.style.margin="0px"; ulElement.style.overflow="hidden"; ulElement.style.border="1px solid #20826c"; ulElement.style.overflow="hidden"; for(var i=0;i<document.getElementById(DropID).options.length;i++){ newli=document.createElement('li'); newli.style.borderBottom="1px solid #edf9f8"; newli.style.backgroundColor="#ffffff"; newli.style.lineHeight="180%"; newli.style.paddingLeft="5px"; newli.style.paddingRight="15px"; newli.style.margin="0px"; newli.style.cursor="pointer"; newli.style.display="block"; newli.style.overflow="hidden"; newli.style.width="80px"; newli.innerHTML=document.getElementById(DropID).options[i].text; ulElement.appendChild(newli); my.addEventListener(newli,"click",function(event,p_Index){my.handledropli.call(my,event,OriIndex)}); my.addEventListener(newli,"mouseover",function(event){my.handledropliover.call(my,event)}); my.addEventListener(newli,"mouseout",function(event){my.handledropliout.call(my,event)}); } droplistElement.appendChild(ulElement); document.getElementById(DropID).parentNode.appendChild(droplistElement); my.addEventListener(droplistElement,"mouseout",function(event){my.handledropout.call(my,event)}); } droplistswap.prototype.handledropout=function(evt) { var my = this; var _event = window.event?window.event:evt; // if( _event == null ||typeof(_event) == 'undefined'){ // var _fun = handledropli.caller; // _event = _fun.arguments[0]; // } var elementtarget=_event.srcElement ? _event.srcElement : _event.target; //The question of element that is on the elements var obj = _event.toElement?_event.toElement:_event.relatedTarget; while( obj!=null && obj.id!="droplistElement"){ obj = obj.parentNode; } if(obj==null)document.getElementById("droplistElement").style.display="none"; } droplistswap.prototype.handledropliover=function(evt) { var my = this; var _event = window.event?window.event:evt; var elementtarget=_event.srcElement ? _event.srcElement : _event.target; elementtarget.style.backgroundColor="#edf9f8"; } droplistswap.prototype.handledropliout=function(evt) { var my = this; var _event = window.event?window.event:evt; var elementtarget=_event.srcElement ? _event.srcElement : _event.target; elementtarget.style.backgroundColor="#ffffff"; } droplistswap.prototype.handledropli=function(evt,OriIndex) { var my = this; var _event = window.event?window.event:evt; // if( _event == null ||typeof(_event) == 'undefined'){ // var _fun = handledropli.caller; // _event = _fun.arguments[0]; // } var elementtarget=_event.srcElement ? _event.srcElement : _event.target; var newelement=document.createElement("label"); newelement.innerHTML=elementtarget.innerHTML; document.getElementById("selectElement"+OriIndex).innerHTML=""; document.getElementById("selectElement"+OriIndex).appendChild(newelement); document.getElementById("droplistElement").style.display="none"; for (var i=0;i<my.originalElement[OriIndex].options.length ;i++ ) { if (document.getElementById("selectElement"+OriIndex).innerHTML.indexOf(my.originalElement[OriIndex].options[i].text)!=-1) { document.getElementById(my.originalElement[OriIndex].id).selectedIndex =i; } } //setTimeout('__doPostBack(/''+my.originalElement[OriIndex].id+'/',/'/')', 0); //alert(document.getElementById(my.originalElement[OriIndex].id).selectedIndex); } droplistswap.prototype.addEventListener=function(element,type,func) { if(element.addEventListener){element.addEventListener(type,func,false);} else{element.attachEvent("on"+type,func);} } // Event Bubbling droplistswap.prototype.stopBubble=function(e) { if (e && e.stopPropagation) {e.stopPropagation();} else {e.cancelBubble = true;} } droplistswap.prototype.getObjectPosition=function(obj) { var ua = navigator.userAgent.toLowerCase(); var isOpera = (ua.indexOf('opera') != -1); var isIE = (ua.indexOf('msie') != -1 && !isOpera); var el=typeof obj==='string'?getElement(obj):obj; if(el.parentNode === null || el.style.display == 'none') { return false; } var parent = null; var pos = []; var box; if(el.getBoundingClientRect) //IE { box = el.getBoundingClientRect(); var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop); var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft); if(ua.indexOf('msie 6') != -1||ua.indexOf('msie 7') != -1) { scrollLeft=scrollLeft-2; } return {x:box.left + scrollLeft, y:box.top + scrollTop}; } else if(document.getBoxObjectFor) { box = document.getBoxObjectFor(el); var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0; var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0; pos = [box.x - borderLeft, box.y - borderTop]; } else { pos = [el.offsetLeft, el.offsetTop]; parent = el.offsetParent; while (parent) { pos[0] += parent.offsetLeft; pos[1] += parent.offsetTop; parent = parent.offsetParent; } if (ua.indexOf('opera') != -1 || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' )) { pos[0] -= document.body.offsetLeft; pos[1] -= document.body.offsetTop; } } if (el.parentNode) { parent = el.parentNode; } else { parent = null; } while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') { pos[0] -= parent.scrollLeft; pos[1] -= parent.scrollTop; if (parent.parentNode) { parent = parent.parentNode; } else { parent = null; } } return {x:pos[0], y:pos[1]}; }