Pure javascript response tree menu, javascript response tree

Pure javascript response tree menu, javascript response tree

Brief tutorial
AimaraJS is a very practical pure javascript responsive multilevel directory tree plug-in. The directory tree can dynamically add and delete Tree nodes and create a multi-level tree structure. Each node can have a context menu with different icons configured on each node. It has the following features:

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

 

Usage
Use this plug-in to import the aimara.css and Aimara. js files to the page.

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

HTML Structure

You can use an empty <div> 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 subnodes 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 a tree structure var tree = createTree ('div _ tree', 'white'); // create a tree node node1 var node1 = tree. createNode ('first node', false, 'images/star.png ', null); // Add node1 to the tree structure node1.createChildNode ('first child node', false, 'images/blue_key.png ', null, null); // renders the tree structure. drawTree (); // create the second node node1 = tree. createNode ('second node', false, 'images/star.png ', null); node1.createChildNode ('second child node', false, 'images/blue_key.png', null, null) ;}; </script>

Create context menu for Tree nodes

You can use the following method to create a context menu.

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 using the following method:

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

After the tree structure is rendered, add a tree node in Real Time:

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

The above is all the content in this article. We have introduced a js-only responsive special effect for implementing the tree structure menu bar. I hope you will like it.