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折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
Jan 22 Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
JQuery select(下拉框)操作方法汇总
Apr 15 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 Javascript
js学习阶段总结(必看篇)
Jun 16 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
vue 利用路由守卫判断是否登录的方法
Sep 29 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 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
php数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
php中通过curl smtp发送邮件
2012/06/05 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
jQuery插件开发基础简单介绍
2013/01/07 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
Vue中img的src属性绑定与static文件夹实例
2017/05/18 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
p5.js入门教程之键盘交互
2018/03/19 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
正宗的澳大利亚Ugg靴子零售商:UGG Express
2020/04/19 全球购物
夜大毕业生自我评价分享
2013/11/10 职场文书
工厂保安员岗位职责
2014/01/31 职场文书
股东协议书
2014/04/14 职场文书
音乐教师求职信
2014/06/28 职场文书
学籍证明模板
2014/11/21 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
导游词之河北野三坡
2019/12/11 职场文书
Vue自定义铃声提示音组件的实现
2022/01/22 Vue.js