coolmenus4.js

基于structs的菜单实现

/************************************************************
Coolmenus Beta 4.06 - Copyright Thomas Brattli - www.dhtmlcentral.com
Last updated: 11.13.02

v4.06 - with basic frame support
*************************************************************/
/*Browsercheck object*/
function cm_bwcheck(){
	//In theory we should use object detection, but this script needs work-arounds for almost every browser...
	this.ver=navigator.appVersion
	this.agent=navigator.userAgent.toLowerCase()
	this.dom=document.getElementById?1:0
	this.ns4=(!this.dom && document.layers)?1:0;
	this.op=window.opera 
	this.moz=(this.agent.indexOf("gecko")>-1 || window.sidebar)
	this.ie=this.agent.indexOf("msie")>-1 && !this.op
	if(this.op){
		this.op5=(this.agent.indexOf("opera 5")>-1 || this.agent.indexOf("opera/5")>-1)
		this.op6=(this.agent.indexOf("opera 6")>-1 || this.agent.indexOf("opera/6")>-1)
		this.op7=this.dom&&!this.op5&&!this.op6 //So all higher opera versions will use it
	}else if(this.moz) this.ns6 = 1
	else if(this.ie){
		this.ie4 = !this.dom && document.all
  	this.ie5 = (this.agent.indexOf("msie 5")>-1)
  	this.ie55 = (this.ie5 && this.agent.indexOf("msie 5.5")>-1)
  	this.ie6 = this.dom && !this.ie4 && !this.ie5 && ! this.ie55
	}
	this.mac=(this.agent.indexOf("mac")>-1)
	this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.op5 || this.op6 || this.op7)
  this.usedom= this.ns6||this.op7//Use dom creation
  this.reuse = this.ie||this.op7||this.usedom //Reuse layers
  this.px=this.dom&&!this.op5?"px":""
	return this
}
var bw=new cm_bwcheck()
/*Variable declaration*/
var cmpage
/*Crossbrowser objects functions*/
function cm_message(txt){alert(txt); return false}
function cm_makeObj(obj,nest,o,doc){ //Changed in v4.05
  if(!doc) doc=document 
  if(bw.usedom&&o) this.evnt=o
  else{nest=(!nest) ? "doc.":'doc.layers.'+nest+'.'
    this.evnt=bw.dom? doc.getElementById(obj):
    bw.ie4?doc.all[obj]:bw.ns4?eval(nest+"layers." +obj):0;
  }
  if(!this.evnt) return cm_message('The layer does not exist ('+obj+')' 
    +'- \nIf your using Netscape please check the nesting of your tags (on the entire page)\nNest:'+nest)
  this.css=bw.dom||bw.ie4?this.evnt.style:this.evnt; this.ok=0
  this.ref=bw.dom||bw.ie4?doc:this.css.document; 
  this.obj = obj + "Object"; 	eval(this.obj + "=this");
  this.x=0; this.y=0; this.w=0; this.h=0; this.vis=0; return this
}
cm_makeObj.prototype.moveIt = function(x,y){this.x=x;this.y=y; this.css.left=x+bw.px;this.css.top=y+bw.px}
cm_makeObj.prototype.showIt = function(o){this.css.visibility="visible"; this.vis=1; if(bw.op5&&this.arr){ this.arr.showIt(); }}//alert('showing arrow')}} 
cm_makeObj.prototype.hideIt = function(no){this.css.visibility="hidden"; this.vis=0;}
cm_makeObj.prototype.clipTo = function(t,r,b,l,setwidth){ 
this.w=r; this.h=b; if(bw.ns4){this.css.clip.top=t;this.css.clip.right=r; this.css.clip.bottom=b;this.css.clip.left=l
}else{if(t<0)t=0;if(r<0)r=0;if(b<0)b=0;if(b<0)b=0; this.css.clip="rect("+t+bw.px+","+r+bw.px+","+b+bw.px+","+l+bw.px+")";
if(setwidth){if(bw.op5||bw.op6){this.css.pixelWidth=r; this.css.pixelHeight=b;}else{this.css.width=r+bw.px; this.css.height=b+bw.px;}}}}
function cm_active(on,h){
	if(this.o.arr) on?this.o.arr.hideIt():bw.op5?this.o.arr.showIt():this.o.arr.css.visibility="inherit"
  if(bw.reuse||bw.usedom){
    if(!this.img2) this.o.evnt.className=on?this.cl2:this.cl
    else this.o.ref.images["img"+this.name].src=on?this.img2.src:this.img1.src; //Changed v4.05
    if(on && bw.ns6){this.o.hideIt(); this.o.css.visibility='inherit' }; //netscape 6 bug fix  
  }else{  
    if(!this.img2){ if(on) this.o.over.showIt(); else this.o.over.hideIt();
    }else this.o.ref.images["img"+this.name].src=on?this.img2.src:this.img1.src;
  }this.isactive=on?1:0
}
/***Pageobject **/
function cm_page(frame){ //Changed v4.05
  if(!frame) frame = self 
  this.x=0; this.x2 =(!bw.ie)?frame.innerWidth:frame.document.body.offsetWidth-20;
  this.y=0; this.orgy=this.y2= (!bw.ie)?frame.innerHeight:frame.document.body.offsetHeight-6;
  this.x50=this.x2/2; this.y50=this.y2/2; return this
}
/***check positions**/
function cm_cp(num,w,minus){
	if(num){if(num.toString().indexOf("%")!=-1){var t = w?cmpage.x2:cmpage.y2; num=parseInt((t*parseFloat(num)/100))
  if(minus) num-=minus }else num=eval(num);} else num=0; return num
}
/**Level object**/
function cm_makeLevel(){//changed 4.06
	var c=this, a=arguments; c.width=a[0]||null; c.height=a[1]||null; 
  c.regClass=a[2]||null; c.overClass=a[3]||null; c.borderX=a[4]>-1?a[4]:null; 
  c.borderY=a[5]>-1?a[5]:null; c.borderClass=a[6]||null; c.rows=a[7]>-1?a[7]:null; 
  c.align=a[8]||null; c.offsetX=a[9]||null; c.offsetY=a[10]||null; c.arrow=a[11]||null; 
  c.arrowWidth=a[12]||null; c.arrowHeight=a[13]||null; c.roundBorder=a[14]||null; return c
}
/***Making the main menu object**/
function makeCM(name){ //Changed v4.06
  var c=this; c.mc=0; c.name = name; c.m=new Array(); c.scrollY=-1; c.level=new Array(); c.l=new Array(); c.tim=100; c.isresized=0;
  c.isover=0; c.zIndex=100; c.frameStartLevel=1; c.bar=0; c.z=0; c.totw=0; c.toth=0; c.maxw=0; c.maxh=0; cmpage = new cm_page(); c.constructed = 0;
	return this
}//events
makeCM.prototype.onshow=""; makeCM.prototype.onhide=""; makeCM.prototype.onconstruct="";
/***Creating layers**/
function cm_divCreate(id,cl,txt,w,c,app,ex,txt2){
  if(bw.usedom){var div=document.createElement("DIV"); div.className=cl; div.id=id; 
    if(txt) div.innerHTML=txt; if(app){app.appendChild(div); return div}
    if(w) document.body.appendChild(div); return div
  }else{var dstr='<div id="'+id+'" class="'+cl+'"' 
    if(ex&&bw.reuse) dstr+=" "+ex; dstr+=">"+txt; ; if(txt2) dstr+=txt2; 
    if(c) dstr+='</div>'; if(w) document.write(dstr); else return dstr
  }return ""
}
/***Getting layer string for each menu**/
function cm_getLayerStr(m,app,name,fill,clb,arrow,ah,aw,root){
  var no=m.nolink,arrstr='',l=m.lev,str='',txt=m.txt,ev='', id=name + '_' + m.name,d1; if(app) d1=app
  if((!bw.reuse||l==0) && !no){
    ev=' onmouseover="'+name+'.showsub(\''+m.name+'\')"' 
    +' onmouseout="'+name+'.mout(\''+m.name+'\')"'
    +' onclick="'+name+'.onclck(\''+m.name+'\'); return false" '
  }
  if(bw.reuse&&l!=0) txt=''; if(l==0) str+=d1=cm_divCreate(id+'_0',clb,''); str+=m.d2=cm_divCreate(id,m.cl,txt,0,0,d1,ev)
  if(l==0&&bw.usedom){ 
    m.d2.onclick=new Function(name+'.onclck("'+m.name+'")'); 
    m.d1=d1; 
    m.d2.onmouseover=new Function(name+'.showsub("'+m.name+'")'); 
    m.d2.onmouseout=new Function(name+'.mout("'+m.name+'")')
  }if(!bw.reuse && !m.img1 && !no){
    str+=cm_divCreate(id+'_1',m.cl2,txt,0,1)
    str+=cm_divCreate(id+'_3',"clCMAbs",'<a href="#" '+ev+'><img alt="" src="'+root+fill+'" width="'+m.w+'" height="'+m.h+'" border="0" /></a>',0,1)
  }str+='</div>'; 
  if(l==0){if(arrow)str+=m.d3=cm_divCreate(id+'_a','clCMAbs','<img alt="" height="'+aw+'" width="'+ah+'" src="'+root+arrow+'" />',0,1,d1); str+="</div>"}
  str+="\n"; if(!bw.reuse){m.txt=null; m.d2=null; m.d3=null;}
  if(bw.usedom){ if(l==0) document.body.appendChild(d1); str=''}
  return str
}
/***get align num from text (better to evaluate numbers later)**/
function cm_checkalign(a){
  switch(a){
    case "right": return 1; break; case "left": return 2; break;
    case "bottom": return 3; break; case "top": return 4; break;
    case "righttop": return 5; break; case "lefttop": return 6; break;
    case "bottomleft": return 7; break; case "topleft": return 8; break;
  }return null
}
/**Making each individual menu **/
makeCM.prototype.makeMenu=function(name,parent,txt,lnk,targ,w,h,img1,img2,cl,cl2,align,rows,nolink,onclick,onmouseover,onmouseout){
  var c = this; if(!name) name = c.name+""+c.mc; var p = parent!=""&&parent&&c.m[parent]?parent:0;
  if(c.mc==0){
		//Added 4.07 - bug(?) in opera 7 - you cannot dom-add layers created in one document to another one (or so it seems) - so turn of usedom
		if(bw.op7 && this.frames)	bw.usedom=0
		var tmp=location.href;
    if(tmp.indexOf('file:')>-1||tmp.charAt(1)==':') c.root=c.offlineRoot; else c.root=c.onlineRoot
    if(c.useBar){if(!c.barBorderClass) c.barBorderClass=c.barClass; c.bar1 = cm_divCreate(c.name+'bbar_0',c.barClass,'',0,1);
      c.bar = cm_divCreate(c.name+'bbar',c.barBorderClass,'',1,1,0,0,c.bar1); if(bw.usedom) c.bar.appendChild(c.bar1);    
    }}var create=1,img,arrow; var m = c.m[name] = new Object(); m.name=name; m.subs=new Array(); m.parent=p; m.arnum=0; m.arr=0
  var l = m.lev = p?c.m[p].lev+1:0; c.mc++; m.hide=0;
  if(l>=c.l.length){
    var p1,p2=0; if(l>=c.level.length) p1=c.l[c.level.length-1];
    else p1=c.level[l]; c.l[l]=new Array(); if(!p2) p2=c.l[l-1]
    if(l!=0){ if(isNaN(p1.align)) p1["align"]=cm_checkalign(p1.align)
      for(var i in p1){if(i!="str"&&i!="m"){if(p1[i]==null) c.l[l][i]=p2[i]; else c.l[l][i]=p1[i] }}
    }else{c.l[l]=c.level[0]; c.l[l].align=cm_checkalign(c.l[l].align)}
    c.l[l]["str"]=''; c.l[l].m=new Array(); if(!c.l[l].borderClass) c.l[l].borderClass=c.l[l].regClass
    c.l[l].app=0; c.l[l].max=0; c.l[l].arnum=0; c.l[l].o=new Array(); c.l[l].arr=new Array()
    c.level[l]=p1=p2=null
    if(l!=0) c.l[l].str=c.l[l].app=cm_divCreate(c.name+ '_' +l+'_0',c.l[l].borderClass,'')
  }if(p){p = c.m[p]; p.subs[p.subs.length]=name; 
    if(p.subs.length==1&&c.l[l-1].arrow){ p.arr=1; 
      if(p.parent){c.m[p.parent].arnum++
        if(c.m[p.parent].arnum>c.l[l-1].arnum){
          c.l[l-1].str+=c.l[l-1].arr[c.l[l-1].arnum]=cm_divCreate(c.name+ '_a' +(l-1)+'_'+c.l[l-1].arnum,'clCMAbs','<img height="'+c.l[l-1].arrowHeight
            +'" width="'+c.l[l-1].arrowWidth+'" src="'+c.root+c.l[l-1].arrow+'" alt="" />',0,1,c.l[l-1].app); c.l[l-1].arnum++
        }}}if(bw.reuse) if(p.subs.length>c.l[l].max) c.l[l].max = p.subs.length; else create=0
  }m.rows=rows>-1?rows:c.l[l].rows; m.w=cm_cp(w||c.l[l].width,1); m.h=cm_cp(h||c.l[l].height,0); m.txt=txt; m.lnk=lnk; 
  if(align) align=cm_checkalign(align); m.align=align||c.l[l].align; m.cl=cl=cl||c.l[l].regClass; 
  m.targ=targ; m.cl2=cl2||c.l[l].overClass; m.create=create;  m.mover=onmouseover; m.mout=onmouseout; 
  m.onclck=onclick; m.active = cm_active; m.isactive=0; m.nolink=nolink
  if(create) c.l[l].m[c.l[l].m.length]=name
  if(img1){m.img1 = new Image(); m.img1.src=c.root+img1; if(!img2) img2=img1; m.img2 = new Image(); m.img2.src=c.root+img2;
    m.cl="clCMAbs"; m.txt=''; if(!bw.reuse&&!nolink) m.txt = '<a href="#" onmouseover="'+c.name+'.showsub(\''+name+'\')" onmouseout="'+c.name+'.mout(\''+name+'\')" onclick="'+c.name+'.onclck(\''+name+'\'); return false">';;
    m.txt+='<img alt="" src="'+c.root+img1+'" width="'+m.w+'" height="'+m.h+'" id="img'+m.name+'" '
    if(bw.dom&&!nolink) m.txt+='style="cursor:pointer; cursor:hand"'; if(!bw.reuse){if(!bw.dom) m.txt+='name="img'+m.name+'"'; m.txt+=' border="0"'}; m.txt+=' />'; if(!bw.reuse&&!nolink) m.txt+='</a>'
  }else{m.img1=0; m.img2=0}; 
  if(l==0||create) c.l[l].str+=cm_getLayerStr(m,c.l[l].app,c.name,c.fillImg,c.l[l].borderClass,c.l[l].arrow,c.l[l].arrowWidth,c.l[l].arrowHeight,c.root)
  if(l==0){if(m.w>c.maxw) c.maxw=m.w; if(m.h>c.maxh) c.maxh=m.h; c.totw+=c.pxBetween+m.w+c.l[0].borderX;c.toth+=c.pxBetween+m.h+c.l[0].borderY}
  if(lnk && !onmouseover){
		var path=lnk.indexOf("mailto:")>-1||lnk.indexOf("http://")>-1?"":c.root
		m.mover="self.status='"+path+m.lnk+"'"
		if(!m.mout) m.mout=""; m.mout+=";self.status='';"
	}
}
/**Getting x/y coords for subs **/
makeCM.prototype.getcoords=function(m,bx,by,x,y,maxw,maxh,ox,oy){
  var a=m.align; x+=m.o.x; y+=m.o.y
  switch(a){
    case 1:  x+=m.w+bx; break; case 2:  x-=maxw+bx; break;
    case 3:  y+=m.h+by; break; case 4:  y-=maxh+by; break;
    case 5:  x-=maxw+bx; y-=maxh-m.h; break;
    case 6:  x+=m.w+bx; y-=maxh-m.h; break;
    case 7:  y+=m.h+by; x-=maxw-m.w; break;
    case 8:  y-=maxh+by; x-=maxw-m.w+bx; break;
  }//Added v4.05
  if(m.lev==this.frameStartLevel-1 && this.frames){
    switch(a){
      case 1:  x=0; break; 
      case 2:  x=this.cmpage.x2-maxw; break;
      case 3:  y=0; break; 
      case 4:  y-=maxh+by; break;
      case 5:  x-=maxw+bx; y-=maxh-m.h; break;
      case 6:  x+=m.w+bx; y-=maxh-m.h; break;
      case 7:  y+=m.h+by; x-=maxw-m.w; break;
      case 8:  y-=maxh+by; x-=maxw-m.w+bx; break;
    }
  }
  m.subx=x + ox; m.suby=y + oy
}
/**Showing sub elements**/
makeCM.prototype.showsub=function(el){ //Changed v4.06