Reiner Javascript-Responsive-Tree-Menüeffekt_Javascript-Fähigkeiten-js-Tutorial-php.cn

Reiner Javascript-Responsive-Tree-Menüeffekt_Javascript-Fähigkeiten

WBOY

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

Original

1531 Leute haben es durchsucht

Kurzes Tutorial
AimaraJS ist ein sehr praktisches, reines Javascript-responsives mehrstufiges Verzeichnisbaumstruktur-Plug-in. Der Verzeichnisbaum kann Baumknoten dynamisch hinzufügen und löschen, eine mehrstufige Baumstruktur erstellen, jeder Knoten kann über ein Kontextmenü mit der rechten Maustaste verfügen und auf jedem Knoten können unterschiedliche Symbole konfiguriert werden. Seine Funktionen sind:

Kann eine grundlegende Baumstruktur erstellen und rendern.
Baumknoten können in Echtzeit hinzugefügt und gelöscht werden.
Es können verschiedene Baumknotensymbole angezeigt werden.
Sie können Ereignisse anpassen, wenn Baumknoten geöffnet und geschlossen werden.
Auf jedem Baumknoten kann ein Kontextmenü mit der rechten Maustaste erstellt werden.

Anwendung
Um dieses Diashow-Plug-in zu verwenden, müssen Sie die Dateien Aimara.css und Aimara.js in die Seite einfügen.

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

Nach dem Login kopieren

HTML-Struktur

Sie können ein leeres

als Container für diesen Verzeichnisbaum verwenden.

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

Nach dem Login kopieren

JAVASCRIPT

Anschließend können Sie das Verzeichnisbaum-Plug-in mit der folgenden Methode initialisieren. Sie können einige Baumknoten und untergeordnete Knoten erstellen und diese dann rendern. Knoten können der Baumstruktur vor oder nach dem Rendern des Baums hinzugefügt werden.

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

Nach dem Login kopieren

Kontextmenü für Baumknoten erstellen

Mit der folgenden Methode können Sie ein Kontextmenü mit der rechten Maustaste erstellen.

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

Nach dem Login kopieren

Dann initialisieren Sie die Baumstruktur mit der folgenden Methode:

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

Nach dem Login kopieren

Fügen Sie einen Baumknoten in Echtzeit hinzu, nachdem die Baumstruktur gerendert wurde:

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

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich stelle Ihnen eine reine js-responsive Implementierung von Spezialeffekten für eine Baumstruktur-Menüleiste vor.