一个js的menu和tree的例子

利用相同的数据实现menu和tree的例子

对于相同的数据,但是在很多不同的地方,需要有不同的展现方式的时候,就需要用了

例如对于下面的数据(和标准的XML相同,只是没有根,而且每个节点必须是div)

js 代码

1. var divData = "" +   
2.         "<div id='menu1' label='1' value='1' backgroundImage='url(images/home.gif)'>div>" +   
3.         "<div id='menu2' label='2' value='2'  backgroundImage='url(images/home.gif)'>div>"+   
4.         "<div id='menu3' label='3' value='3'  backgroundImage='url(images/home.gif)'>"+   
5.             "<div id='menu31' label='3-1'  value='31' backgroundImage='url(images/home.gif)'>div>"+   
6.             "<div id='menu32' label='3-2'  value='32' backgroundImage='url(images/home.gif)'>div>"+   
7.             "<div id='menu33' label='3-3'  value='33' backgroundImage='url(images/home.gif)'>"+   
8.                 "<div id='menu331' label='3-3-1'  value='331' backgroundImage='url(images/home.gif)'>div>"+   
9.                 "<div id='menu332' label='3-3-2'  value='332' backgroundImage='url(images/home.gif)'>div>"+   
10.                 "<div id='menu333' label='3-3-3'  value='333' backgroundImage='url(images/home.gif)'>div>"+   
11.             "div>"+   
12.         "div>"+   
13.         "<div id='menu4' label='4'  value='4' backgroundImage='url(images/home.gif)'>"+   
14.             "<div id='menu41' label='4-1'  value='41' backgroundImage='url(images/home.gif)'>div>"+   
15.             "<div id='menu42' label='4-2'  value='42' backgroundImage='url(images/home.gif)'>div>"+   
16.             "<div id='menu43' label='4-3'  value='43' backgroundImage='url(images/home.gif)'>div>"+   
17.         "div>";  

   

 

把上面的数据生成一个菜单,菜单生成只是对spry的menu进行了一下包装,返回的MenuBar对象就是一个 Spry.Widget.MenuBar

 

js 代码

1. //从示例数据生成菜单   
2. var MenuBar = initHTMLMenu("menuContainer",divData);  

其中menuContainer是一个div的id,div的具体样子如下

type = 'MenuBarHorizontal'    菜单项水平排布(默认)
type = 'MenuBarVertical'      菜单项垂直排布

  其中menuClick标记点击菜单时,调用的函数,注意这里只写函数名

代码

1. <div id="menuContainer" type='MenuBarHorizontal' menuClick='menuClick'>div>  

把事例的数据生成一个tree形式

js 代码

1. //从示例数据生成树   
2. var tree = new gavinTree("treeContainer",divData);   
3.   
4. function treeTitleClick(obj)   
5. {   
6.     alert("tree::" + obj.getAttribute("label"));   
7. }  

其中 treeContainer 就是一个div的ID,用来承载生成树

treeClick用来定义,点击树的节点文字时候,调用的函数,注意只能写函数名

html代码

1. <div id="treeContainer" treeClick='treeTitleClick'>div>  

具体的看demo吧

bug1     如果有三级菜单,则其父级的2级菜单会出现重复,感谢 metaphy  的解决方案,已经更新到demo中