Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Build an Object-Oriented Tree Control Using JavaScript : Page 5

When you need to display hierarchical information in your Web pages, build this Explorer-like tree control by creating only three polymorphic JavaScript objects.

Set up the Leaf Objects
The leaf objects are actually the easiest objects in the system to set up:

function leaf(text, link){ this.text = text; this.link = link; this.write = writeLeaf; }

Each leaf object gets a text property for display and a link property. In addition leaf objects implement the write() method like this:

function writeLeaf(){ var leafString = '<a href="' + this.link + '">'; leafString += '<img src="doc.gif" border="0">'; leafString += this.text; leafString += '</a><br>'; return leafString; }

The writeLeaf() function sets up the HTML string for display. Note that leaf objects don't need to implement an add() method as they represent the "end" of a branch.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.