一个js的menu和tree的例子

pignut_wang

浏览: 214074 次
性别:
来自: 深圳

最近访客更多访客>>

H1373165135

plum1999

boguang2000

wang583557971

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

js tree menu

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

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

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

js 代码

var divData = "" +
"<div id='menu1' label='1' value='1' backgroundImage='url(images/home.gif)'>div>" +
"<div id='menu2' label='2' value='2' backgroundImage='url(images/home.gif)'>div>"+
"<div id='menu3' label='3' value='3' backgroundImage='url(images/home.gif)'>"+
"<div id='menu31' label='3-1' value='31' backgroundImage='url(images/home.gif)'>div>"+
"<div id='menu32' label='3-2' value='32' backgroundImage='url(images/home.gif)'>div>"+
"<div id='menu33' label='3-3' value='33' backgroundImage='url(images/home.gif)'>"+
"<div id='menu331' label='3-3-1' value='331' backgroundImage='url(images/home.gif)'>div>"+
"<div id='menu332' label='3-3-2' value='332' backgroundImage='url(images/home.gif)'>div>"+
"<div id='menu333' label='3-3-3' value='333' backgroundImage='url(images/home.gif)'>div>"+
"div>"+
"div>"+
"<div id='menu4' label='4' value='4' backgroundImage='url(images/home.gif)'>"+
"<div id='menu41' label='4-1' value='41' backgroundImage='url(images/home.gif)'>div>"+
"<div id='menu42' label='4-2' value='42' backgroundImage='url(images/home.gif)'>div>"+
"<div id='menu43' label='4-3' value='43' backgroundImage='url(images/home.gif)'>div>"+
"div>";

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

js 代码

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

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

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

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

代码

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

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

js 代码

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

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

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

html代码

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

具体的看demo吧

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

htmlMenu.rar (27.6 KB)
下载次数: 1054

查看图片附件

分享到：

敏捷开发(Agile Development)简介 | 名词解释

2007-06-22 12:40
浏览 7198
评论(7)
论坛回复 / 浏览 (6 / 11758)
分类:Web前端
查看更多

7 楼 pignut_wang 2007-07-24

metaphy
楼主中间还引用了SpryMenuBar.js，
能否简单介绍一下它的用法？

这个菜单其实就是利用spry的menu实现的,只是在外面包了一层对数据的处理,以便可以和tree使用相同的数据,从而实现不同的展现效果,
你直接下载一个spry看看,里面有demo的,很容易看懂

那个tree是以前的一个项目中需要用到,就自己写了一个,扩展性不太好,但是bug应该不多,至少目前我还没有发现,呵呵

6 楼 metaphy 2007-07-24

人呢？
菜单重复那个搞定

createMenu 函数改一下,加个continue
		if(temp.childNodes.length > 0 ) {
			createMenu(menu,temp,clickMethod);
			continue ;
		}
			
		var item1 = createMenuItemElement(temp,clickMethod);	
			
		addMenuItem(menu,item1);

5 楼 jonde 2007-07-23

太感谢楼主的..我正愁着怎么写导航栏呢....

4 楼 metaphy 2007-07-23

还有，如果有3级菜单，上一个2级菜单将会重复。

var divData = "" +
		"<div id='menu1' label='File' value='1' backgroundImage='url(images/home.gif)'></div>" +
		"<div id='menu2' label='Edit' value='2'  ></div>"+
		"<div id='menu3' label='Search' value='3'  >"+
			"<div id='menu31' label='Find'  value='31' ></div>"+
			"<div id='menu32' label='Replace'  value='32' ></div>"+
			"<div id='menu33' label='Find Next'  value='33' >"+
				"<div id='menu331' label='Find Next1'  value='331' ></div>"+
				"<div id='menu332' label='Find Next2'  value='332' ></div>"+
				"<div id='menu333' label='Find Next3'  value='333' ></div>"+
			"</div>"+
		"</div>"+
		"<div id='menu4' label='View'  value='4' >"+
			"<div id='menu41' label='Word Wrap'  value='41' ></div>"+
			"<div id='menu42' label='Spell Check'  value='42' ></div>"+
			"<div id='menu43' label='Line Number'  value='43' ></div>"+
		"</div>";

3 楼 metaphy 2007-07-23

最近写个小系统练练手，缺个菜单，所以就拿来直接用了，主要也是学习的目的。

楼主中间还引用了SpryMenuBar.js，
能否简单介绍一下它的用法？

2 楼 pignut_wang 2007-07-23

呵呵,代码是有点不好看,有些垃圾函数没有删除
如果需要修改,有不明白的地方,可以直接跟帖问我

1 楼 metaphy 2007-07-23

感谢！
代码有点点的乱。

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论