首頁 > web前端 > js教程 > 主體

純javascript響應式樹狀選單效果_javascript技巧

WBOY
發布: 2016-05-16 15:33:00
原創
1558 人瀏覽過

簡要教學
aimaraJS是一款非常實用的純javascript響應式多層目錄樹結構插件。該目錄樹可以動態新增和刪除樹節點,可以製作多層樹結構,每個節點上可以都帶有右鍵上下文選單,並且每個節點上都可以配置不同的圖示。它的特點有:

  • 可以建立一個基本的樹結構並渲染它。
  • 可以即時新增和刪除樹節點。
  • 可以顯示不同的樹節點圖示。
  • 在樹節點開啟和關閉的時候可以自訂事件。
  • 每個樹節點上都可以製作右鍵上下文選單。

 

使用方法
使用該投影片外掛程式需要在頁面中引入Aimara.css和Aimara.js檔案。

<link rel="stylesheet" href="css/Aimara.css" />
<script src="js/Aimara.js"></script>       
登入後複製

 HTML結構

可以使用一個空的

來作為這個目錄樹的容器。

<div id="div_tree"></div>       
登入後複製

JAVASCRIPT

然後你可以透過下面的方法來初始化該目錄樹插件。你可以建立一些樹節點和子節點,然後渲染它們。節點可以在樹被渲染之前或之後加入到樹結構中。

<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>        
登入後複製

為樹節點建立上下文選單

可以透過下面的方法來建立一個右鍵上下文選單。

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();
       }
      }
     ]
    }
   }
  ]
 }
};        
登入後複製

然後透過下面的方法初始化樹狀結構:

tree = createTree('div_tree','white',contex_menu);
tree.drawTree();   
登入後複製

在樹結構渲染之後即時加入一個樹節點:

tree.createNode('Real Time',false,'images/leaf.png',null,null,'context1'); 
登入後複製

 以上就是本文的全部內容,為大家介紹了一款純js響應式實現樹結構選單列的特效,希望大家喜歡。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板