JavaScript系列之(2)JavaScript 导航树

ZDNet软件频道 时间:2004-05-09 作者:Builder.com |  我要评论()
本文关键词:javatips
大多数 Web 开发人员都是以一种分层方式组织内容,其中一些页面显示一般内容的分类,然后这些分类能够链接到更具体的页面。
本文译自Builder.com,未经许可请勿转载

大多数 Web 开发人员都是以一种分层方式组织内容,其中一些页面显示一般内容的分类,然后这些分类能够链接到更具体的页面。例如一个公司的 Web 站点的主页面可能有一个顶级链接,分别链接到公司信息、产品、服务和技术支持。点击公司的产品链接然将会打开一个页面,该页面包含链接到公司不同产品页面的链接。分层结构能够让用户看清所有的选项,并选择查看具体的信息。

树是一种表现分层结构的很好的方式,可以用来跟踪分层结构,并理解它们的表现方式。树的分支对应信息分类,树的叶子对应特写类别内的信息的具体实例。为了使用更少的页面显示层次信息,一些树就被设计出来用于展开和折叠。在上面的例子中,可以点击加号(+)来展开树的分支,点击减号(-)折叠展开的分支。树的叶子以一个星号(*)标记。如果点击一个叶子的文本,就会弹出一个独立的窗口显示一个新页面。

在今天的专栏里,我将会说明树的工作方式以及如何实现树。很多读者都提出要求一个能够工作在 Internet Explorer 4.0 及以后版本、Navigator 4.0 以及新的 Navigator 6.0 的纯 JavaScript Tree 对象。这个 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() 方法是建立一棵树所要用到的所有方法。


百度大联盟认证黄金会员Copyright© 1997- CNET Networks 版权所有。 ZDNet 是CNET Networks公司注册服务商标。
中华人民共和国电信与信息服务业务经营许可证编号:京ICP证010391号 京ICP备09041801号-159
京公网安备:1101082134