JavaScript面向对象技术实现树形控件

核心提示： 在HTML文档的部分加入下面这段代码，这段代码的作用是创建两个Image对象，JavaScript面向对象技术实现树形控件(3)，分别对应分支打开、折叠状态的文件夹图形，另外还有几个工具函数，swapImage()函数的原理和showBranch()函数基本相同，它首先判断当前分支的图形(

在HTML文档的部分加入下面这段代码。这段代码的作用是创建两个Image对象，分别对应分支打开、折叠状态的文件夹图形。另外还有几个工具函数，用于打开或折叠任意分支的子元素，同时根据分支的打开或折叠状态相应地变换文件夹图形。

　　< script language="JavaScript">
　　var openImg = new ..Asset not found..;
　　openImg.src = "open.gif";
　　var closedImg = new ..Asset not found..;
　　closedImg.src = http://tech.ddvip.com/2008-11/"closed.gif";
　　function showBranch(branch){
　　var objBranch = document.getElementById(branch).style;
　　if (objBranch.display=="block")
　　objBranch.display="none";
　　else
　　objBranch.display="block";
　　swapFolder('I' + branch);
　　}
　　function swapFolder(img){
　　objImg = document.getElementById(img);
　　if (objImg.src.indexOf('closed.gif')>-1)
　　objImg.src = openImg.src;
　　else
　　objImg.src = closedImg.src;
　　}
　　< /script>

代码预先装入图形对象，这有利于提高以后的显示速度。showBranch()函数首先获得参数提供的分支的样式，判断并切换当前样式的显示属性(在block和none之间来回切换)，从而形成分支的扩展和折叠效果。swapImage()函数的原理和showBranch()函数基本相同，它首先判断当前分支的图形(打开的文件夹还是折叠的文件夹)，然后切换图形。

四、tree对象

下面是tree对象的构造函数：