Build A JavaScript Tree Control By Tom Duffy, DHTML Pro
Users are very familiar with tree controls. Trees minimize the screen space necessary to present hierarchical information by allowing users to expand and contract nodes. In doing so, users can find information easily and need only display the information that interests them.
Tree controls, in the context of a Web page, have only a few requirements:
Implementing a tree control is relatively simple. In this article, I'll show you how to build a tree control that contains three levels. The number of levels is arbitrary; you can extend the control to include as many levels as you'd like. For the record, this control targets Internet Explorer 4+ and Netscape 6.x. It takes advantage of the fact that both of those browsers can dynamically write content to the display canvas.
Screen real estate is at a premium on many Web pages. Developers need a way to present a lot of information in a limited space. But users need familiar user interface conventions. How do you get more information in a smaller space without confusing end users?
Build a familiar tree control using some simple style rules, a few graphics, and some JavaScript.
HTML and JavaScript-based trees are becoming more common every day. Are you using tree controls already? Are you using a commercial version or did you roll your own. What do you think of this article's approach to implementing a tree control? Join the discussions at
Web.dhtml.general or Web.dhtml.scripting to get answers, make comments, or help others with their problems.
