Xtree
http://sxpujs.iteye.com/blog/456876http://hi.baidu.com/jackywdx/blog/item/b970bbf9b3b7cb5c242df247.html
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; width: 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()
页:
[1]