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下判断Id是否存在的代码
Jan 06 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 Javascript
详解vue-router基本使用
Apr 18 Javascript
详解JavaScript数组过滤相同元素的5种方法
May 23 Javascript
ES6中的Promise代码详解
Oct 09 Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 Javascript
Javascript 之封装(Package)
Sep 14 Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 Javascript
js实现for循环跳过undefined值示例
Jul 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学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
2017/07/05 jQuery
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
VUE引入第三方js包及调用方法讲解
2019/03/01 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
基于js实现抽红包并分配代码实例
2019/09/19 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
[01:14]DOTA2亚洲邀请赛 ShowOpen
2015/02/07 DOTA
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
初探CSS3中的calc()功能
2015/07/14 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
线程同步的方法
2016/11/23 面试题
九年级家长会邀请函
2014/01/15 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
员工旷工检讨书
2015/08/15 职场文书
保险公司2016开门红口号集锦
2015/12/24 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers
Python实现机器学习算法的分类
2021/06/03 Python
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python
sql server 累计求和实现代码
2022/02/28 SQL Server