menu.js

网页上经常会用到的树状结构源代码,模拟文件夹方式,采用ajax方式动态加载数据,避免一次性加载带来的数据量过大的效率问题.

function RayeMenu(){
	this.element = document.createElement("DIV");
	this.element.className = "menu";
	this.element.instance = this;
	this.type = "menu";
	this.parentItem = null;
	this.item = new RayeItemCollection();
	this.all = new Array();
	this.shadows = new Array();
	for(var i = 1;i < 5 ;i ++){
		var o = document.createElement("DIV");
		o.className = "s" + i;
		this.shadows[i - 1] = o;
		this.element.appendChild(o);
		o = null;
	}
	this.menuDiv = document.createElement("DIV");
	this.menuDiv.className = "s0";
	this.element.appendChild(this.menuDiv);
	this.element.style.visibility = "hidden";
	this.element.onmousemove = RayeMenu.eventHandlers.onmousemove;
	this.subMenu = new RayeItemCollection();
}
RayeMenu.prototype.addItem = function(key,label,action,className){
	var o = new RayeMenuItem(this, key,label,action||"",className||"");
	this.item.add(o);
	this.all[o.key] = o;
	this.menuDiv.appendChild(o.element);
	if(null != this.parentItem){
		this.parentItem.menu.all[this.parentItem.key + "." + key] = o;
	}
}
RayeMenu.prototype.checkItem = function(key, check){
	check = check || "check";
	if(this.all[key]){
		if("check" == check){
			this.all[key].element.className += " menu_item_checked";
		}
		else{
			var cn = this.all[key].element.className;
			cn = cn.replace(/ menu_item_checked/g,"");
			this.all[key].element.className = cn;
		}
	}
}
RayeMenu.prototype.disableItem = function(key, disable){
	disable = disable || "disable";
	if(this.all[key]){
		if("disable" == disable){
			this.all[key].element.className += " menu_item_disabled";
			this.all[key].disabled = true;
		}
		else{
			var cn = this.all[key].element.className;
			cn = cn.replace(/ menu_item_disabled/g,"");
			this.all[key].element.className = cn;
			this.all[key].disabled = false;
		}
	}
}
RayeMenu.prototype.attechSubMenu = function(menu,itemKey){
	var o = this.all[itemKey];
	menu.parentItem = o;
	this.subMenu.add(menu);
	o.attechSubMenu(menu);
	var e = o.element.getElementsByTagName("DIV").item(0);
	e.appendChild(menu.element);
}
RayeMenu.prototype.renew = function(){
	this.element.style.visibility = "hidden";
	var l = this.item.length;
	for(var i = 0;i < l;i ++){
		var o = this.item.item(i);
		o.element.style.display = "block";
		if("normal" == o.menuType){
			this.checkItem(o.key,"none");
			this.disableItem(o.key,"none");
		}
	}
	if(0 < this.subMenu.length){
		var l = this.subMenu.length;
		for(var i = 0;i < l ;i ++){
			var o = this.subMenu.item(i);
			o.renew();
		}
	}
}
RayeMenu.prototype.hideItem = function(key){
	if(this.all[key]){
		this.all[key].element.style.display = "none";
	}
}
RayeMenu.prototype.show = function(x,y){
	if(null == this.parentItem && null != RayeMenu.visibleInstance){
		RayeMenu.visibleInstance.hide();
	}
	RayeMenu.visibleInstance = this;
	this.element.style.display = "block";
	var menu = this;
	if(null != this.parentItem){
		menu = this.parentItem.menu;
	}
	var pe = menu.element.parentNode;
	var minL = pe.offsetLeft + 2;
	var maxL = minL + pe.offsetWidth - 4;
	var minT = pe.offsetTop + 2;
	var maxT = minT + pe.offsetHeight - 4;
	var top = 0;
	var left = 0;
	var op = this.element.offsetParent;
	if(null == this.element.offsetParent){
		op ={
			offsetTop:0,offsetLeft:0
		};
	}
	if(null == this.parentItem){
		if(this.menuDiv.offsetWidth + x <= maxL){
			left = x;
		}
		else if(x - this.menuDiv.offsetWidth >= minL){
			left = x - this.menuDiv.offsetWidth;
		}
		else{
			left = minL;
		}
		if(this.menuDiv.offsetHeight + y <= maxT){
			top = y - op.offsetTop;
		}
		else if(y - this.menuDiv.offsetHeight >= minT){
			top = y - this.menuDiv.offsetHeight - op.offsetTop;
		}
		else{
			top = minT - op.offsetTop;
		}
	}
	else{
		var mpe = menu.element;
		var e = this.parentItem.element;
		if(e.offsetLeft + e.offsetWidth + mpe.offsetLeft + this.menuDiv.offsetWidth <= maxL){
			left = e.offsetLeft + e.offsetWidth;
		}
		else if(mpe.offsetLeft - e.offsetLeft- this.menuDiv.offsetWidth >= minL){
			left = - this.menuDiv.offsetWidth + 2;
		}
		else{
			left = e.offsetWidth - this.menuDiv.offsetWidth;
		}
		if(mpe.offsetTop + e.offsetTop + this.menuDiv.offsetHeight + op.offsetTop<= maxT){
			top = e.offsetTop;
		}
		else if(op.offsetTop + mpe.offsetTop + e.offsetTop + e.offsetHeight - this.menuDiv.offsetHeight >= minT){
			top = e.offsetTop + e.offsetHeight - this.menuDiv.offsetHeight;
		}
		else{
			top = 0;
		}
	}
	this.element.style.left = left + "px";
	this.element.style.top = top + "px";
	this.element.style.visibility = "visible";
	this.dropShadow();
	this.menuDiv.style.zIndex = 0;
	if(null == this.parentItem){
		RayeMenu.eventHandlers.menuInstance = this;
		var doc = document;
		if (doc.addEventListener){
			doc.addEventListener("mouseup", RayeMenu.eventHandlers.onmouseup, true);
			doc.addEventListener("mousedown", RayeMenu.eventHandlers.onmousedown, true);
		}
		else if (doc.attachEvent){
			doc.attachEvent("onmouseup", RayeMenu.eventHandlers.onmouseup);
			doc.attachEvent("onmousedown", RayeMenu.eventHandlers.onmousedown);
			doc.attachEvent("onmousemove", RayeMenu.eventHandlers.onmousemove);
			doc.attachEvent("onlosecapture", RayeMenu.eventHandlers.onmouseup);
			this.element.setCapture();
		}
	}
}
RayeMenu.prototype.hide = function(){
	if(RayeMenu.visibleInstance == this){
		RayeMenu.visibleInstance = null;
	}
	this.element.style.visibility = "hidden";
	this.element.style.display = "none";
	var l = this.shadows.length;
	for(var i = 0;i < l;i ++){
		this.shadows[i].style.visibility = "hidden";
	}
	if(null == this.parentItem){
		RayeMenu.eventHandlers.menuInstance = null;
		var doc = document;
		if (doc.addEventListener){
			doc.removeEventListener("mouseup", RayeMenu.eventHandlers.onmouseup, true);
			doc.removeEventListener("mousedown", RayeMenu.eventHandlers.onmousedown, true);
		}
		else if (doc.attachEvent){
			doc.detachEvent("onmousedown", RayeMenu.eventHandlers.onmousedown);
			doc.detachEvent("onmouseup", RayeMenu.eventHandlers.onmouseup);
			doc.detachEvent("onmousemove", RayeMenu.eventHandlers.onmousemove);
			doc.detachEvent("onlosecapture", RayeMenu.eventHandlers.onmouseup);
			doc.releaseCapture();
		}
	}
	this.item.select(-1);
	if(this.subMenu.length > 0 ){
		var l = this.subMenu.length;
		for(var i = 0;i < l;i ++){
			this.subMenu.item(i).hide();
		}
	}
}
RayeMenu.prototype.dropShadow = function(){
	var l = this.shadows.length;
	var h = this.menuDiv.offsetHeight;
	for(var i = 0;i < l;i ++){
		var o = this.shadows[i];
		if(h - i * 2 > 0){
			o.style.height = (h - i * 2) + "px";
			o.style.visibility = "visible";
		}
	}
}
function RayeMenuItem(menu,key,label){
	this.key = key;
	this.menu = menu;
	this.disabled = false;
	this.type = "menu_item";
	if("-" == label){
		this.menuType = "hr";
		this.element = document.createElement("DIV");
		this.element.className = "hr";
		this.disabled = true;
	}
	else{
		this.element = new RayeMenuItem.createElement(label);
		this.menuType = "normal";
	}
	this.element.instance = this;
	this.label = label || "";
	this.index = -1;
}
RayeMenuItem.prototype.attechSubMenu = function(menu){
	this.subMenu = menu;
	var icon = this.element.getElementsByTagName("IMG").item(1);
	icon.style.visibility = "inherit";
}
RayeMenuItem.prototype.onselect = function(){
	if(false == this.disabled){
		this.element.className += " menu_item_selected";
		if(null != this.subMenu){
			this.subMenu.show();
		}
	}
}
RayeMenuItem.prototype.onblur = function(){
	if("hr" != this.menuType){
		var cn = this.element.className;
		cn = cn.replace(/ menu_item_selected/g,"");
		this.element.className = cn;
		if(null != this.subMenu){
			this.subMenu.item.select(-1);
			this.subMenu.hide();
		}
	}
}
RayeMenuItem.prototype.onindexchange = function(n){
	this.index = n;
}
RayeMenuItem.createElement = function(label){
	var s1 = document.createElement("img");
	s1.className = "menu_icon";
	s1.src = imagePath + "menu/radio.point.png";
	var s2 = document.createElement("SPAN");
	s2.className = "menu_label";
	var t = document.createTextNode(label);
	s2.appendChild(t);
	var s3 = document.createElement("IMG");
	s3.className = "menu_arrow";
	s3.src = imagePath + "menu/arrow.right.png";
	var retval = document.createElement("DIV");
	retval.className = "menu_item";
	var d1 = document.createElement("DIV");
	d1.className = "sub_menu";
	retval.appendChild(s1);
	retval.appendChild(s2);
	retval.appendChild(s3);
	retval.appendChild(d1);
	d1 = s1 = s2 = s3 = t = null;
	return retval;
}
RayeMenuItem.getReal = function(o){
	var e = o;
	while(null != e){
		if("object" == typeof e.instance){
			break;
		}
		e = e.parentNode;
	}
	if(null != e && (e.instance.type == "menu_item" || e.instance.type == "menu")){
		return e;
	}
	else{
		return null;
	}
}
RayeMenu.execute = null;
RayeMenu.visibleInstance = null;
RayeMenu.eventHandlers ={
	getEvent:	function (e, el){
		if (!e){
			if (el)
			e = el.document.parentWindow.event;
			else
			e = window.event;
		}
		if (!e.srcElement){
			var el = e.target;
			while (el != null && el.nodeType != 1)
			el = el.parentNode;
			e.srcElement = el;
		}
		if (typeof e.offsetX == "undefined"){
			e.offsetX = e.layerX;
			e.offsetY = e.layerY;
		}
		return e;
	}
	,
	getDocument:	function (e){
		if (e.target)
		return e.target.ownerDocument;
		return e.srcElement.document;
	}
	,
	onmousemove: function(e){
		e = RayeMenu.eventHandlers.getEvent(e,this);
		var eitem = RayeMenuItem.getReal(e.srcElement);
		if(null == eitem) return;
		var inst = eitem.instance;
		var menuInst = inst.menu;
		e.cancelBubble = true;
		if("menu_item" == inst.type){
			if(null == menuInst ) return;
			if(inst.index != menuInst.item.selectedIndex[0]){
				menuInst.item.select(inst.index);
			}
		}
	}
	,
	menuInstance: null,
	onmousedown:function(e){
		e = RayeMenu.eventHandlers.getEvent(e,this);
		if(null == RayeMenuItem.getReal(e.srcElement)){
			RayeMenu.eventHandlers.menuInstance.hide();
			var o = e.srcElement;
			while(null != o){
				if("function" == typeof o.onmousedown){
					o.onmousedown(e);
				}
				o = o.parentNode;
			}
		}
		return false;
	}
	,
	onmouseup:function(e){
		e = RayeMenu.eventHandlers.getEvent(e,this);
		var item = RayeMenuItem.getReal(e.srcElement);
		var hide = true;
		if(null != item && "menu_item" == item.instance.type){
			var inst = item.instance;
			if(true != inst.disabled && null == inst.subMenu){
				if("function" == typeof RayeMenu.execute){
					setTimeout(function(){
						RayeMenu.execute(inst.key);
					},0);
				}
			} else{
				hide = false;
			}
		}
		if(hide){
			RayeMenu.eventHandlers.menuInstance.hide();
		}
		return;
	}
}