divmenubar.js

Js Menu and Tree 利用相同的数据实现menu和tree的例子


//注意:
// 数据中的每个Div必须为<div></div>形式,不能是<div /> 形式
// type = 'MenuBarHorizontal'    菜单项水平排布(默认)
// type = 'MenuBarVertical'        菜单项垂直排布

//从示例数据生成菜单
function initSimpleMenu(containerID)
{
	var simpleData = "" +
		"<div id='menu1' label='1' backgroundImage='url(images/home.gif)'></div>" +
		"<div id='menu2' label='2' backgroundImage='url(images/home.gif)'></div>"+
		"<div id='menu3' label='3' backgroundImage='url(images/home.gif)'>"+
			"<div id='menu31' label='3-1' backgroundImage='url(images/home.gif)'></div>"+
			"<div id='menu32' label='3-2' backgroundImage='url(images/home.gif)'></div>"+
			"<div id='menu33' label='3-3' backgroundImage='url(images/home.gif)'>"+
				"<div id='menu331' label='3-3-1' backgroundImage='url(images/home.gif)'></div>"+
				"<div id='menu332' label='3-3-2' backgroundImage='url(images/home.gif)'></div>"+
				"<div id='menu333' label='3-3-3' backgroundImage='url(images/home.gif)'></div>"+
			"</div>"+
		"</div>"+
		"<div id='menu4' label='4' backgroundImage='url(images/home.gif)'>"+
			"<div id='menu41' label='4-1' backgroundImage='url(images/home.gif)'></div>"+
			"<div id='menu42' label='4-2' backgroundImage='url(images/home.gif)'></div>"+
			"<div id='menu43' label='4-3' backgroundImage='url(images/home.gif)'></div>"+
		"</div>";
	
	return initHTMLMenu(containerID,simpleData);
}

//从html数据生成menu
//返回 : Spry.Widget.MenuBar
function initHTMLMenu(containerID,xmlData)
{
	
	var container = document.getElementById(containerID);
	if(container == null) return null;
	
	//清理容器数据
	container.id = "";
	container.innerHTML = "";
	container.onclick = null;
	var clickName = container.getAttribute("menuClick");
	
	var temp = document.createElement("DIV");
	temp.innerHTML = xmlData;
	
	if(temp.childNodes.length > 0)
	{
		var root = temp;
		var menuRoot = createMenuElement(true,container.getAttribute("type"));
		menuRoot.id = containerID;
		for(var i=0;i<root.childNodes.length;i++)
		{
			if(root.childNodes[i].toString() == "[object Text]") continue;
			createMenu(menuRoot,root.childNodes[i],clickName);
		}
	}
	container.appendChild(menuRoot);
		
	var tempMenu = new Spry.Widget.MenuBar(containerID, null);
	return tempMenu;
}

//递归调用每个节点的子节点,以支持无限级
function createMenu(parentNode,divNode,clickName)
{
	var item = createMenuItemElement(divNode,clickName);
		
	if(divNode.childNodes.length > 0)
	{
		var menu = createMenuElement(false);
		for(var j=0;j<divNode.childNodes.length;j++)
		{
			var temp = divNode.childNodes[j];
			if(temp.toString() == "[object Text]") continue;
			//alert(temp.id);
			if(temp.childNodes.length > 0)
			{
				createMenu(menu,temp,clickName);
				continue;
			}
			var item1 = createMenuItemElement(temp,clickName);	
			
			addMenuItem(menu,item1);	
		}
		addSubMenu(item,menu);
	}
	addMenuItem(parentNode,item);	
}

//生成menu 的 Element (UL)
function createMenuElement(isRoot,type)
{
	var ul = document.createElement("UL");
	if(isRoot)
	{
		var className = "MenuBarHorizontal";
		if(type) className = type;
		ul.className = className;
	}
	
	return ul;
}

//生成item的Element (LI)
function createMenuItemElement(objNode,clickName)
{
	var li = document.createElement("LI");
	var a = document.createElement("A");
	
	var span = document.createElement("SPAN");
	//alert(objNode.attributes.length);
	for (var j = 0; j < objNode.attributes.length; j++)
	{
		var attr = objNode.attributes[j];
		if(attr.value != "null" && attr.value != "" && attr.value != "false") 
		{
			//alert(attr.name + "=" + attr.value);
			if(attr.name.toLowerCase() == "backgroundimage") 
			{
				span.style.backgroundImage = attr.value;
			}
			else 
			{
				a.setAttribute(attr.name,attr.value);
			}
		}
		if(attr.name == "label") span.innerHTML = attr.value;
	}
	if(clickName)
	{
		a.onclick = function()
		{
			eval(clickName + "(li)");
		}
	}
	a.appendChild(span);
	li.appendChild(a);
	
	return li;
}

//给一个item增加下级菜单
function addSubMenu(objMenuItem,objMenu)
{
	objMenuItem.appendChild(objMenu);
	objMenuItem.firstChild.className = "MenuBarItemSubmenu";
}

//给一个菜单增加item
function addMenuItem(objMenu,objMenuItem)
{
	objMenu.appendChild(objMenuItem);
}