纯javascript响应式树形菜单效果
更新时间：2015年11月10日 09:46:43 投稿：lijiao
这篇文章主要为大家分享了纯javascript响应式树形菜单效果的简单教程，对多级目录树形菜单感兴趣的小伙伴们可以参考一下
简要教程
aimaraJS是一款非常实用的纯javascript响应式多级目录树结构插件。该目录树可以动态添加和删除树节点，可以制作多级树结构，每个节点上可以都带有右键上下文菜单，并且每个节点上都可以配置不同的图标。它的特点有：
- 可以创建一个基本的树结构并渲染它。
- 可以实时添加和删除树节点。
- 可以显示不同的树节点图标。
- 在树节点打开和关闭的时候可以自定义事件。
- 每个树节点上都可以制作右键上下文菜单。
使用方法
使用该幻灯片插件需要在页面中引入Aimara.css和Aimara.js文件。
<link rel="stylesheet" href="css/Aimara.css" /> <script src="js/Aimara.js"></script>
HTML结构
可以使用一个空的<div>来作为这个目录树的容器。
<div id="div_tree"></div>
JAVASCRIPT
然后你可以通过下面的方法来初始化该目录树插件。你可以创建一些树节点和子节点，然后渲染它们。节点可以在树被渲染之前或之后添加到树结构中。
<script type="text/javascript">
window.onload = function() {
//创建树结构
var tree = createTree('div_tree','white');
//创建树节点node1
var node1 = tree.createNode('First node',false,'images/star.png',null,null,null);
//node1添加到树结构中
node1.createChildNode('First child node', false, 'images/blue_key.png',null,null);
//渲染树结构
tree.drawTree();
//创建第二个树节点
node1 = tree.createNode('Second node',false,'images/star.png',null,null,null);
node1.createChildNode('Second child node', false, 'images/blue_key.png',null,null);
};
</script>
为树节点创建上下文菜单
可以通过下面的方法来创建一个右键上下文菜单。
var contex_menu = {
'context1' : {
elements : [
{
text : 'Node Actions',
icon: 'images/blue_key.png',
action : function(node) {
},
submenu: {
elements : [
{
text : 'Toggle Node',
icon: 'images/leaf.png',
action : function(node) {
node.toggleNode();
}
},
{
text : 'Expand Node',
icon: 'images/leaf.png',
action : function(node) {
node.expandNode();
}
},
{
text : 'Collapse Node',
icon: 'images/leaf.png',
action : function(node) {
node.collapseNode();
}
},
{
text : 'Expand Subtree',
icon: 'images/tree.png',
action : function(node) {
node.expandSubtree();
}
},
{
text : 'Collapse Subtree',
icon: 'images/tree.png',
action : function(node) {
node.collapseSubtree();
}
},
{
text : 'Delete Node',
icon: 'images/delete.png',
action : function(node) {
node.removeNode();
}
},
]
}
},
{
text : 'Child Actions',
icon: 'images/blue_key.png',
action : function(node) {
},
submenu: {
elements : [
{
text : 'Create Child Node',
icon: 'images/add1.png',
action : function(node) {
node.createChildNode('Created',false,'images/folder.png',null,'context1');
}
},
{
text : 'Create 1000 Child Nodes',
icon: 'images/add1.png',
action : function(node) {
for (var i=0; i<1000; i++)
node.createChildNode('Created -' + i,false,'images/folder.png',null,'context1');
}
},
{
text : 'Delete Child Nodes',
icon: 'images/delete.png',
action : function(node) {
node.removeChildNodes();
}
}
]
}
}
]
}
};
然后通过下面的方法来初始化树结构：
tree = createTree('div_tree','white',contex_menu);
tree.drawTree();
在树结构渲染之后实时添加一个树节点：
tree.createNode('Real Time',false,'images/leaf.png',null,null,'context1');
以上就是本文的全部内容，为大家介绍了一款纯js响应式实现树结构菜单栏的特效，希望大家喜欢。
相关文章
（兼容ff/ie）td点击背景变色特效...2007-08-08
JavaScript talbe表中指定位置插入一行的实现代码 脚本之家修正版
用js实现的在table中指定的位置插入一行，先点一下表中你想插入的位置，点击即可。2009-06-06
在开发中我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验,下面这篇文章主要给大家介绍了关于React中过渡动画的编写方式,需要的朋友可以参考下2022-10-10
本文主要介绍了TypeScript环境搭建的实现步骤，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
这篇文章主要介绍了JavaScript内存管理介绍,本文讲解了内存生命周期、JavaScript的内存分配、通过函数调用的内存分配、当内存不再需要使用时释放等内容,需要的朋友可以参考下2015-03-03
想象一个场景，就是如何根据一张图片大概提取出它的主色调呢？获取主色调后，可能会用来设置某些背景颜色，这里，利用 JS 简单获取本地图片主色调，希望对大家有所帮助2023-03-03
这篇文章主要为大家详细介绍了JavaScript原型封装轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要介绍了JS实现带提示的星级评分效果,以完整实例形式较为详细的分析了JavaScript响应鼠标事件动态变换页面元素样式的相关技巧,非常简单实用的代码,需要的朋友可以参考下2015-10-10
本文主要介绍了JavaScript函数返回值,包括基本返回值、多返回值、异步函数的返回值等,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-01-01
这篇文章主要介绍了JavaScript如何将伪数组转换成数组， 伪数组的主要特征是一个对象，并且该对象有length属性，更多参考内容，需要的小伙伴可以参考一下2022-07-07
最新评论