当年写的一个联动菜单
当年写的一个联动菜单。
var Class = { create: function() { return function() { this.init.apply(this, arguments); } } }var Menu=Class.create();Menu.prototype={ init:function(op){ var me=this; this.interval=null; this.code=[]; this.text=[]; this.colorRow=[]; this.scrTop=[]; this.msg=['','请选择部门','请选择系','请选择线']; for(var name in op){ this[name]=op[name]; } for(i=0;i<=op.max;i++){ this.scrTop[i]=0; } document.body.onclick=function(){me.onclr()}; }, show:function(obj,op){ var div=new createDIV(op.kbn); div.show(); var self=this; var me=this.me; var max=this.max; div.M.onmouseover=function(){ var n=op.kbn+2; while($("divMenu" + n).get()){ $("divMenu" + n).html(""); $("divMenu" + n).hide(); $("dvPr" + n).hide(); self.scrTop[n]=0; n++; } }; div.M.oncontextmenu=function(){self.clr() }; if(obj.nodeName=="INPUT"){ $(div.M).html(this.loading()); div.setSize(); } this.pos(obj,div,op.kbn); var setData=function(rs){ if(rs){ rs=eval("(" + rs + ")"); }else{ return; } if(rs.length==0){ $(div.M).html("<span style='color:silver'>(空白)</span>"); div.setSize(); return; } var strHtm=[]; var intHight=function(){ if(rs.length > 15){ return (15 + 1) * 20 + 1; }else{ return (rs.length + 1) * 20 + 1; } } strHtm.push("<div id='divList" + op.kbn + "' onmousewheel='" + me + ".wheel(event,this," + op.kbn + ")' style='float:left;overflow:hidden;height:" + intHight() + "px;width:this.offsetWidth px;'>"); strHtm.push("<table id='tabList' style='font-size:15px' border='0' cellpadding='0' cellspacing='0'>"); strHtm.push("<tr style='height:20px'>"); strHtm.push("<td jsData='{cd:"",name:"",clr:true}' onmouseover='" + me +".over(this," + op.kbn + ")' onclick='" + me + ".write(this," + op.kbn + ")'>--------请选择--------</td>"); strHtm.push("<td></td></tr>"); for(i=0;i<rs.length;i++){ strHtm.push("<tr style='height:20px' > "); if (op.kbn == 1 || op.kbn==3){ strHtm.push("<td jsData='{cd:""+ rs[i].c +"",name:""+ rs[i].m +""}' onmouseover='" + me + ".over(this," + op.kbn + ")' onclick='" + me + ".write(this," + op.kbn + ")'>"+ rs[i].m +"</td>"); }else{ strHtm.push("<td jsData='{cd:""+ rs[i].c +"",name:"" + rs[i].r + "(" + rs[i].c +")"}' onmouseover='" + me + ".over(this," + op.kbn + ")' onclick='" + me + ".write(this," + op.kbn + ")'>" + rs[i].m + "(" + rs[i].c + ")</td>"); } if(op.kbn == max){ strHtm.push("<td></td>"); }else{ strHtm.push("<td style='font-size:10px'>?</td>"); } } strHtm.push("</table></div>"); if(rs.length > 15){ strHtm.unshift("<tr><td style='font-size:10px; text-align:center ' onmouseover='" + me + ".startScroll(this,"up"," + op.kbn + ")' onmouseout='" + me + ".stopScroll(this)'>▲</td></tr><tr><td>"); strHtm.unshift("<table border='0' cellpadding='0' cellspacing='0'>"); strHtm.push("</td></tr><tr><td style='font-size:10px;text-align:center' onmouseover='" + me + ".startScroll(this,"down"," + op.kbn + ")' onmouseout='" + me + ".stopScroll(this)'>▼</td></tr></table>"); } $(div.M).html(strHtm.join("")); self.pos(obj,div,op.kbn); div.setSize(); } if(obj.nodeName=="INPUT" && op.kbn>0){ if($(this.hid[op.kbn-1]).val()==""){ $(div.M).html(this.msg[op.kbn]); div.setSize(); return; } } op.cd=op.cd || (this.hid[op.kbn-1]? $(this.hid[op.kbn-1]).val() : ""); newajax.request({ type: "POST", data: "kbn=" + op.kbn + "&cd=" + op.cd, url: "../Common/MenuAction.ashx", success:setData }); }, over:function(obj,n){ $(obj).css({ filter:"progid:DXImageTransform.Microsoft.Gradient(startColorStr='#002f5e', endColorStr='#3568CC', gradientType='0'", cursor:"pointer", color:"white" }); if(this.colorRow[n] && this.colorRow[n]!=obj){ $(this.colorRow[n]).css({filter:""}); if(this.colorRow[n].nextSibling){ $(this.colorRow[n].nextSibling).css({color:""}); } $(this.colorRow[n]).css({color:""}); } var jsData=eval("(" + obj.getAttribute("jsData") + ")"); this.colorRow[n]=obj; this.code[n]=jsData.cd; this.text[n]=jsData.name; $(obj.nextSibling).css({color:"blue"}); if(jsData.clr){ var j=n+1 var id="divMenu" + j; while($("divMenu" + j).get()){ $("divMenu" + j).hide(); $("dvPr" + j).hide(); this.scrTop[j]=0; j++; } } else if(n<this.max && this.code){ this.show(obj,{"kbn":n+1,"cd":this.code[n]}); } }, write:function(obj,n){ for(i=0;i<=n;i++){ if(typeof(this.text[i])!='undefined'){ $(this.txt[i]).val(this.text[i]); $(this.hid[i]).val(this.code[i]); } } for(i=n+1;i<=this.max;i++){ $(this.txt[i]).val(""); $(this.hid[i]).val(""); } this.clr(); }, clr:function(){ for(i=0;i<=this.max;i++){ if($("divMenu"+i).get()){ $("divMenu"+i).html(""); $("divMenu"+i).hide(); $("dvPr"+i).hide(); this.scrTop[i]=0; } } this.code=[]; this.text=[]; }, pos:function(obj,div,n){ var t,l; var pos=this.posXY(obj); if(obj.nodeName=="INPUT"){ div.pos(pos.top+obj.offsetHeight,pos.left); }else{ if(parseInt(pos.top+div.M.offsetHeight-this.scrTop[n-1],10)>parseInt(getScreenHeight()-20,10)){ t=getScreenHeight()-div.M.offsetHeight-10+this.scrTop[n-1]; }else{ t=pos.top; } if(parseInt(div.M.style.top, 10) <0){ t = 0; } l=pos.left+obj.offsetWidth+10; div.pos(t-this.scrTop[n-1],l); } }, posXY:function(obj){ var intTop=obj.offsetTop; var intLeft=obj.offsetLeft; try{ while(obj.offsetParent){ obj=obj.offsetParent intTop+=obj.offsetTop; intLeft+=obj.offsetLeft; } }catch(e){} return {"top":intTop,"left":intLeft}; }, startScroll:function(obj,flg,n){ var func; var me=this; $(obj).css({cursor:"pointer",color:"blue"}); div=$("divList" + n).get(); if(flg=="up"){ func=function(){ try{ div.scrollTop-=1; me.scrTop[n]=div.scrollTop; }catch(e){} } }else{ func=function(){ try{ div.scrollTop+=1; me.scrTop[n]=div.scrollTop; }catch(e){} } } this.interval=window.setInterval(func, 10); }, stopScroll:function(obj){ $(obj).css({color:""}); window.clearInterval(this.interval); this.interval=null; }, wheel:function(e,obj,n){ if(e.wheelDelta>0){ obj.scrollTop-=15; }else{ obj.scrollTop+=15; } this.scrTop[n]=obj.scrollTop; }, onclr:function(){ //var me=this; var obj=window.event.srcElement; if(obj.nodeName!='INPUT' && this.kbn(obj)==null){ this.clr(); } }, kbn:function(obj){ while(obj.nodeName!="BODY"){ for(i=0;i<=this.max;i++){ if(obj.id=="divMenu"+i) return i; } obj=obj.parentNode; } return null; }, loading:function(){ var strHtml=[]; strHtml.push("<table style='width:100px;hight:120px;text-align:center'>"); strHtml.push("<tr>"); strHtml.push("<td><img src='../App_Themes/images/loading.gif'/>"); strHtml.push("</td></tr><tr>"); strHtml.push("<td style='font-size:13px'>正在读取数据...</td>"); strHtml.push("</tr></table>"); return strHtml.join(""); }}function getScreenHeight(){ var objBody = (document.documentElement && document.documentElement.clientWidth)?document.documentElement:document.body; return (objBody.offsetHeight + objBody.scrollTop);}function createDIV(n){ var div,dvpr; var show=function(){ $(this.M).show(); $(this.P).show(); } var pos=function(t,l){ $(this.M).css({top:t,left:l}); $(this.P).css({top:t,left:l}); } var SetSize=function(){ $(this.P).css({width:this.M.offsetWidth + "px",height:this.M.offsetHeight + "px"}) $(this.P.childNodes[0]).css({height:this.M.offsetHeight + "px"}); } if($("divMenu" + n).get()){ div=$("divMenu" + n).get(); dvpr=$("dvPr" + n).get(); return {M:div,P:dvpr,'show':show,'pos':pos,'setSize':SetSize}; } div=document.createElement("DIV"); div.id="divMenu" + n; div.className="menu"; $(div).css({padding:'10px',position:"absolute",zIndex:100+n}); $(div).hide(); document.body.appendChild(div); dvpr=document.createElement("<div id='dvPr"+n+"' style='position:absolute; display:none;z-index:"+ (90+n) +"px;width:0px'></div>"); $(dvpr).html("<iframe frameborder=0 width='100%' height='100%' id=ifr"+ n +" scrolling=no></iframe>"); document.body.appendChild(dvpr); return {M:div,P:dvpr,'show':show,'pos':pos,'setSize':SetSize}; }function $(id){ return { get:function(){ return "string" == typeof id ? document.getElementById(id) : id; }, hide:function(){ this.css({display:"none"}); }, show:function(){ this.css({display:""}); }, html:function(val){ if(val==undefined){ return this.get().innerHTML; } this.get().innerHTML=val; }, val:function(val){ if(val==undefined){ return this.get().value; } this.get().value=val; }, css:function(options){ for ( var name in options ) { this.get().style[ name ] = options[ name ]; } } }}?