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 相关文章推荐
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
javascript中万恶的function实例分析
May 25 Javascript
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 Javascript
jqeury-easyui-layout问题解决方法
Mar 24 Javascript
jQuery插件编写步骤详解
Jun 03 Javascript
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
Nov 30 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 Javascript
[jQuery] 事件和动画详解
Mar 05 jQuery
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
微信小程序之几种常见的弹框提示信息实现详解
Jul 11 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原理之Session Gc的一个小概率Notice
2011/04/12 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
JS Array对象入门分析
2008/10/30 Javascript
JQuery 文本框使用小结
2010/05/22 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
js内存泄露的几种情况详细探讨
2013/05/31 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
详解jquery和vue对比
2019/04/16 jQuery
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
简单介绍Python中的RSS处理
2015/04/13 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
Python while循环使用else语句代码实例
2020/02/07 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
九年级数学教学反思
2014/02/02 职场文书
《中彩那天》教学反思
2014/02/22 职场文书
葬礼司仪主持词
2014/03/31 职场文书
2019年“我为祖国点赞”演讲稿(3篇)
2019/09/26 职场文书
导游词之天津盘山
2019/11/01 职场文书
基于python实现银行管理系统
2021/04/20 Python
Python上下文管理器Content Manager
2021/06/26 Python