当年写的一个联动菜单

当年写的一个联动菜单。

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() : "");
        new	ajax.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 ];
		    }
        }
    }
}