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 相关文章推荐
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
Jul 20 Javascript
js下将字符串当函数执行的方法
Jul 13 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
jQuery中:enabled选择器用法实例
Jan 04 Javascript
JavaScript使用concat连接数组的方法
Apr 06 Javascript
js如何实现点击标签文字,文字在文本框出现
Aug 05 Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
bootstrap table插件的分页与checkbox使用详解
Jul 23 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 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常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
浅谈javascript的原型继承
2012/07/25 Javascript
jquery垂直公告滚动实现代码
2013/12/08 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
JS轮播图实现简单代码
2021/02/19 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
详解Python中where()函数的用法
2018/03/27 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
Python aiohttp百万并发极限测试实例分析
2019/10/26 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
html5时钟实现代码
2010/10/22 HTML / CSS
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
顶岗实习接收函
2014/01/09 职场文书
生物制药专业求职信
2014/03/11 职场文书
应届大学生自荐书
2014/06/17 职场文书
计划生育工作汇报
2014/10/28 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
Python 如何实现文件自动去重
2021/06/02 Python
OpenCV-Python实现轮廓拟合
2021/06/08 Python
python unittest单元测试的步骤分析
2021/08/02 Python
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏
MySQL如何使备份得数据保持一致
2022/05/02 MySQL