注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

北漂的小羊

Java编程,开发者,程序员,软件开发,编程,代码。新浪微博号:IT国子监

 
 
 

日志

 
 
关于我

在这里是面向程序员的高品质IT技术学习社区,是程序员学习成长的地方。让我们更好地用技术改变世界。请关注新浪微博号: IT国子监(http://weibo.com/itguozijian)

网易考拉推荐

dtree.js的使用指南  

2012-10-13 16:27:55|  分类: JS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

效果图:

dtree.js的使用指南 - 天涯草 - 天涯草
 


dtree是一个由JavaScript编写成的简单的树形菜单组件,目前免费并且开源。 dtree目前有很多的树形菜单组件(比如ext),dtree是一种简单易懂的js组件,不需要复杂的操作即可生产,同时支持动态从数据库引入数据。


优点:

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

7、严格支持XHTML 1.0 


准备工作:

  下载urlhttp://www.destroydrop.com/javascripts/tree/


dtree.zip文件说明:

1)包内包含以下几个文件:  

img文件夹: 包含树形菜单显示需要的图标。

api.html : 作者写的dtree帮助文档。

dtree.css: 树形菜单的样式。

dtree.js : js核心文件,代码都在其中。 

example01.html:树形菜单实例。


创建dtree(实例):

1)将压缩包内的文件拷贝到项目webroot(example01.html可以不拷贝)  

2)新建一个web文件(*.html*.jsp...都可以)

       首先引入cssjs文件:  

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

      <script type="text/javascript" src="dtree.js"></script> 

  <div class="dtree"></div> 

<script type="text/javascript">  

tree = new dTree('tree');  //创建一个树对象    

      tree.add(0,-1,My example tree); //创建一个树对象

......  

</script>


方法扩展:

add(parameters)

   添加一个树节点,实际参数有9个add(id,pid,name,url,title,target,icon,iconOpen,open);
        
dtree.js的使用指南 - 天涯草 - 天涯草
 


   注:dtree.js文件中约87-113行是一些默认图片的路径,可以自己配置图片和路径。

openAll()

   打开全部节点,可在树对象创建前或创建后调用

closeAll()

   关闭全部节点,可在树对象创建前或创建后调用

openTo(id,select)

   打开指定id的节点,可以传两个参数:
   id 指定需要打开的节点的唯一id
   select 是否让该节点处于选中状态

config配置

dtree.js的使用指南 - 天涯草 - 天涯草
 
  具体配置功能请参照官网实例。



  评论这张
 
阅读(561)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016