自制的JavaScript 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

喜欢请点一下推荐，你的支持是我最大的动力！

分类: 网页前端

标签: JavaScript NodeTree 导航

作者： Leo_wl

出处： http://www.cnblogs.com/Leo_wl/

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

版权信息

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did46912

更新时间：2022-09-24 阅读：43次