源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

纯javascript响应式树形菜单效果

  • 时间:2021-02-16 01:34 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:纯javascript响应式树形菜单效果
[b]简要教程[/b] aimaraJS是一款非常实用的纯javascript响应式多级目录树结构插件。该目录树可以动态添加和删除树节点,可以制作多级树结构,每个节点上可以都带有右键上下文菜单,并且每个节点上都可以配置不同的图标。它的特点有: [list] [*]可以创建一个基本的树结构并渲染它。[/*] [*]可以实时添加和删除树节点。[/*] [*]可以显示不同的树节点图标。[/*] [*]在树节点打开和关闭的时候可以自定义事件。[/*] [*]每个树节点上都可以制作右键上下文菜单。[/*] [/list] [b] [img]http://files.jb51.net/file_images/article/201511/2015111093818889.jpg?2015101093829[/img] [/b] [b]使用方法[/b] 使用该幻灯片插件需要在页面中引入Aimara.css和Aimara.js文件。
<link rel="stylesheet" href="css/Aimara.css" />
<script src="js/Aimara.js"></script>       
[b] HTML结构[/b] 可以使用一个空的<div>来作为这个目录树的容器。
<div id="div_tree"></div>       
[b]JAVASCRIPT[/b] 然后你可以通过下面的方法来初始化该目录树插件。你可以创建一些树节点和子节点,然后渲染它们。节点可以在树被渲染之前或之后添加到树结构中。
<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>        
[b]为树节点创建上下文菜单[/b] 可以通过下面的方法来创建一个右键上下文菜单。
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响应式实现树结构菜单栏的特效,希望大家喜欢。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部