Menu arborescent réactif javascript pur effect_javascript compétences

Bref tutoriel
aimaraJS est un plug-in de structure d'arborescence de répertoires multi-niveaux réactif en javascript pur très pratique. L'arborescence de répertoires peut ajouter et supprimer dynamiquement des nœuds d'arborescence, créer une structure arborescente à plusieurs niveaux, chaque nœud peut avoir un menu contextuel par clic droit et différentes icônes peuvent être configurées sur chaque nœud. Ses fonctionnalités sont :

• Peut créer une structure arborescente de base et la restituer.
• Les nœuds d'arbre peuvent être ajoutés et supprimés en temps réel.
• Différentes icônes de nœuds d'arbre peuvent être affichées.
• Vous pouvez personnaliser les événements lorsque les nœuds de l'arborescence sont ouverts et fermés.
• Un menu contextuel par clic droit peut être créé sur chaque nœud de l'arborescence.

Comment utiliser
Pour utiliser ce plug-in de diaporama, vous devez introduire les fichiers Aimara.css et Aimara.js dans la page.

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

Structure HTML

Vous pouvez utiliser un dc6dce4a544fdca2df29d5ac0ea9906b vide comme conteneur pour cette arborescence de répertoires.

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

JAVASCRIPT

Ensuite, vous pouvez initialiser le plug-in de l'arborescence des répertoires via la méthode suivante. Vous pouvez créer des nœuds d'arborescence et des nœuds enfants, puis les restituer. Des nœuds peuvent être ajoutés à la structure arborescente avant ou après le rendu de l'arborescence.

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

Créer un menu contextuel pour les nœuds d'arborescence

Vous pouvez créer un menu contextuel par clic droit via la méthode suivante.

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

Ensuite initialisez l'arborescence grâce à la méthode suivante :

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

Ajoutez un nœud d'arborescence en temps réel après le rendu de la structure arborescente :

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

Ce qui précède est l'intégralité du contenu de cet article. Je vous présente une implémentation purement js responsive d'effets spéciaux pour une barre de menus arborescente. J'espère que vous l'aimerez.