Pure JavaScript Response-Tree menu effect _javascript technique

Brief tutorial
Aimarajs is a very useful pure JavaScript response-type Multilevel directory tree structure plug-in. The tree node can be dynamically added and deleted by the directory tree, you can make a multilevel tree structure, each node can have a right-click context menu, and each node can be configured with different icons. It is characterized by:

• You can create a basic tree structure and render it.
• Tree nodes can be added and deleted in real time.
• You can display a different tree node icon.
• You can customize events when the tree node is turned on and off.
• A right-click context menu can be made on each tree node.

How to use
Using this slide plugin requires the introduction of AIMARA.CSS and Aimara.js files in the page.

<link rel= "stylesheet" href= "Css/aimara.css"/> <script src=
"Js/aimara.js" ></script>       

HTML structure

You can use an empty <div> as a container for this directory tree.

<div id= "Div_tree" ></div>       

Javascript

You can then initialize the directory tree plug-in in the following ways. 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 () {
    //create tree structure
    var trees = createtree (' div_ Tree ', ' white ');
    Create tree node Node1
    var node1 = Tree.createnode (' A ', false, ' images/star.png ', null,null,null);
    Node1 added to the tree structure
    (' Node1.createchildnode ', false, ' images/blue_key.png ', null,null);
    Render tree structure
    tree.drawtree ();
    Create a second tree node
    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 a context menu for a tree node

You can create a right-click context menu in the following ways.

var contex_menu = {' Context1 ': {elements: [{text: ' Node Actions ', Icon: ' Images/blue_key.png ', a Ction:function (node) {}, submenu: {elements: [{text: ' Toggle node ', Icon: ' Imag
       Es/leaf.png ', action:function (node) {Node.togglenode (); }, {text: ' Expand Node ', Icon: ' Images/leaf.png ', action:function (Node) {n
       Ode.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, ' Co
       Ntext1 ');
        }, {text: ' Delete child Nodes ', icon: ' Images/delete.png ', action:function (node) {
       Node.removechildnodes ();        
 }
      }
     ]
    }
   }
  ]
 }
};

The tree structure is then initialized by the following method:

Tree = Createtree (' div_tree ', ' white ', contex_menu);
Tree.drawtree ();   

Add a tree node in real time after the tree structure renders:

The above is the entire content of this article, for you to introduce a pure JS response to the implementation of the tree structure menu bar effects, I hope you like.