一个用JS写的树状目录

这个博客介绍了如何使用JavaScript(JsTree)创建一个目录树结构。JsTree通过定义图标、预加载图片和定义节点操作来实现树形目录。代码示例展示了如何添加节点、初始化节点、绘制节点及其子节点,以及实现展开、折叠、选择等交互功能。
摘要由CSDN通过智能技术生成

Cls_jsTree.js
/**
名称:  js目录树
Name:  jsTree
Release: 0.01
Author:  小竹
Revision: 2005-10-29 16:30:40
Licenses: GPL(The GNU General Public License)
Descript: js目录树
*/


var Icon={
  open  :'Images/folderopen.gif',
  homepage :'Images/home.gif',
  close  :'Images/folder.gif',
  file  :'Images/file.gif',
  help  :'Images/help.gif',
  join  :'Images/T.gif',
  joinbottom :'Images/L.gif',
  plus  :'Images/Tplus.gif',
  plusbottom :'Images/Lplus.gif',
  minus  :'Images/Tminus.gif',
  minusbottom :'Images/Lminus.gif',
  blank  :'Images/blank.gif',
  line  :'Images/I.gif',
  mudule  :'Images/mudule.gif',
  root  :'Images/root.gif'
};

function PreLoad(){
 for(i in Icon){
 var tem=Icon[i]
 Icon[i]=new Image()
 Icon[i].src=tem
 }
}
PreLoad()

function Cls_jsTree(obj,target,ExpandOne){
 this.obj=obj;
 this.Tree=new Node(0)
 this.Root=null
 this.Nodes=new Array()
 this.target=target?target:"FrameMain";
 this.ie=document.all?1:0;
 this.ExpandOne=ExpandOne?1:0
}

function Node(id,pid,txt,link,title,target,xicon){
 this.Index=null;
 this.id=id;
 this.pid=pid
 this.parent=null
 this.txt=txt?txt:"New Item"
 this.link=link
 this.title=title?title:this.txt
 this.target=target
 this.xicon=xicon
 this.indent=""
 this.hasChild=false;
 this.lastNode=false;
 this.open=false
}

Cls_jsTree.prototype.add=function(id,pid,txt,link,title,target,xicon){
 target=target?target:this.target
 var nNode=new Node(id,pid,txt,link,title,target,xicon);
 if(pid==this.Tree.id)nNode.open=true;
 nNode.Index=this.Nodes.length
 this.Nodes[this.Nodes.length]=nNode
}

Cls_jsTree.prototype.InitNode=function(oNode){
 var

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值