Pure javascript responsive tree menu effect_javascript skills-JS Tutorial-php.cn

Pure javascript responsive tree menu effect_javascript skills

WBOY

Release： 2016-05-16 15:33:00

Original

1587 people have browsed it

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>

Copy after login

HTML structure

You can use an empty

as the container for this directory tree.

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

Copy after login

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>

Copy after login

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

Copy after login

Then initialize the tree structure through the following method:

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

Copy after login

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

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

Copy after login

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.