纯javascript响应式树形菜单效果


Posted in Javascript onNovember 10, 2015

简要教程
aimaraJS是一款非常实用的纯javascript响应式多级目录树结构插件。该目录树可以动态添加和删除树节点,可以制作多级树结构,每个节点上可以都带有右键上下文菜单,并且每个节点上都可以配置不同的图标。它的特点有:

  • 可以创建一个基本的树结构并渲染它。
  • 可以实时添加和删除树节点。
  • 可以显示不同的树节点图标。
  • 在树节点打开和关闭的时候可以自定义事件。
  • 每个树节点上都可以制作右键上下文菜单。

 纯javascript响应式树形菜单效果

使用方法
使用该幻灯片插件需要在页面中引入Aimara.css和Aimara.js文件。

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

 HTML结构

可以使用一个空的<div>来作为这个目录树的容器。

<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响应式实现树结构菜单栏的特效,希望大家喜欢。

Javascript 相关文章推荐
JQuery 技巧和窍门整理(8个)
Apr 22 Javascript
Javascript 页面模板化很多人没有使用过的方法
Jun 05 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
JavaScript操作HTML元素和样式的方法详解
Oct 21 Javascript
jquery实现九宫格大转盘抽奖
Nov 13 Javascript
最全面的JS倒计时代码
Sep 17 Javascript
jQuery日期范围选择器附源码下载
May 23 jQuery
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
基于Vue CSR的微前端实现方案实践
May 27 Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 #Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 #Javascript
3种js实现string的substring方法
Nov 09 #Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 #Javascript
js中substring和substr两者区别和使用方法
Nov 09 #Javascript
浅析js中substring和substr的方法
Nov 09 #Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
Nov 09 #Javascript
You might like
239军机修复记
2021/03/02 无线电
PHP页面中文乱码分析
2013/10/29 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
python杀死一个线程的方法
2015/09/06 Python
python对json的相关操作实例详解
2017/01/04 Python
python下10个简单实例代码
2017/11/15 Python
python调用百度REST API实现语音识别
2018/08/30 Python
python保存二维数组到txt文件中的方法
2018/11/15 Python
python中时间模块的基本使用教程
2019/05/14 Python
Python常用模块之requests模块用法分析
2019/05/15 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
Python连接字符串过程详解
2020/01/06 Python
python3从网络摄像机解析mjpeg http流的示例
2020/11/13 Python
基于Python实现粒子滤波效果
2020/12/01 Python
python定义具名元组实例操作
2021/02/28 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
环境工程专业自荐信范文
2014/03/18 职场文书
分公司任命书
2014/06/06 职场文书
党员检讨书
2014/10/13 职场文书
2015年基层党组织公开承诺书
2015/01/21 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
python中subplot大小的设置步骤
2021/06/28 Python
vue 自定义组件添加原生事件
2022/04/21 Vue.js
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android