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 相关文章推荐
jQuery each()小议
Mar 18 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 Javascript
常见JS验证脚本汇总
Dec 01 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
Vue2实时监听表单变化的示例讲解
Aug 30 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
Aug 14 Javascript
uni-app 自定义底部导航栏的实现
Dec 11 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针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
javascript写的一个链表实现代码
2009/10/25 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
2018/01/02 Javascript
layui的表单提交以及验证和修改弹框的实例
2019/09/09 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
python sort、sort_index方法代码实例
2019/03/28 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
Python的历史与优缺点整理
2020/05/26 Python
python的pip有什么用
2020/06/17 Python
Python接口自动化测试的实现
2020/08/28 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
中间件分为哪几类
2016/09/18 面试题
农田水利实习自我鉴定
2013/09/19 职场文书
质检员岗位职责
2013/12/17 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
商务英语求职信范文
2015/03/19 职场文书
党支部审查意见
2015/06/02 职场文书
2015元旦感言
2015/12/09 职场文书
python四种出行路线规划的实现
2021/06/23 Python
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL