Free Code: "Unobtrusive JavaScript" Tree Control

Posted by Sam on 30 October 2005

Here's a tree control that uses semantic HTML, unobtrusive JavaScript, and is easily reusable in a bundle of applications.

Here's the first of what will hopefully be a bunch of code that we donate to the web at large.  I made this a few months ago, but it's been serving me well.

There are a lot of tree controls out there, but most of them are tacky, heavyweight relics of the"DHTML" era.  I felt it was time for a change.  In particular, I wanted to adopt "unobtrusive javascript" techniques.  Among other things, the script has these notable features:

• All of the styling is in a seperate CSS file.  The only thing that the JavaScript manipulates is class names.   This gives you a lot of control over the design relatively easily.
• There is a no "set up code".  The script searches for <ul class="tree"> and applies its magic to that.
• All of the content as loaded in a set of nested <ul>s - the simplest, code that I could think of that was semantically linked to heirachical data.

Go here for demo, instructions, and a bit of information about how I put it together.

If you've got comments, requests, suggestions, etc, email me on sam@silverstripe.com.