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日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
Mar 01 Javascript
javascript计时器事件使用详解
Jan 07 Javascript
javascript 终止函数执行操作
Feb 14 Javascript
jQuery自定义数值抽奖活动代码
Jun 11 Javascript
javascript判断firebug是否开启的方法
Nov 23 Javascript
js获取浏览器的各种属性
Apr 27 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
JS模拟实现哈希表及应用详解
May 04 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 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
编译问题
2006/10/09 PHP
不错的PHP学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
JS学习之一个简易的日历控件
2010/03/24 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
js控制href内容的连接内容的变化示例
2014/04/30 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
2015/05/07 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
angular json对象push到数组中的方法
2018/02/27 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
跟老齐学Python之做一个小游戏
2014/09/28 Python
python实现查询IP地址所在地
2015/03/29 Python
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
python与php实现分割文件代码
2017/03/06 Python
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
《蜗牛》教学反思
2014/02/18 职场文书
社区志愿者活动总结
2014/06/26 职场文书