会员登录
dtree(无限节点树)
作者:未知 时间:2009-05-11 00:10:32 点击:20126 评论:0
授权形式: 开源
软件语言: 英文
软件平台: Linux/Unix/Windows/WinXP
推荐等级: ★★★★★
更新时间: 2009-05-17 11:44:09
软件版本: 2.05
文件大小: 14.61 KB.
下载次数: 6590
官方网站: http://www.destroydrop.com/javascripts/
软件简介

 这个无限级可刷新Js树型菜单 dTree 
1、可设置无限级菜单 
2、不必使用框架 
3、可刷新,多页面内跳转不会影响菜单 
4、可限级创造子树 
5、支持目前主流浏览器:IE5,6,7 
6、节点图片可设置切换图片效果 

说明(来自http://blog.sina.com.cn/s/blog_4586764e0100cjrf.html):
一:函数
1:页面中
tree.add(id,pid,name,url,title,target,icon,iconOpen,open);
参数说明:
id         :节点自身的id
pid       :节点的父节点的id
name    :节点显示在页面上的名称
url        :节点的链接地址
title      :鼠标放在节点上所出现的提示信息
target   :节点链接所打开的目标frame(如框架目标mainFrame或是_blank,_self之类)
icon      :节点关闭时的显示图片的路径
iconOpen:节点打开时的显示图片的路径
open    :布尔型,节点是否打开(默认为false)

注:open项:顶级节点一般采用true,即pid是-1的节点

2:dtree.js文件中
约87-113行是一些默认图片的路径,注意要指对。
二:页面中的书写
1:默认值的书写规则(从左至右,依次省略)
即 tree.add(id,pid,name,url);后面5个参数可以省略
2:有间隔时的默认值(如存在第6个参数,但第5个参数想用默认值)
即 tree.add(id,pid,name,url,"",target);必须这样写
其他 tree.add(id,pid,name,url,"","","","",true);
3:样式表
(1):可以将dtree.css中的样式附加到你的应用中的主css中,如a.css
(2):也可以同时引用dtree.css与a.css两个文件,但前提条件是两个css文件中不能有重复的样式
<link href="/jingjindatabase/pub/css/a.css" rel="stylesheet" type="text/css" />
<link href="/jingjindatabase/pub/css/dtree.css" rel="stylesheet" type="text/css" />
4:页面代码书写的位置是:一般写在表格的td之中
 

Copy to clipboard
  1. <script type="text/javascript" src="/myMobanGis/pub/js/dtree.js"></script>   
  2. <script type="text/javascript">   
  3. tree = new dTree('tree');   
  4. tree.add("1","-1","京津","","","","","",true);   
  5. tree.add("11","1","A","","","","","",true);   
  6.  tree.add("110","11","A-1","content.jsp?moduleName=XXX","","mainFrame");   
  7.  tree.add("111","11","A-2","javascript:void(0)","","链接在哪里显示");   
  8.  tree.add("112","11","A-3","javascript:void(0)","","mainFrame");   
  9.  tree.add("113","11","A-4","/.jsp","","mainFrame");   
  10.  tree.add("114","11","A-5","/.jsp","","mainFrame");   
  11.  tree.add("115","11","A-6","/.jsp","","mainFrame");   
  12.     
  13. tree.add("12","1","B","","","","","",true);   
  14.  tree.add("121","12","B-1","javascript:调用本页内的js函数","","mainFrame");   
  15.  tree.add("122","12","B-2");   
  16.   
  17. tree.add("13","1","C","","","","","",true);   
  18.  tree.add("131","13","C-1","javascript:void(0)","","mainFrame");   
  19.  tree.add("132","13","C-2","javascript:void(0)","","mainFrame");   
  20.  tree.add("133","13","C-3","javascript:void(0)","","mainFrame");   
  21.   
  22. tree.add("14","1","D","","","","","",true);   
  23.  tree.add("141","14","D-1","javascript:void(0)","","mainFrame");   
  24. document.write(tree);   
  25. </script>   


说明:这是静态的代码,动态的可用循环加入。

三:css文件的注解

1:dtree.css

Copy to clipboard
  1. .dtree {//定义目录树节点的字体,字号,颜色   
  2.  font-familyVerdana, Geneva, ArialHelveticasans-serif;   
  3.  font-size12px;   
  4.  color#006600;   
  5.  white-spacenowrap;   
  6. }   
  7. .dtree img {//定义选用节点图标的样式,位置   
  8.  border0px;   
  9.  vertical-alignmiddle;   
  10. }   
  11. .dtree a {//   
  12.  color#006600;   
  13.  text-decorationnone;   
  14. }   
  15. .dtree a.node, .dtree a.nodeSel {   
  16.  white-spacenowrap;   
  17.  padding0px 0px 0px 0px;   
  18. }   
  19. .dtree a.node:hover, .dtree a.nodeSel:hover {   
  20.  color#006600;   
  21.  text-decorationnone;   
  22. }   
  23. .dtree a.nodeSel {   
  24.  background-color#c0d2ec;   
  25. }   
  26. .dtree .clip {   
  27.  overflowhidden;   
  28. }   
  29.   
  30.     


 

下载地址
最新评论
共有 0 位网友发表了评论