简短的教程

aimarajs是个非常实际的纯Javaｓｃｒｉｐｔ响应多级目录树结构plug-in.the目录树可以动态添加和删除树节点，并能产生多层次树结构。每个节点都可以有一个右键单击上下文菜单，每个节点都可以用不同的图标配置：

您可以创建一个基本树结构并呈现它。
树节点可以实时添加和删除。
可以显示不同的树节点图标。
可以在树节点打开和关闭时自定义事件。
可以在每个树节点上创建右键上下文菜单。



使用方法

幻灯片的插件的使用需要引进Aimara.css和aimara.js在页面文件。









HTML结构

空目录可以用作目录树的容器。







Javaｓｃｒｉｐｔ

然后你可以用下面的方法初始化目录树插件。你可以创建一些树节点和子节点，然后渲染它们。节点可以在树之前或之后被添加到树结构中。





在window.onload =函数（）{
创建树结构
VAR树= createtree（'div_tree '，' '）；
/ /创建树节点node1
VaR NODE1 = tree.createnode（第一节点，虚假，'images /明星。PNG，空，空，空的）；
/ /节点添加到树结构
node1.createchildnode（第一个子节点的，虚假的，'images / blue_key。PNG，null，null）；
呈现树结构
Tree.drawTree（）；
第二个/创建树节点
NODE1 = tree.createnode（第二节点，假，'images /明星。PNG，空，空，空的）；
node1.createchildnode（第二子节点的，虚假的，'images / blue_key。PNG，null，null）；
}；




为树节点创建上下文菜单

下面的方法可以用来创建一个右键上下文菜单。




无功contex_menu = { {
context1：{
元素：{
{
正文：'node行动，
图标：'images / blue_key PNG，
作用：函数（节点）{

}，
子菜单：{
元素：{
{
正文：触发节点，
图标：'images /叶PNG，
作用：函数（节点）{
Node.toggleNode（）；
}
}，
{
正文：'expand节点，
图标：'images /叶PNG，
作用：函数（节点）{
Node.expandNode（）；
}
}，
{
正文：'collapse节点，
图标：'images /叶PNG，
作用：函数（节点）{
Node.collapseNode（）；
}
}，
{
正文：'expand子树，
图标：'images / PNG的树，
作用：函数（节点）{
Node.expandSubtree（）；
}
}，
{
正文：'collapse子树，
图标：'images / PNG的树，
作用：函数（节点）{
Node.collapseSubtree（）；
}
}，
{
正文：'delete节点，
图标：'images /删除PNG，
作用：函数（节点）{
Node.removeNode（）；
}
}，
}
}
}，
{
正文：儿童行为，
图标：'images / blue_key PNG，
作用：函数（节点）{

}，
子菜单：{
元素：{
{
正文：'创建子节点，
图标：'images / ADD1 PNG，
作用：函数（节点）{
Node.createChildNode（'created，虚假，'images /文件夹png，null，'context1）；
}
}，
{
正文：'创建1000个子节点的，
图标：'images / ADD1 PNG，
作用：函数（节点）{
对于（var i = 0；i < 1000；i + +）
Node.createChildNode（'created，虚假，我+，'images /文件夹png，null，'context1）；
}
}，
{
正文：'delete子节点，
图标：'images /删除PNG，
作用：函数（节点）{
Node.removeChildNodes（）；
}
}
}
}
}
}
}
}；



然后树结构用下面的方法初始化：




树= createtree（'div_tree '，' '，contex_menu）；
Tree.drawTree（）；


在树结构呈现后实时添加一个树节点。




Tree.createNode（真正的时间的，虚假的，'images /叶。PNG，零，零，'context1）；


以上是本文的全部内容，为大家介绍一个纯js响应树结构菜单栏特效，希望大家喜欢。