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

所属分类:导航-文件树

 19958  41  查看评论 (26)
纯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


相关插件-文件树

无级别树形菜单插件

通过添加JSON数据页面同步添加菜单
  文件树
 9372  21

文件树编辑插件Treed

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

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

aimaraJS是一款非常实用的纯javript响应式多级目录树结构插件。该目录树可以动态添加和删除树节点,可以制作多级树结构,每个节点上可以都带有右键上下文菜单,并且每个节点上都
  文件树
 19958  41

jquery mobile 树插件

jquery mobile 树形插件
  文件树
 18458  44

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

    0
    2017/9/22 14:08:40
              柠澈、 0
    2017/8/23 16:06:42

    好像没有修改啊,删除添加都有

    回复
    独舞 0
    2017/8/3 10:43:06
    这张图片的路径应该在哪里改啊??? 回复
    藏器 0
    2017/7/19 14:46:42

    看起来不错,没钱啊

    回复
    Network penetration 0
    2017/6/22 12:08:59

    这个好,完美的解决了我的问题

    回复
    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

    很实用,非常好

    回复
取消回复