Pure javascript responsive tree menu effect_javascript skills

Brief Tutorial
aimaraJS is a very practical pure javascript responsive multi-level directory tree structure plug-in. The directory tree can dynamically add and delete tree nodes, create a multi-level tree structure, each node can have a right-click context menu, and different icons can be configured on each node. Its features are:

• Can create a basic tree structure and render it.
• Tree nodes can be added and deleted in real time.
• Different tree node icons can be displayed.
• You can customize events when tree nodes are opened and closed.
• Right-click context menu can be created on each tree node.

How to use
To use this slideshow plug-in, you need to introduce the Aimara.css and Aimara.js files into the page.

<link rel="stylesheet" href="css/Aimara.css" />
<script src="js/Aimara.js"></script>       

HTML structure

You can use an empty

as the container for this directory tree.

<div id="div_tree"></div>       

JAVASCRIPT

Then you can initialize the directory tree plug-in through the following method. You can create some tree nodes and child nodes and then render them. Nodes can be added to the tree structure before or after the tree is rendered.

<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>        

Create context menu for tree nodes

You can create a right-click context menu through the following method.

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();
       }
      }
     ]
    }
   }
  ]
 }
};        

Then initialize the tree structure through the following method:

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

Add a tree node in real time after the tree structure is rendered:

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

The above is the entire content of this article. I introduce to you a pure js responsive implementation of special effects for a tree structure menu bar. I hope you like it.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn