06，JavaScript自定义菜单

（1）自定义js菜单脚本dtreeR2.js

function xTree(objName) {
	
	this.root = new Node(-1);
	this.aNodes = [];
	this.aIndent = [];
	this.obj = objName;
	
	this.config = {
		useLines : true,
		useIcons:true,
		closeSameLevel : false
		
	};
	
	this.icon = {
		root:'images/base.gif',
		folder:'images/folder.gif',
		folderOpen:'images/folderopen.gif',
		node:'images/page.gif',
		line:'images/line.gif',
		empty:'images/empty.gif',
		nlMinus:'images/nolines_minus.gif',
		nlPlus:'images/nolines_plus.gif',
		minusBottom:'images/minusbottom.gif',
		minus: 'images/minus.gif',
		plus:'images/plus.gif',
		plusBottom:'images/plusbottom.gif',
		join:'images/join.gif',
		joinBottom:'images/joinbottom.gif'
	}
	
	this.selectedNode = null;
	this.selectedFound = false;
	
}

function Node(id, pid, name, icon, iconOpen) {
	
	this.id = id;
	this.pid = pid;
	this.name = name;
	this._ai = 0;
	this._hc = false;
	this._ls = false;
	this._io = false;
	this._p;
	this.icon=icon;
	this.iconOpen=iconOpen;
	
}

// 添加元素
xTree.prototype.add = function(id, pid, name, icon, iconOpen) {
	
	this.aNodes[this.aNodes.length] = new Node(id ,pid, name, icon, iconOpen);
	
}

// 写入document文档
xTree.prototype.toString = function() {
	
	var str = '<div class="dTree">\n';
	if(document.getElementById) {
		str +=this.addNode(this.root);
	}
	else {
		str ="Browser not supported.";
	}
	str +='</div>';
	return str;	
}

xTree.prototype.addNode = function (pNode) {
	
	var str = '';
	var n = 0;
	for(n; n < this.aNodes.length; n++) {
		// 节点父id
		if(this.aNodes[n].pid == pNode.id) {
			var cn = this.aNodes[n];
			cn._p = pNode;
			cn._ai = n;
			this.setCs(cn);
			if(cn._hc && !cn._io ) {
				cn._io = true;
			}
			
			if(this.config.useSelection && cn.id==this.selectedNode && !this.selectedFound ) {
				cn._is = true;
				this.selectedNode = n;
				this.selectedFound = true;
			}
			
			str +=this.node(cn, n);
			if(cn._ls)break;
			
		}
		
	}
	return str;
	
}

// 判断节点是否有子节点及是否平级节点的最后一位
xTree.prototype.setCs = function(node) {
	
	var lastId;
	for(var n = 0; n < this.aNodes.length; n++) {
		if(this.aNodes[n].pid == node.id) {
			node._hc = true;
		}
		if(this.aNodes[n].pid == node.pid) {
			lastId = this.aNodes[n].id;
		}
	}
	// 节点是否平级最后一位
	if(lastId == node.id) {
		node._ls = true;
	}
	
}

xTree.prototype.node=function(node,nodeId) {
	
	var str='<div class="dTreeNode">'+this.indent(node,nodeId);
	if(this.config.useIcons) {
		if(this.root.id == node.pid) {
			node.icon=node.icon;
			node.iconOpen=node.icon;
		}
		str +='<img id="i'+this.obj+nodeId+'" src="'+((node._io)?(node.iconOpen):(node.icon))+'" />';
	}
	if(node.url) {
		str +='<a id="s'+this.obj+nodeId+'" class="'+((this.config.useSelection)?(node._is?'nodeSel':'node'):('node'))
    		+'" href="' + node.url + '" ';
		
		if (this.config.useSelection && ((node._hc && this.config.folderLinks) || !node._hc))
			str += ' onclick="javascript: ' + this.obj + '.s(' + nodeId + ');"';
		str +=' >';
	}
	// hc
	else if((!this.config.folderLinks || !node.url) && node._hc && node.pid!=this.root.id) {
		str +='<a href="javascript:'+this.obj+'.o('+nodeId+')" class="node" >';
	}
	if(node.url!="") {
		str +="<font onClick='display_pros()' >"+node.name+"</font>";
	}
	else {
		str +="<font >"+node.name+"</font>";
	}
	if(node.url || ((!this.config.folderLinks || !node.url)&& node._hc ) ) {
		str +='</a>';
	}
	str +='</div>';
	if(node._hc) {
		str +='<div id="d'+this.obj+nodeId+'" class="clip" style="display:'+((this.root.id==node.pid||node._io)?'block':'none')+'" >';
		str +=this.addNode(node);
		str +='</div>';
	}
	this.aIndent.pop();
	return str;
};

