(2003-03-16) Version 1.17 - Added target property.
(2003-02-15) Version 1.16 - The selected node can now be distinguished even when the tree control loses focus.
(2002-10-29) Version 1.15 - This version is based on 1.13 and fixes the bugs 1.14 were supposed to fix.
(2002-10-23) Version 1.14 - Minor fix for a case where the plus icon used wrong image.
(2002-08-20) Version 1.13 - Added usePersistence flag to allow disable the usage of cookies.
(2002-06-13) Version 1.12 - Various bug fixes.
(2002-01-27) Version 1.11 - Bug fixes and improved mozilla support.
(2001-09-23) Version 1.1 - New features included keyboard navigation (ie) and the ability to add and remove nodes dynamically and some other small tweaks and fixes.
(2001-03-18) Added getSelected and get/setBehavior that can make it behave more like the windows explorer
(check usage for more information about it).
(2001-01-10) Original Version Posted.
An object based tree widget with persistence using cookies that works in ie5 and mozilla.
Among the first things I created with DHTML was a tree view, that was over four years ago (spring 1997), since then a lot has happened in the browser market, and also with my skills in JavaScript and DHTML. Today I give you the third version of this tree view widget. The idea behind it is the same as in the first version, to emulate the tree widget found in many modern graphical operation environments, such as Microsoft Windows, and so is the basic idea of how to accomplish this, to toggle the display property of elements depending on the expanded state of their parents. However the similarities stop there. Another thing I can mention from a historical point of view is that this is the first complex script that I have created that works under two different browsers without the use of browser detection, the same code is actually used for ie5 and mozilla. :o)
This new version is based on objects, so you do not create the actual html code for the tree yourself, you create an object (the tree's root folder) and then you add child items to this. Once you're done adding items the actual html code is generated and inserted into the page. This makes it very easy to create and update the content of the tree (or to dynamically generate it). If you've seen Erik's new xMenu you will notice that it's working in similar way.
This script also features persistence using per session cookies. So now if you go to a page using this tree widget, expand a few folders and then leave the page again (by following a link or by typing a new url manually) it will store the state of each folder in a cookie so when you go back to the page it will remember what folders you last had opened and open them for you. This could be very useful if you use this for site navigation etc.
The persistence functionality is using the node creation order to remember the state of each node, this works fine for static trees, but not for dynamic ones since adding and/or deleting nodes will change the original order numbering.
History & Introduction
Usage
API
Implementation
Demo
Download