浏览 11758 次
|
锁定老帖子 主题：一个js的menu和tree的例子
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2007-06-22
利用相同的数据实现menu和tree的例子 对于相同的数据,但是在很多不同的地方,需要有不同的展现方式的时候,就需要用了 例如对于下面的数据(和标准的XML相同,只是没有根,而且每个节点必须是div) js 代码
把上面的数据生成一个菜单,菜单生成只是对spry的menu进行了一下包装,返回的MenuBar对象就是一个Spry.Widget.MenuBar
js 代码
其中menuContainer是一个div的id,div的具体样子如下 type = 'MenuBarHorizontal' 菜单项水平排布(默认) 其中menuClick标记点击菜单时,调用的函数,注意这里只写函数名 代码
把事例的数据生成一个tree形式 js 代码
其中 treeContainer 就是一个div的ID,用来承载生成树 treeClick用来定义,点击树的节点文字时候,调用的函数,注意只能写函数名 html代码
具体的看demo吧 bug1 如果有三级菜单,则其父级的2级菜单会出现重复,感谢 metaphy 的解决方案,已经更新到demo中
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2007-07-23
感谢！
代码有点点的乱。 |
| 返回顶楼 | |
|
发表时间：2007-07-23
呵呵,代码是有点不好看,有些垃圾函数没有删除
如果需要修改,有不明白的地方,可以直接跟帖问我 |
| 返回顶楼 | |
|
发表时间：2007-07-23
最近写个小系统练练手，缺个菜单，所以就拿来直接用了，主要也是学习的目的。
楼主中间还引用了SpryMenuBar.js， 能否简单介绍一下它的用法？ |
| 返回顶楼 | |
|
发表时间：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>"; |
| 返回顶楼 | |
|
发表时间：2007-07-24
人呢？
菜单重复那个搞定 createMenu 函数改一下,加个continue
if(temp.childNodes.length > 0 ) {
createMenu(menu,temp,clickMethod);
continue ;
}
var item1 = createMenuItemElement(temp,clickMethod);
addMenuItem(menu,item1);
|
| 返回顶楼 | |
|
发表时间：2007-07-24
metaphy
楼主中间还引用了SpryMenuBar.js， 能否简单介绍一下它的用法？ 这个菜单其实就是利用spry的menu实现的,只是在外面包了一层对数据的处理,以便可以和tree使用相同的数据,从而实现不同的展现效果, 你直接下载一个spry看看,里面有demo的,很容易看懂 那个tree是以前的一个项目中需要用到,就自己写了一个,扩展性不太好,但是bug应该不多,至少目前我还没有发现,呵呵 |
| 返回顶楼 | |
