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 select(列表)的操作(取值/赋值)
Mar 16 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
js代码验证手机号码和电话号码是否合法
Jul 30 Javascript
JavaScript中获取Radio被选中的值
Nov 11 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
浅谈jquery上下滑动的注意事项
Oct 13 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
JavaScript插件Tab选项卡效果
Nov 14 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
Vue组件Draggable实现拖拽功能
Dec 01 Javascript
JavaScript 与 TypeScript之间的联系
Nov 27 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 include,include_once,require,require_once
2008/09/05 PHP
php数组的概述及分类与声明代码演示
2013/02/26 PHP
PHP加Nginx实现动态裁剪图片方案
2014/03/10 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
Python中的模块和包概念介绍
2015/04/13 Python
Python ldap实现登录实例代码
2016/09/30 Python
pygame游戏之旅 添加游戏暂停功能
2018/11/21 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
Python运行异常管理解决方案
2020/03/09 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
浅析Python 多行匹配模式
2020/07/24 Python
Python urllib库如何添加headers过程解析
2020/10/05 Python
详解pandas赋值失败问题解决
2020/11/29 Python
HTML5 weui使用笔记
2019/11/21 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
西北政法大学自主招生自荐信
2014/01/29 职场文书
毕业生自荐书
2014/02/02 职场文书
护理专业自荐书
2014/06/04 职场文书
工作失误检讨书(3篇)
2014/10/11 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python