JavaScript NodeTree导航栏(菜单项JSON类型/自制)


Posted in Javascript onFebruary 01, 2013

最近比较清闲,自己做了个JavaScript NodeTree,网上类似的东西其实挺多的,功能也比这个全,我做这个纯粹为了练练手。

图标可以自定义(16X16),菜单项完全是JSON类型定义的,方便修改。
界面
JavaScript NodeTree导航栏(菜单项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 相关文章推荐
学习YUI.Ext 第二天
Mar 10 Javascript
javascript动态加载实现方法一
Aug 22 Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
js检测用户输入密码强度
Oct 22 Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 Javascript
详解node中创建服务进程
May 09 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 Javascript
checkbox在vue中的用法小结
Nov 13 Javascript
通过实例学习React中事件节流防抖
Jun 17 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 #Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 #Javascript
js解析与序列化json数据(三)json的解析探讨
Feb 01 #Javascript
js解析与序列化json数据(二)序列化探讨
Feb 01 #Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 #Javascript
百度地图api应用标注地理位置信息(js版)
Feb 01 #Javascript
jquery select动态加载选择(兼容各种浏览器)
Feb 01 #Javascript
You might like
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
ThinkPHP中Session用法详解
2014/11/29 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
web 页面分页打印的实现
2009/06/22 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
2018/09/30 Javascript
js实现随机点名程序
2020/09/17 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
python 文件操作删除某行的实例
2017/09/04 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
Django模型中字段属性choice使用说明
2020/03/30 Python
keras CNN卷积核可视化,热度图教程
2020/06/22 Python
自荐信需注意事项
2014/01/25 职场文书
期末学生评语大全
2014/04/24 职场文书
关于安全演讲稿
2014/05/09 职场文书
安全施工责任书
2014/08/25 职场文书
倡议书的写法
2014/08/30 职场文书
英语导游词
2015/02/13 职场文书
安全教育第一课观后感
2015/06/17 职场文书
Python3 如何开启自带http服务
2021/05/18 Python
MySQL窗口函数的具体使用
2021/11/17 MySQL
聊聊Python String型列表求最值的问题
2022/01/18 Python