纯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版仿Path菜单效果
Dec 15 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
javascript闭包的高级使用方法实例
Jul 04 Javascript
js window.print实现打印特定控件或内容
Sep 16 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 Javascript
详解如何用VUE写一个多用模态框组件模版
Sep 27 Javascript
axios使用拦截器统一处理所有的http请求的方法
Nov 02 Javascript
Vue实现一个无限加载列表功能
Nov 13 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 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
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
Dom操作之兼容技巧分享
2011/09/20 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
Python实现端口复用实例代码
2014/07/03 Python
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
django 取消csrf限制的实例
2020/03/13 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
美国内衣品牌:Leonisa
2016/08/14 全球购物
订货会邀请函
2015/01/31 职场文书
2015年信息技术教研组工作总结
2015/07/22 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
2019教师的学习计划
2019/06/25 职场文书
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