JavaScriptNodeTree导航栏(菜单项JSON类型/自制)
2023-06-13 09:14:45 时间
最近比较清闲,自己做了个JavaScriptNodeTree,网上类似的东西其实挺多的,功能也比这个全,我做这个纯粹为了练练手。
图标可以自定义(16X16),菜单项完全是JSON类型定义的,方便修改。
界面:
使用方法:
1、将NodeTree-JSON.js以及CSS文件夹复制到项目中并引用。
2、引用JQuery框架。
3、修改NodeTree-JSON.js中的NodeTreeMenu菜单项,以下是简单说明。
复制代码代码如下:
图标可以自定义(16X16),菜单项完全是JSON类型定义的,方便修改。
界面:
使用方法:
1、将NodeTree-JSON.js以及CSS文件夹复制到项目中并引用。
2、引用JQuery框架。
3、修改NodeTree-JSON.js中的NodeTreeMenu菜单项,以下是简单说明。
varNodeTreeMenu=[
//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的地方添加如下代码:
<ulid="NodeTree-JSON">
</ul>
5、在页面中添加如下代码:
<scripttype="text/javascript">
$(function(){
NodeTree("mainFrame");
});
</script>或者是(二者任选其一):
<scripttype="text/javascript">
window.onload=function(){
NodeTree("mainFrame");
}
</script>
NodeTree("mainFrame")中,mainFrame是目标frame的name,比如说导航栏在左边的frame里,右边显示的frame的name=“mainFrame”。
实在不理解看看demo.htm的代码,就明白了。
附上源代码,感兴趣的可以看看~
http://dl.vmall.com/c0b7wda1ps
喜欢请点一下推荐,你的支持是我最大的动力!
相关文章
- Flask 学习-26.JWT(JSON Web Token)生成Token
- VS Code settings.json 10 个高(装)阶(杯)配置!
- 【说站】js中的JSON是什么
- java json数组转json对象_json对象数组
- 用FastJson将JSON字符串转Json[通俗易懂]
- 高效JSON解析方案
- Postman发送JSON格式的post请求
- SpringMVC接收JSON数组
- Pretty Json 插件 - JSON格式化
- Go语言圣经–结构体,JSON习题详解编程语言
- JQuery处理json与ajax返回JSON实例详解编程语言
- MySQL存储JSON格式的数据(mysql存json格式)
- 利用Redis轻松存储JSON数据(redis存储json)
- 中处理json使用Linux脚本处理JSON格式数据(在linux脚本)
- Linux安装JSON:快速实现让你快乐起来!(linux安装json)
- MySQL中JSON查询的方法和实践(mysql中json查询)
- Oracle 数据库如何利用JSON格式保存信息(json oracle)
- Redis中数据批量转换为JSON格式(redis 转json)
- JSON学习笔记
- JSON入门指南想了解json的朋友可以看下
- Firebug字幕文件JSON地址获取代码
- jQuery的ajax传参巧用JSON使用示例(附Json插件)
- jquery处理json数据实例分析
- ThinkPHP通过AJAX返回JSON的两种实现方法