JavaScript NodeTree导航栏(菜单项JSON类型/自制)
更新时间：2013年02月01日 15:16:12 作者：
利用闲暇时间自己做了个JavaScript NodeTree，网上有很多类似的效果，本例主要是练练手，巩固下知识，感兴趣的朋友可以了解下，或许对你学习NodeTree导航栏有所帮助,认为好的就分享喽
最近比较清闲，自己做了个JavaScript NodeTree，网上类似的东西其实挺多的，功能也比这个全，我做这个纯粹为了练练手。
图标可以自定义（16X16），菜单项完全是JSON类型定义的，方便修改。
界面：
使用方法：
1、将NodeTree-JSON.js以及CSS文件夹复制到项目中并引用。
2、引用JQuery框架。
3、修改NodeTree-JSON.js中的NodeTreeMenu菜单项，以下是简单说明。
var NodeTreeMenu = [
//id:节点ID，pId：父节点Id，没有父节点则为0，name:显示名称，img:显示图标，open:只有父节点存在此属性，子节点默认是否展开，file:只有子节点由此属性，点击后打开的页面
{ id: 1, pId: 0, name: "父节点一", img: "CSS/Images/001.png", open: true },
{ id: 101, pId: 1, name: "子节点一", img: "CSS/Images/002.png", file: "http://www.cnblogs.com/nnzfly/" }//注意最后一行数据末尾一定不能加逗号！否则IE下报错！
]
4、在要显示NodeTree的地方添加如下代码：
<ul id="NodeTree-JSON">
</ul>
5、在页面中添加如下代码：
<script type="text/javascript">
$(function () {
NodeTree("mainFrame");
});
</script>或者是（二者任选其一）：
<script type="text/javascript">
window.onload=function (){
NodeTree("mainFrame");
}
</script>
NodeTree("mainFrame") 中，mainFrame是目标frame的name，比如说导航栏在左边的frame里，右边显示的frame的name=“mainFrame”。
实在不理解看看demo.htm的代码，就明白了。
附上源代码，感兴趣的可以看看～
http://dl.vmall.com/c0b7wda1ps
喜欢请点一下推荐，你的支持是我最大的动力！
图标可以自定义（16X16），菜单项完全是JSON类型定义的，方便修改。
界面：
使用方法：
1、将NodeTree-JSON.js以及CSS文件夹复制到项目中并引用。
2、引用JQuery框架。
3、修改NodeTree-JSON.js中的NodeTreeMenu菜单项，以下是简单说明。
复制代码 代码如下:
var NodeTreeMenu = [
//id:节点ID，pId：父节点Id，没有父节点则为0，name:显示名称，img:显示图标，open:只有父节点存在此属性，子节点默认是否展开，file:只有子节点由此属性，点击后打开的页面
{ id: 1, pId: 0, name: "父节点一", img: "CSS/Images/001.png", open: true },
{ id: 101, pId: 1, name: "子节点一", img: "CSS/Images/002.png", file: "http://www.cnblogs.com/nnzfly/" }//注意最后一行数据末尾一定不能加逗号！否则IE下报错！
]
4、在要显示NodeTree的地方添加如下代码：
复制代码 代码如下:
<ul id="NodeTree-JSON">
</ul>
5、在页面中添加如下代码：
复制代码 代码如下:
<script type="text/javascript">
$(function () {
NodeTree("mainFrame");
});
</script>或者是（二者任选其一）：
<script type="text/javascript">
window.onload=function (){
NodeTree("mainFrame");
}
</script>
NodeTree("mainFrame") 中，mainFrame是目标frame的name，比如说导航栏在左边的frame里，右边显示的frame的name=“mainFrame”。
实在不理解看看demo.htm的代码，就明白了。
附上源代码，感兴趣的可以看看～
http://dl.vmall.com/c0b7wda1ps
喜欢请点一下推荐，你的支持是我最大的动力！
相关文章
这篇文章介绍了JavaScript图片放大技术(放大镜)实现代码，有需要的朋友可以参考一下2013-11-11
这篇文章主要介绍了javascript简单写的判断电话号码实例的相关资料,需要的朋友可以参考下2017-05-05
本文主要介绍了webpack hash持久化的原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
这篇文章主要介绍了JavaScript中使用参数个数实现重载功能,需要的朋友可以参考下2017-09-09
最近要在项目中使用Knockoutjs，因此今天就首先研究了一下Knockoutjs的环境搭建，并进行了一个简单的测试,需要的朋友可以了解下2012-11-11
相信有C++、C#或Java等编程经验的各位，对于this关键字再熟悉不过了。由于Javascript是一种面向对象的编程语言，它和C++、C#或Java一样都包含this关键字，接下来我们将向大家介绍Javascript中的this关键字2012-08-08
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
这篇文章主要介绍了js日期相关函数dateAdd,dateDiff,dateFormat等介绍,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了新手如何快速理解js异步编程，异步编程从早期的 callback、事件发布\订阅模式到 ES6 的 Promise、Generator 在到 ES2017 中 async，看似风格迥异，但是还是有一条暗线将它们串联在一起的，,需要的朋友可以参考下2019-06-06
JavaScript数据类型和变量_动力节点Java学院整理
这篇文章主要为大家详细介绍了JavaScript数据类型和变量的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要为大家详细介绍了js制作轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
最新评论