JS组件--Menu

function Menu() {
	this.bars = [];
}
Menu.prototype.add = function (title, icon) {
	var bar = new Bar(title, icon);
	this.bars.push(bar);
	return bar;
};
Menu.prototype.render = function () {
	var container = document.body;
	var tbarH = bbarH = 30;
	var len = this.bars.length;
	if (arguments[0]) {
		container = document.getElementById(arguments[0]);
		container.style.borderStyle = "solid";
		container.style.borderColor = "#69c";
		container.style.borderWidth = 1;
	}
	var tbar = document.createElement("div");
	var title = document.createTextNode("\u5bfc\u822a\u83dc\u5355");
	tbar.style.height = tbarH;
	tbar.style.background = "#3586BD url(images/bar.png) repeat-x";
	tbar.style.color = "white";
	tbar.style.fontFamily = "\u9ed1\u4f53";
	tbar.style.fontSize = 16;
	tbar.style.borderStyle = "solid";
	tbar.style.borderColor = "#ccc";
	tbar.style.borderWidth = "1px 1px 1px 1px";
	tbar.style.lineHeight = 1.8;
	tbar.appendChild(title);
	container.appendChild(tbar);
	for (var k = 0; k < this.bars.length; k++) {
		var bar = document.createElement("div");
		bar.setAttribute("id", "bar" + k);
		bar.style.height = 25;
		bar.style.background = "#3586BD url(images/titlebg1.gif) repeat-x";
		bar.style.color = "white";
		bar.style.margin = 0;
		bar.style.cursor = "pointer";
		bar.style.fontFamily = "\u9ed1\u4f53";
		bar.style.fontSize = 14;
		bar.style.textAlign = "center";
		bar.style.lineHeight = 1.8;
		bar.style.borderStyle = "solid";
		bar.style.borderColor = "#ccc";
		bar.style.borderWidth = "0 1px 1px 1px";
		bar.innerHTML = this.bars[k].title;
		var barBox = document.createElement("div");
		barBox.setAttribute("id", "barBox" + k);
		//barBox.style.backgroundColor = "lightyellow";
		barBox.style.fontSize = 12;
		barBox.style.margin = 0;
		barBox.style.textAlign = "center";
		//barBox.style.overflowY = "scroll";
		for (var i = 0; i < this.bars[k].items.length; i++) {
			/**var icon = document.createElement("image");
			icon.src = this.bars[k].items[i].icon;
			icon.setAttribute("valign","top");
			barBox.appendChild(icon);
			var item = document.createElement("li");
			item.style.listStyle = "none";
			item.style.lineHeight = 1.5;**/
			/**var a = document.createElement("a");
			a.href = this.bars[k].items[i].href;
			a.target = this.bars[k].items[i].target;
			a.innerHTML = this.bars[k].items[i].title;
			a.style.textDecoration = "none";
			a.style.background = "url(images/" + this.bars[k].items[i].icon + ") no-repeat top";
			a.style.paddingTop = 35;
			a.style.lineHeight = 1.5;
			a.style.color = "#810081";
			a.style.display = "block";**/
			var a = document.createElement("div");
			a.setAttribute("url", this.bars[k].items[i].href);
			a.innerHTML = this.bars[k].items[i].title;
			a.style.lineHeight = 2;
			a.attachEvent("onclick", function () {
				var sender = window.event.srcElement;
				//ff(sender.innerHTML,sender.getAttribute('url'));
			});
			barBox.appendChild(a);
		}
		if (k == 0) {
			barBox.style.display = "block";
			barBox.style.height = parseInt(container.style.height) - len * 26 - 60;
		} else {
			barBox.style.display = "none";
		}
		container.appendChild(bar);
		container.appendChild(barBox);
	}
	for (var k = 0; k < len; k++) {
		var barx = document.getElementById("bar" + k);
		barx.attachEvent("onclick", function () {
			var sender = window.event.srcElement;
			for (var m = 0; m < len; m++) {
				var box = document.getElementById("barBox" + m);
				if (sender.id.substring(3) == m) {
					box.style.display = "block";
					box.style.height = parseInt(container.style.height) - len * 26 - 60;
				} else {
					box.style.display = "none";
					box.style.height = 0;
				}
			}
		});
	}
	var bbar = document.createElement("div");
	bbar.style.height = bbarH;
	bbar.style.background = "#3586BD url(images/bar.png) repeat-x";
	bbar.style.color = "white";
	bbar.style.borderStyle = "solid";
	bbar.style.borderColor = "#ccc";
	bbar.style.borderWidth = "1px 1px 1px 1px";
	container.appendChild(bbar);
};
function Bar(title, icon) {
	this.title = title;
	this.icon = icon;
	this.items = [];
}
function Item(title, icon, href) {
	this.title = title;
	this.icon = icon;
	this.href = href;
	this.target = "rightFrm";
}
Bar.prototype.add = function (title, icon, href) {
	this.items.push(new Item(title, icon, href));
};

   

    接下来看一个例子:

<html> 
	<head> 
		<script type="text/javascript" src="menu.js"></script> 
	</head> 
	<body>
		<div id="left" style="width:180px;height:600"></div>
		<script type="text/javascript"> 
			var menu = new Menu();
	    		var bar1 = menu.add('菜单一','aaa');
            			bar1.add('asd','asd',"asda");
	    		bar1.add('asd','asd',"asda");
 	    		var bar2 = menu.add('菜单二','aaa');
            			bar2.add('asd','asd',"asda");
	    		bar2.add('asd','asd',"asda");
 	    		var bar3 = menu.add('菜单三','aaa');
            			bar3.add('asd','asd',"asda");
	    		bar3.add('asd','asd',"asda");
	    		menu.render('left');
        		</script> 
	</body> 
</html>