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 相关文章推荐
用按钮控制iframe显示的网页实现方法
Feb 04 Javascript
jquery图片放大镜功能的实例代码
Mar 26 Javascript
js style动态设置table高度
Oct 21 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
浅谈Vue的加载顺序探讨
Oct 25 Javascript
three.js中3D视野的缩放实现代码
Nov 16 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 Javascript
js实现简单的倒计时
Jan 28 Javascript
JavaScript实现筛选数组
Mar 02 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基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
详解python字节码
2018/02/07 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
丝芙兰巴西官方商城:SEPHORA巴西
2016/10/31 全球购物
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
应聘教师推荐信
2013/10/31 职场文书
西安交大自主招生自荐信
2014/01/27 职场文书
网络编辑岗位职责
2014/03/18 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
解除聘用合同证明书范本
2014/09/11 职场文书
答谢酒会主持词
2015/07/02 职场文书
升学宴学生致辞
2015/09/29 职场文书