三、脚本设计
本文实现的树形控件包含一个tree对象，tree对象拥有一个branches子对象集合;每一个branch(分支)对象又拥有一个子对象的集合。子对象可以是branch对象，也可以是leaf(树叶)对象。所有这三种对象分别实现一个多态性的write()方法，不同对象的write()方法根据所属对象的不同而执行不同的操作，也就是说：tree对象的write()方法与branch对象的write()方法不同，branch对象的write()方法又与leaf对象的write()方法不同。另外，tree和branch对象各有一个add()方法，分别用来向各自所属的对象添加子对象。
在HTML文档的部分加入下面这段代码。这段代码的作用是创建两个Image对象，分别对应分支打开、折叠状态的文件夹图形。另外还有几个工具函数，用于打开或折叠任意分支的子元素，同时根据分支的打开或折叠状态相应地变换文件夹图形。
< script language="JavaScript">
var openImg = new ..Asset not found..;
openImg.src = "open.gif";
var closedImg = new ..Asset not found..;
closedImg.src = "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()函数基本相同，它首先判断当前分支的图形(打开的文件夹还是折叠的文件夹)，然后切换图形。
