`
speed_guo
  • 浏览: 310981 次
  • 性别: Icon_minigender_1
  • 来自: 湖北
社区版块
存档分类
最新评论

dTree--最强大的树型菜单

阅读更多

dTree目录树的总结

         一:函数

                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);必须这样写
         3:样式表
           (1):可以将dtree.css中的样式附加到你的应用中的主css中,如a.css
           (2):也可以同时引用dtree.css与a.css两个文件,但前提条件是两个css文件中不能有重复的样式

 

显示效果图:

dTree--最强大的树型菜单 - dilegencehe - dilegencehe的博客-静、净、尽

 

生成树 节点的代码: 

<link rel="StyleSheet" href="<%=basePath%>/include/css/dtree.css" type="text/css" />

<script type="text/javascript" src="<%=basePath%>/include/scripts/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>  

 上面代码效果:

dTree--最强大的树型菜单 - dilegencehe - dilegencehe的博客-静、净、尽
说明:这是静态的代码,动态的可用循环加入 d.add(id,pid,name,url,"","","","",true);
      for(int i=0;i<list.size();i++){
               d.add(id,pid,name,url,"","","","",true);
      }
      document.write(d);
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics