zoukankan      html  css  js  c++  java
  • JS的dtree和xtree介绍

    1. 树型菜单是我们在开发中经常用到的数据组合和显示方式,   
    2. dTree(http://www.destroydrop.com/javascripts/tree/)   
    3. dTree是一种免费的javascript树型菜单, 它支持ie5+, ns 6+, Opera 7+以及Mozilla浏览器   
    4. 使用简单:   
    5. 引入树, 在head中加入dtree.js和dtree.css(注意要把js,css和img放到相应目录), 如下所示:   
    6. <link rel="StyleSheet" href="dtree.css" type="text/css" />  
    7. <script type="text/javascript" src="dtree.js"></script>  
    8. 实例化树并显示   
    9. <div class="dtree">  
    10.   
    11.     <p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>  
    12.   
    13.     <script type="text/javascript">  
    14.          <!--   
    15.   
    16.         d = new dTree('d');   
    17.   
    18.          d.add(0,-1,'My example tree');   
    19.          d.add(1,0,'Node 1','example01.html');   
    20.          d.add(2,0,'Node 2','example01.html');   
    21.          d.add(3,1,'Node 1.1','example01.html');   
    22.          d.add(4,0,'Node 3','example01.html');   
    23.          d.add(5,3,'Node 1.1.1','example01.html');   
    24.          d.add(6,5,'Node 1.1.1.1','example01.html');   
    25.          d.add(7,0,'Node 4','example01.html');   
    26.          d.add(8,1,'Node 1.2','example01.html');   
    27.          d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');   
    28.          d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');   
    29.          d.add(11,9,'Mom\'s birthday','example01.html');   
    30.          d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');   
    31.          d.add(13,12,'sub Recycle Bin','','','','img/trash.gif');   
    32.   
    33.          document.write(d);   
    34.   
    35.          //-->  
    36.     </script>  
    37.   
    38. </div>  
    39. add方法的参数说明 id:当前节点标识, pid:父节点标识, name:当前节点名字, url:当菜单被点击时响应的超链接, title:提示语,   
    40. target:在目标窗口打开链接, icon:关闭时的显示图标, iconOpen:打开时的显示图标, open:默认的打开状态, true打开, false关闭(不过它会读cookie, 所以有时看不出效果)   
    41. dTree.prototype.add = function(id, pid, name, url, title, target, icon, iconOpen, open)   
    42.   
    43. Xtree(http://webfx.eae.net/dhtml/xtree/implementation.html)   
    44. 相对dTree来说, xTree功能要多一些, 能动态增减树的节点   
    45. 引入树:   
    46. <!-- The xtree script file -->  
    47. <script src="xtree.js"></script>  
    48. <link type="text/css" rel="stylesheet" href="xtree.css">  
    49. 实例化树, 并显示   
    50. <div style="position: absolute; 200px; top: 0px; left: 0px; height: 100%; padding: 5px; overflow: auto;">  
    51.   
    52. <!-- js file containing the tree content, edit this file to alter the menu,   
    53.       the menu will be inserted where this tag is located in the document -->  
    54. <script>  
    55. if (document.getElementById) {   
    56.      var tree = new WebFXTree('Root');   
    57.      tree.setBehavior('classic');   
    58.      var a = new WebFXTreeItem('1');   
    59.      tree.add(a);   
    60.      var b = new WebFXTreeItem('1.1');   
    61.      a.add(b);   
    62.      b.add(new WebFXTreeItem('1.1.1'));   
    63.      b.add(new WebFXTreeItem('1.1.2'));   
    64.      b.add(new WebFXTreeItem('1.1.3'));   
    65.      var f = new WebFXTreeItem('1.1.4');   
    66.      b.add(f);   
    67.      f.add(new WebFXTreeItem('1.1.4.1'));   
    68.      f.add(new WebFXTreeItem('1.1.4.2'));   
    69.      f.add(new WebFXTreeItem('1.1.4.3'));   
    70.      var c = new WebFXTreeItem('1.2');   
    71.      a.add(c);   
    72.      c.add(new WebFXTreeItem('1.5.1'));   
    73.      c.add(new WebFXTreeItem('1.5.2'));   
    74.      c.add(new WebFXTreeItem('1.5.3'));   
    75.      a.add(new WebFXTreeItem('1.3'));   
    76.      a.add(new WebFXTreeItem('1.4'));   
    77.      a.add(new WebFXTreeItem('1.5'));   
    78.      var d = new WebFXTreeItem('2');   
    79.      tree.add(d);   
    80.      var e = new WebFXTreeItem('2.1');   
    81.      d.add(e);   
    82.      e.add(new WebFXTreeItem('2.1.1'));   
    83.      e.add(new WebFXTreeItem('2.1.2'));   
    84.      e.add(new WebFXTreeItem('2.1.3'));   
    85.      d.add(new WebFXTreeItem('2.2'));   
    86.      d.add(new WebFXTreeItem('2.3'));   
    87.      d.add(new WebFXTreeItem('2.4'));   
    88.      document.write(tree);   
    89. }   
    90.   
    91. function addNode() {   
    92.      if (tree.getSelected()) {   
    93.          tree.getSelected().add(new WebFXTreeItem('New'));   
    94.      }   
    95. }   
    96.   
    97. function addNodes() {   
    98.      if (tree.getSelected()) {   
    99.          var foo = tree.getSelected().add(new WebFXTreeItem('New'));   
    100.          var bar = foo.add(new WebFXTreeItem('Sub 1'));   
    101.          var fbr = foo.add(new WebFXTreeItem('Sub 2'));   
    102.      }   
    103. }   
    104.   
    105. function delNode() {   
    106.      if (tree.getSelected()) {   
    107.          tree.getSelected().remove();   
    108.      }   
    109. }   
    110. </script>  
    111.   
    112. </div>  
    113.   
    114. 打开关闭节点:tree.toggle()   
    115. 打开节点:tree.expand();   
    116. 关闭节点:tree.collapse();   
    117. 打开所有节点:tree.expandAll();   
    118. 关闭所有节点:tree.collapseAll();   
    119. 打开子节点:tree.expandChildren();   
    120. 关闭子节点:tree.collapseChildren();   
    121. 显示当前节点的id:if (tree.getSelected()) { alert(tree.getSelected().id); }   
    122. 增加节点:addNode()   
    123. 增加多个节点:addNodes()   
    124. 删除节点:delNode()   
  • 相关阅读:
    c#面向对象基础技能——学习笔记(五)委托技术在开发中的应用
    c#面向对象基础技能——学习笔记(三)基于OOP思想研究对象的【方法】
    c#面向对象基础技能——学习笔记(二)基于OOP思想研究对象的【属性】
    使用移位寄存器产生重复序列信号“100_0001”,移位寄存器的级数至少为?
    设计一个异步双端口RAM,深度为16,数据位宽为8bit
    soda水1块钱,硬币有五毛和一块两种:
    画状态机,接收1,2,5分钱的卖报机,每份报纸5分钱
    三极管
    画出可以检测10010串的状态图
    NOT、NAND、NOR符号
  • 原文地址:https://www.cnblogs.com/neights/p/3025252.html
Copyright © 2011-2022 走看看