[thelist] Explorer like tree?

Simon Perry thelist at si-designs.co.uk
Wed May 26 16:53:08 CDT 2004


Marcus Andersson wrote:

> Tony Crockford wrote:
>
>>
>> like this?
>>
>> http://webfx.eae.net/dhtml/xtree/
>
>
> The look is dead on (well, almost since I use different icons) and it 
> doesn't use tables (which is good) but it uses images in the exact 
> same way that I already do to draw the indents (the dotted lines). And 
> that is what I want to get away from (more than get away from tables 
> actually) since every dotted line is constructed from several small 
> images that each is about 9x9px. The image count will be huge if you 
> draw a big tree (and I do sometimes draw huge trees) so the icons 
> alone will be enough.

Marcus,

Surely you can recycle those images, you can even take things one step 
further and use one image with all you icons on it. This approach was 
started of by pixy's Fast rollovers[0] and expanded on in an article on 
alistapart CSS Sprites[1]. The javascript to control the menu should 
also be quite straight forward if you use the DOM[2] to transverse your 
nested lists adding the events and behaviors you require. I would create 
a static CSS styled tree first and then prime/collapse it using a 
function on page load, that way if a user has javascript switched off 
then the whole tree will still be available.

Simon

[0] http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/
[1] http://www.alistapart.com/articles/sprites/
[2] http://www.brainjar.com/dhtml/intro/



More information about the thelist mailing list