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.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
Jun 28 Javascript
Jquery插件分享之气泡形提示控件grumble.js
May 20 Javascript
jquery手风琴特效插件
Feb 04 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
js 显示日期时间的实例(时间过一秒加1)
Oct 25 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 Javascript
Vue-Router模式和钩子的用法
Feb 28 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
Webpack的dll功能使用
Jun 28 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 Javascript
JavaScript实现音乐播放器
Aug 14 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、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
php中json_encode UTF-8中文乱码的更好解决方法
2014/09/28 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
超简单的jquery的AJAX用法
2010/05/10 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
jQuery检测某个元素是否存在代码分享
2015/07/09 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
Python 文件管理实例详解
2015/11/10 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
python第三方库学习笔记
2020/02/07 Python
Pytest mark使用实例及原理解析
2020/02/22 Python
美国最大网上鞋店:Zappos
2016/07/25 全球购物
Dockers美国官方网站:卡其裤、男士服装、鞋及配件
2016/11/22 全球购物
商务邀请函范文
2014/01/14 职场文书
《卖木雕的少年》教学反思
2014/04/11 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
产品委托授权书范本
2014/09/16 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
仙境之桥观后感
2015/06/16 职场文书
CSS中float高度塌陷问题的四种解决方案
2022/04/18 HTML / CSS