欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

純javascript響應(yīng)式樹(shù)形菜單效果

 更新時(shí)間：2015年11月10日 09:46:43   投稿：lijiao  
這篇文章主要為大家分享了純javascript響應(yīng)式樹(shù)形菜單效果的簡(jiǎn)單教程，對(duì)多級(jí)目錄樹(shù)形菜單感興趣的小伙伴們可以參考一下

簡(jiǎn)要教程
aimaraJS是一款非常實(shí)用的純javascript響應(yīng)式多級(jí)目錄樹(shù)結(jié)構(gòu)插件。該目錄樹(shù)可以動(dòng)態(tài)添加和刪除樹(shù)節(jié)點(diǎn)，可以制作多級(jí)樹(shù)結(jié)構(gòu)，每個(gè)節(jié)點(diǎn)上可以都帶有右鍵上下文菜單，并且每個(gè)節(jié)點(diǎn)上都可以配置不同的圖標(biāo)。它的特點(diǎn)有：

  • 可以創(chuàng)建一個(gè)基本的樹(shù)結(jié)構(gòu)并渲染它。
  • 可以實(shí)時(shí)添加和刪除樹(shù)節(jié)點(diǎn)。
  • 可以顯示不同的樹(shù)節(jié)點(diǎn)圖標(biāo)。
  • 在樹(shù)節(jié)點(diǎn)打開(kāi)和關(guān)閉的時(shí)候可以自定義事件。
  • 每個(gè)樹(shù)節(jié)點(diǎn)上都可以制作右鍵上下文菜單。

 

使用方法
使用該幻燈片插件需要在頁(yè)面中引入Aimara.css和Aimara.js文件。

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

 HTML結(jié)構(gòu)

可以使用一個(gè)空的<div>來(lái)作為這個(gè)目錄樹(shù)的容器。

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

JAVASCRIPT

然后你可以通過(guò)下面的方法來(lái)初始化該目錄樹(shù)插件。你可以創(chuàng)建一些樹(shù)節(jié)點(diǎn)和子節(jié)點(diǎn)，然后渲染它們。節(jié)點(diǎn)可以在樹(shù)被渲染之前或之后添加到樹(shù)結(jié)構(gòu)中。

<script type="text/javascript">
  window.onload = function() {
    //創(chuàng)建樹(shù)結(jié)構(gòu)
    var tree = createTree('div_tree','white');
    //創(chuàng)建樹(shù)節(jié)點(diǎn)node1
    var node1 = tree.createNode('First node',false,'images/star.png',null,null,null);
    //node1添加到樹(shù)結(jié)構(gòu)中
    node1.createChildNode('First child node', false, 'images/blue_key.png',null,null);
    //渲染樹(shù)結(jié)構(gòu)
    tree.drawTree();
    //創(chuàng)建第二個(gè)樹(shù)節(jié)點(diǎn)
    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>

為樹(shù)節(jié)點(diǎn)創(chuàng)建上下文菜單

可以通過(guò)下面的方法來(lái)創(chuàng)建一個(gè)右鍵上下文菜單。

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

然后通過(guò)下面的方法來(lái)初始化樹(shù)結(jié)構(gòu)：

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

在樹(shù)結(jié)構(gòu)渲染之后實(shí)時(shí)添加一個(gè)樹(shù)節(jié)點(diǎn)：

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

 以上就是本文的全部?jī)?nèi)容，為大家介紹了一款純js響應(yīng)式實(shí)現(xiàn)樹(shù)結(jié)構(gòu)菜單欄的特效，希望大家喜歡。

相關(guān)文章

最新評(píng)論