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 相关文章推荐
js实现从数组里随机获取元素
Jan 12 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
深入探讨前端框架react
Dec 09 Javascript
javascript针对不确定函数的执行方法
Dec 16 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
Aug 30 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
Angular中的interceptors拦截器
Jun 25 Javascript
js截取字符串功能的实现方法
Sep 27 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
JS判断用户用的哪个浏览器实例详解
Oct 09 Javascript
vuex实现购物车的增加减少移除
Jun 28 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
配置最新的PHP加MYSQL服务器
2006/10/09 PHP
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
JQuery中Bind()事件用法分析
2015/05/05 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
Bootstrap基本样式学习笔记之标签(5)
2016/12/07 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
node.js中axios使用心得总结
2017/11/29 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
实例说明Python中比较运算符的使用
2015/05/13 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
python实现画出e指数函数的图像
2019/11/21 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
给校长的建议书500字
2014/05/15 职场文书
死亡诗社观后感
2015/06/05 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python
Redis 常见使用场景
2021/08/30 Redis