大多数 Web 开发人员都是以一种分层方式组织内容,其中一些页面显示一般内容的分类,然后这些分类能够链接到更具体的页面。例如一个公司的 Web 站点的主页面可能有一个顶级链接,分别链接到公司信息、产品、服务和技术支持。点击公司的产品链接然将会打开一个页面,该页面包含链接到公司不同产品页面的链接。分层结构能够让用户看清所有的选项,并选择查看具体的信息。
树是一种表现分层结构的很好的方式,可以用来跟踪分层结构,并理解它们的表现方式。树的分支对应信息分类,树的叶子对应特写类别内的信息的具体实例。为了使用更少的页面显示层次信息,一些树就被设计出来用于展开和折叠。在上面的例子中,可以点击加号(+)来展开树的分支,点击减号(-)折叠展开的分支。树的叶子以一个星号(*)标记。如果点击一个叶子的文本,就会弹出一个独立的窗口显示一个新页面。
在今天的专栏里,我将会说明树的工作方式以及如何实现树。很多读者都提出要求一个能够工作在 Internet Explorer 4.0 及以后版本、Navigator 4.0 以及新的 Navigator 6.0 的纯 JavaScript Tree 对象。这个 Tree 对象将能够在这些浏览器中工作。
文件 tree.js 定义 Tree 对象。Tree 对象使用 Tree() 构造方法构造,其形式如下:
var treeRef = new Tree("treeRef","t1")
第一个参数是一个要引用到被创建的 Tree 对象的变量名。该变量由树的事件处理函数引用。注意变量名本身并没有被传递,实际传递的是包含变量名的一个字符串。第二个参数是 Tree 对象的一个唯一的 ID。其名字用来保存一个与树相关的 cookie。
Tree 对象包含有 Node 对象表示树的分支和叶子。Node 对象使用 Node() 构造方法构造(也在 tree.js 中定义):
var node1 = new Node(name, link, target, tree)
参数 name 是表示分支或叶子的文字。参数link 是点击文本时打开的 URL。参数 tree 是一个 Tree 对象的变量名。下面是 Node() 构造方法的一个例子:
var node9 = new Node("News About the Web", "http://www.news.com/", "external", treeRef)
使用 addNode() 方法添加树的最高级的节点:
treeRef.addNode(node1)
Node 对象也有一个 addNode() 方法用于添加一个节点的子节点:
node1.addNode(node9)
Tree 构造方法,Node 构造方法和 addNode() 方法是建立一棵树所要用到的所有方法。