纯javript实用多级目录树结构插件

所属分类:导航-文件树

 17327  33  查看评论 (21)
纯javript实用多级目录树结构插件 ie兼容9

简要教程

aimaraJS是一款非常实用的纯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(<code class="js string" style="box-sizing: content-box; font-size: 12.3165006637573px; padding: 0px; font-family: 'Source Code Pro', 'Courier New', Courier, monospace; colo


相关插件-文件树

jquery树形选择器

根据json字符串格式加载出一个树结构,通过设置可对树结构进行表格化
  文件树
 9327  28

jquery mobile 树插件

jquery mobile 树形插件
  文件树
 15230  37

文件树编辑插件Treed

文件树编辑插件Treed 可扩展功能强大,简单易用。
  文件树
 35230  92

AngularJS基于树的控制组件

Angular JS Tree基于树的控制组件
  文件树
 41641  28

讨论这个项目(21)回答他人问题或分享插件使用方法奖励jQ币

    Lucia Huang` 0
    2017/4/11 10:08:03
    css里面的三张图片不知道是做什么的... 回复
    夜 初寒 0
    2017/3/7 14:17:14
    dingxianming 0
    2017/3/4 22:17:38

    怎么点击子节点,跳转到相应的链接????????

    回复
    风往北吹 0
    2017/3/2 13:22:18

    看起来感觉不错。  下载来看看

    回复
    Ⅱ° 0
    2017/1/29 22:32:30

    很实用,非常好

    回复
    ndgtum 0
    2016/11/18 14:11:33
    潇锋 0
    2016/9/27 13:09:57
    ?坏??小??牛??? 0
    2016/9/24 9:09:18
    这么好的东西,一点要保留呀 回复
    老司机开车 0
    2016/7/15 15:07:41
    这个看起来很好,就是缺钱啊 回复
    老司机开车 0
    2016/7/15 15:07:37
取消回复