Menu arborescent réactif javascript pur effect_javascript compétences-js tutoriel-php.cn

Menu arborescent réactif javascript pur effect_javascript compétences

WBOY

Libérer： 2016-05-16 15:33:00

original

1532 Les gens l'ont consulté

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>

Copier après la connexion

Structure HTML

Vous pouvez utiliser un

vide comme conteneur pour cette arborescence de répertoires.

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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

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

Copier après la connexion

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');

Copier après la connexion

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.