解压缩dtree.zip 包。  
dtree目录下包括这些文件:example01.html 、 dtree.js 、 api.html 、 dtree.css 和img目录       
注意:除了api.html之外,其它的文件都是必须拷贝的。api.html是dtree的函数介绍。  

打开example01.html文件  

     <link rel="StyleSheet" href="css/dtree.css" type="text/css" />   
     <script type="text/javascript" src="js/dtree.js"></script>   

必须引用的两个文件。  

生成树 节点的代码:  
      <script type="text/javascript">   
         <!--   

         d = new dTree(’d’);//创建一个树对象   

         d.add(0,-1,’My example tree’); //创建一个树对象   
         d.add(1,0,’Node 1’,’example01.html’);   
         d.add(2,0,’Node 2’,’example01.html’);   
         d.add(3,1,’Node 1.1’,’example01.html’);   
         d.add(4,0,’Node 3’,’example01.html’);   
         d.add(5,3,’Node 1.1.1’,’example01.html’);   
         d.add(6,5,’Node 1.1.1.1’,’example01.html’);   
         d.add(7,0,’Node 4’,’example01.html’);   
         d.add(8,1,’Node 1.2’,’example01.html’);   
         d.add(9,0,’My Pictures’,’example01.html’,’Pictures I\’ve taken over the years’,’’,’’,’img/imgfolder.gif’);   
         d.add(10,9,’The trip to Iceland’,’example01.html’,’Pictures of Gullfoss and Geysir’);   
         d.add(11,9,’Mom\’s birthday’,’example01.html’);   
         d.add(12,0,’Recycle Bin’,’example01.html’,’’,’’,’img/trash.gif’);   

         document.write(d);   

         //-->   
     </script>   

d.add(0,-1,’My example tree’);  
      这一句为树添加了一个根节点,显示名称为’My example tree’     d.add(1,0,’Node 1’,’example01.html’);  
     这一句在树的根节点下面添加了一个子节点。(d.add()方法的参数具体含义可参见api.html文件)       
常用的:       
第一个参数,表示当前节点的ID       
第二个参数,表示当前节点的父节点的ID,根节点的值为 -1      
第三个参数,节点要显示的文字       
第四个参数,节点的Url       
第五个参数,鼠标移至该节点时节点的Title       
第六个参数,节点的target  
第七个参数,用做节点的图标,节点没有指定图标时使用默认值  
第八个参数,用做节点打开的图标,节点没有指定图标时使用默认值  
第九个参数,判断节点是否打开  

使用实例大家可参照 www.amyou.cn 的树型菜单  

附 rlog翻译: 

属性菜单使用说明   

函数   

add()   
向树里添加一个节点   
只能在树被创建之前调用.   
必须 id, pid, name   
参数   
名字        类型       描述   
id        Number       唯一的ID号   
pid       Number       判定父节点的数字,根节点的值为 -1   
name      String       节点的文本标签   
url       String       节点的Url   
title     String       节点的Title   
target    String       节点的target   
icon      String       用做节点的图标,节点没有指定图标时使用默认值   
iconOpen     String    用做节点打开的图标,节点没有指定图标时使用默认值   
open     Boolean     判断节点是否打开   
例子   
mytree.add(1, 0, ’My node’, ’node.html’, ’node title’, ’mainframe’, ’img/musicfolder.gif’);   

openAll()   
打开所有节点   
可在树被创建以前或以后调用.   
例子   
mytree.openAll();   

closeAll()   
关闭所有节点   
可在树被创建以前或以后调用.   
例子   
mytree.closeAll();   

openTo()   
Opens the tree to a certain node and can also select the node.   
只能在树被创建以后调用..   
参数   
名字        类型        描述   
id         Number       节点唯一的ID号   
select     Boolean     判断节点是否被选择   
例子   
mytree.openTo(4, true);   

配置   
变量                 类型             默认值              描述   
target              String             true            所有节点的target   
folderLinks         Boolean            true           文件夹可链接   
useSelection        Boolean            true           节点可被选择(高亮)   
useCookies          Boolean            true           树可以使用cookies记住状态   
useLines            Boolean            true           创建带线的树   
useIcons            Boolean            true           创建带有图标的树   
useStatusText       Boolean            false          用节点名替代显示在状态栏的节点url   
closeSameLevel      Boolean            false          只有一个有父级的节点可以被展开,当这个函数可用时openAll() 和 closeAll() 函数将不可用   
inOrder             Boolean            false          如果父级节点总是添加在子级节点之前,使用这个参数可以加速菜单显示.   
例子   
mytree.config.target = "mytarget";

