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 相关文章推荐
js的正则test,match,exec详细解析
Jan 29 Javascript
利用Keydown事件阻止用户输入实现代码
Mar 11 Javascript
jquery获取tagName再进行判断
May 29 Javascript
iframe跨域通信封装详解
Aug 11 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
Nov 26 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
Vuex的API文档说明详解
Feb 05 Javascript
ES2020 已定稿,真实场景案例分析
May 25 Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 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 多线程上下文中安全写文件实现代码
2009/12/28 PHP
PHP保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
如何判断php mysqli扩展类是否开启
2016/12/24 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
2015/09/12 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
JS字典Dictionary类定义与用法示例
2019/02/01 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
2020/10/31 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python MD5文件生成码
2009/01/12 Python
以一段代码为实例快速入门Python2.7
2015/03/31 Python
Python的randrange()方法使用教程
2015/05/15 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
python交互模式基础知识点学习
2020/06/18 Python
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
SQL数据库笔试题
2016/03/08 面试题
九年级科学教学反思
2014/01/29 职场文书
捐资助学倡议书
2014/04/15 职场文书
书香家庭事迹材料
2014/05/09 职场文书
平安工地汇报材料
2014/08/19 职场文书
委托书英文
2015/01/28 职场文书
mysql left join快速转inner join的过程
2021/06/30 MySQL