纯javascript响应式树形菜单效果_javascript技巧

简要教程
aimaraJS是一款非常实用的纯javascript响应式多级目录树结构插件。该目录树可以动态添加和删除树节点，可以制作多级树结构，每个节点上可以都带有右键上下文菜单，并且每个节点上都可以配置不同的图标。它的特点有：

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

使用方法
使用该幻灯片插件需要在页面中引入Aimara.css和Aimara.js文件。

HTML结构

可以使用一个空的

来作为这个目录树的容器。

JAVASCRIPT

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

为树节点创建上下文菜单

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

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

然后通过下面的方法来初始化树结构：

tree = createTree('div_tree','white',contex_menu);
tree.drawTree();   

在树结构渲染之后实时添加一个树节点：

tree.createNode('Real Time',false,'images/leaf.png',null,null,'context1'); 

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

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。

相关文章

相关视频

---

• javascript怎么将值类型强制转为字符串
• javascript中什么是位运算符
• javascript怎么判断字符串是否是数字
• 总结分享： 6 种JavaScript的打断点的方...
• 纯javascript响应式树形菜单效果_java...

• 接口与抽象类01
• 类的composer自动加载机制
• composer原理与常用命令03
• composer原理与常用命令02