Ajaxian

Why another tree control?

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.

Are we seeing an increase in unorbtrusive javascript controls?

( via Ben Nolan )

6 Comments »

Comments feed

If anyone is interested I wrote a unobtrustive control with pretty the same features as this but in a much smaller filesize (it’s only a few lines long) about a year and a half ago:

http://www.danwebb.net/lab/archives/000018.html

The example on the site doesn’t have the tree lines because I was trying to keep the css simple for that example but you can adjust the css to do that pretty easily.

Comment by Dan Webb — October 31, 2005

And for what it’s worth, there’s my beginning at an unobtrusive-ish HTML outline tree editor:

http://decafbad.com/blog/2005/07/12/xoxo-outliner-experiment

Comment by l.m.orchard — October 31, 2005

In ‘my version’ ( http://ktk.xs4all.nl/stuff/javascript/list-treeview-menu/ ) item 1.2.1, 1.2.2 and 1.2.3 should be accessible, even with JS turned off.

Comment by Krijn Hoetmer — November 1, 2005

I modified JS Cook Tree to make it use AJAX,
support n level hierarchy. I used this to Display
Amazon Catalogue in a new “innovative” way.
URL :- http://lmap.co.nr/Amazon1.htm

In the tree, one can browse amazon catalogues based
on the browse id. On reaching the item level (marked
with red dots) one can click on it to view details such
as price, image etc.

Comment by Veerendra Shivhare — November 11, 2005

And for what it’s worth, there’s my beginning at an unobtrusive-ish HTML outline tree editor:

http://decafbad.com/blog/2005/07/12/xoxo-outliner-experiment

Comment by Tom in Cala Dor Palma de Mallorca — October 1, 2006