xTree.prototype.indent=function(node ,nodeId) {
	var str='';
	if(this.root.id!=node.pid) {
		for(var n=0;n<this.aIndent.length;n++) {
			str +='<img src="'+((this.aIndent[n]==1&&this.config.useLines)?(this.icon.line):(this.icon.empty))+'" alt="" />';
		}
		
		(node._ls)?this.aIndent.push(0):this.aIndent.push(1);
		if(node._hc) {
			str +='<a href="javascript:'+this.obj+'.o('+nodeId+')"><img width="18" height="18" id="j'+this.obj+nodeId+'" src="';
			if(!this.config.useLines) {
				if(node._io) {
					str = str + this.icon.nlMinus;
				} else {
					str = str + this.icon.nlPlus;
				}
				
			}
			else {
				
				if(node._io) { // open
					if(node._ls) {
						str = str + this.icon.minusBottom;
					} else {
						str = str + this.icon.minus;     
					}
					
				} else { // close
					if(node._ls) {
						str = str + this.icon.plusBottom;
					} else {
						str = str + this.icon.plus;
					}
				}
				
			}
			str +=' " alt="" /></a>';
		}
		else {
			var join_empty = "";
			if(this.config.useLines) {
				if(node._ls) {
					join_empty = join_empty + this.icon.joinBottom;
				}
				else {
					join_empty = join_empty + this.icon.join;
				}
			}
			else {
				join_empty = join_empty + this.icon.empty;
			}
			
			str +='<img width="18" height="18" src="'+ join_empty +'" alt="" />';
		}
	}
	return str;
};

xTree.prototype.o =function(id) {
	var cn = this.aNodes[id];
	this.nodeStatus(!cn._io , id ,cn._ls );
	cn._io =! cn._io;
	if(this.config.closeSameLevel){
		this.closeLevel(cn);
	}
	
};

xTree.prototype.nodeStatus=function(status,id,bottom) {
	eDiv=document.getElementById('d'+this.obj+id);
	eJoin=document.getElementById('j'+this.obj+id);
	if(this.config.useIcons) {
		eIcon= document.getElementById('i'+this.obj+id);
		eIcon.src= (status)?this.aNodes[id].iconOpen:this.aNodes[id].icon;
	}
	
	var srcObj1="";
	if(this.config.useLines) {
	    if(status) {
		    srcObj1= ((bottom)?this.icon.minusBottom:this.icon.minus);
		}
		else {
		    srcObj1 = ((bottom)?this.icon.plusBottom:this.icon.plus);
		}
	}
	else {
	    srcObj1 = ((status)?this.icon.nlMinus:this.icon.nlPlus);
	}
	
	eJoin.src = srcObj1;	
	eDiv.style.display=(status)?'block':'none';
};

（2）在html页面调用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <style type="text/css"></style>
	<link rel="stylesheet" type="text/css" href="#">
	<script type="text/javascript" src="dtreeR2.js"></script>
	
</head>
<body>

</body>
<script type="text/javascript">
	
		var treemenu = new xTree("treemenu");

		treemenu.add('1','-1','java网站入门经典','images/erp.gif','images/erp.gif');

		treemenu.add('2','1','第一章开启之门','images/folder.gif','images/folder.gif');
		treemenu.add('3','2','1.1初识','images/folder.gif','images/folder.gif');
		treemenu.add('6','2','1.2应用技术','images/folder.gif','images/folder.gif');
		treemenu.add('9','1','第二章不可不知应用','images/folder.gif','images/folder.gif');
		treemenu.add('10','9','2.1构建页面内容html','images/folder.gif','images/folder.gif');
		treemenu.add('13','9','2.2页面css','images/folder.gif','images/folder.gif');
		treemenu.add('16','1','第三章驾驭web环境','images/folder.gif','images/folder.gif');
		treemenu.add('17','16','3.1所需开发环境','images/folder.gif','images/folder.gif');
		treemenu.add('20','16','3.2安装配置JDK','images/folder.gif','images/folder.gif');

		treemenu.add('4','3','1.1.1概述' ,'images/page.gif','images/page.gif');
		treemenu.add('5','3','1.1.2特点' ,'images/page.gif','images/page.gif');
		treemenu.add('7','6','1.2.1客户端应用' ,'images/page.gif','images/page.gif');
		treemenu.add('8','6','1.2.2服务端应用' ,'images/page.gif','images/page.gif');
		treemenu.add('11','10','2.1.1了解html结构' ,'images/page.gif','images/page.gif');
		treemenu.add('12','10','2.1.2文字排版' ,'images/page.gif','images/page.gif');
		treemenu.add('14','13','2.2.1样式表定义与引用' ,'images/page.gif','images/page.gif');
		treemenu.add('15','13','2.2.2css规则' ,'images/page.gif','images/page.gif');
		treemenu.add('18','17','3.1.1工具包JDK' ,'images/page.gif','images/page.gif');
		treemenu.add('19','17','3.1.2web服务器' ,'images/page.gif','images/page.gif');
		treemenu.add('21','20','3.2.1下载JDK' ,'images/page.gif','images/page.gif');
		treemenu.add('22','20','3.2.2安装JDK' ,'images/page.gif','images/page.gif');
		
		document.write(treemenu);

</script>
</html>

（3）相关图片文件因版权问题，暂不便提供有需要的请留言

（4）效果图