插件dTree的使用的更多相关文章

  1. struts2由&lt;s:tree&gt;要么dtree小工具 建立树

    一个 .<s:tree>方法: 1.引入新的标签: <%@ taglib prefix="sd" uri="/struts-dojo-tags" ...

  2. dtree大型树插件

    一.dtree简介 dtree是一个由JavaScript编写成的简单的树形菜单组件,目前免费并且开源.同时支持动态从数据库引入数据. 二.使用方法 1.下载dtree.js及dtree.css 下载 ...

  3. Tabs - 选项卡插件

        接上篇Tabs  - 选项卡插件  其中12)Yet (E)Another Tab Interface没有依赖任何javascript框架,以作补充          9)Flipping C ...

  4. js 插件使用总结

    1:树形菜单插件: z-tree 和dtree 2: 弹窗插件layer 3: 前端ui框架ace ,  h-ui , layui 4:产品设计图绘制软件Axure和Mockplus(推荐)

  5. 基于jquery下拉列表树插件代码

    分享一款基于jquery下拉列表树插件代码.这是一款实用的jquery 树形下拉框 下拉树代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <table width= ...

  6. dtree的自定义select动作

    项目中用到了dtree,别问我为什么用这么古老的插件,因为简单啊orz,文件树的条目不多,detree加载卡顿的问题也不用解决,开森. 在使用过程中在选择节点后需要自定义一些onclick的动作,本来 ...

  7. DHTMLTree、Dtree和Ztree的学习使用

    一.DHTMLTree是树菜单,允许我们快速开发界面优美,基于Ajax的javascript库.她允许在线编辑,拖拽,三种状态(全选.不选.半选),复选框等模式.同时在加载大数据量的时候,仍然可以保持 ...

  8. JQuery树形插件Dynatree的包装对象

    这是JQuery Dynatree插件的包装对象,做了些改进和增强,增加了右键菜单,以及相应事件等扩展1. [代码]MagicDTree的基本使用 <SCRIPT type=text/javas ...

  9. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

随机推荐

  1. Hihocoder 1063 缩地

    树形dp 涉及不重复背包组合求最小 从边长分段看不好入手 因为点数只有100点值<=2,总值<=200 可以对每个点的每个值进行dp 这里最后不回来肯定优于全回来 然后由于要分为回来和不回 ...

  2. web网站的url设计

    通常再web网站设计url时是按功能模块设计url,然后再control层一个功能模块对应一个control层类,每个control类中的方法映射相应的url请求. 如果遇见另一个功能模块需要实现同样 ...

  3. UVALive 7143 Room Assignment(组合数学+DP)(2014 Asia Shanghai Regional Contest)

    题目链接:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&category=6 ...

  4. 【C#】时间戳转换

    今天有时间戳转换的需求,网上找了半天才找到相关代码,经测试有效,特作此笔记和大家分享! 1.时间戳转为C#格式时间 /// <summary> /// 时间戳转为C#格式时间 /// &l ...

  5. 推荐!手把手教你使用Git

    推荐!手把手教你使用Git 原文出处: 涂根华的博客   http://blog.jobbole.com/78960/ 一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 二:SVN与 ...

  6. MSDTC故障排除,DTCTester用法 (二)

    摘自:https://support.microsoft.com/zh-cn/kb/293799#bookmark-4 ———————————————————————————— 概要 DTCTeste ...

  7. Exception in thread "main" java.lang.UnsupportedClassVersionError: org/apache/maven/cli/MavenCli :

    1.匹配jdk和maven的版本http://www.bubuko.com/infodetail-1757416.html      jdk1.6 要匹配maven3.2.5 maven版本下载地址: ...

  8. 161230、利用代理中间件实现大规模Redis集群

    前面在<大规模互联网应用Redis架构要点>和<Redis官方集群方案 Redis Cluster>两篇文章中分别介绍了多Redis服务器集群的两种方式,它们是基于客户端sha ...

  9. Excel取消超级链接

    背景 本人使用Excel作笔记,偶尔会将一些url存到文档中.Excel会自动给这些url加上超链接,下次使用的时候,因为会单机跳转,导致选中复制很不方便. 解决方式 修改配置,避免给自动url加上超 ...

  10. CSS3样式

    1.边框 div{border:2px solid;border-radius:25px;-moz-border-radius:25px; /* Old Firefox */} border-radi ...