Flexible JavaScript Tree Menu: dTree
26
Aug
While creating a filebrowser for a project, I have tried several JavaScript tree menus and found this one the easiest to work with.
dTree is an easy to setup & use classic JavaScript tree menu.
With a XHTML 1.0 strict validated output, this tree menu supports unlimited number of levels and remembers the state between pages.
Other features of dTree:
- Can be used with or without frames
- Possible to have as many trees as you like on a page
- All major browsers supported
- Alternative images for each node
The items don’t need to be in an order within the code as you can re-order them. This is a functional feature when creating the menu from a database.
The script is well-documented and this example shows how flexible it is.
Requirements: No Requirements
Compatibility: All Major Browsers
Website: http://www.destroydrop.com/javascripts/tree/
Demo: http://www.destroydrop.com/javascripts/tree/example/
Compatibility: All Major Browsers
Website: http://www.destroydrop.com/javascripts/tree/
Demo: http://www.destroydrop.com/javascripts/tree/example/
- Tags:
Javascript
- Filed under: Goodies, Menu & Navigation
- 11 Comments
11 Responses for "Flexible JavaScript Tree Menu: dTree"
[...] Sitio: http://www.destroydrop.com/javascripts/tree/ [...]
Would love to see the file browser demo and code that you created using this.
@frank,
I’m hoping to release the code however it is a part of a project & I must clean-up other stuff before releasing it.
The result is very similar to: http://www.webresourcesdepot.com/customizable-ajax-file-browser-for-jquery/ but does not depend on any frameworks.
hai,
i developed a tree in java script by using WEDbFXTree().but it is working only in MS-I Explorer.It is not working in MOzilla FireFox an other Explorers.can u tell me this dTree() will work in all the Explorers.reply immediatly.It’s urgent…
thanking u..
balaji
@balaji,
As far as I tried, yes. But just give the demo a try with different browsers.
This is a great library. I’ve been using it for years and even though it has not been updated since 2003 in works great in all browsers.
Two of its biggest advantages are:
* it is very easy to hack if you need extra functionality (e.g. ajax loading of the subtrees takes about 30 extra lines of js code)
* it accepts a parent-child list of nodes which is very easy to build with one sql statement if you display dynamic trees. Most of the others tree libraries need nested objects to run and nested objects are a (recursive) pain to build.
Ivan, can you post or send me an example op a way to dynamic add/delete nodes of the tree. I try to figure it out but havent find a solution.
Um, dtree doesn’t work properly in a horizontally scrollable div in Mozilla. It doesn’t render “outside” the div, so it doesn’t scroll. If you then cause horizontal scrolling by something else in the div, then you can see that everything in tree was cut off at the div boundary, and everything to the right wasn’t drawn.
In IE it scrolls horizontally properly…
I *really* don’t like working with Mozilla – everything is painful…
((
Hi,
I found a couple bugs and an issues with browser compatibility, the homepage has no forum or comments section so I post my fixes here for anyone who might be interested
Line: (Bug)
if (node.url || ((!this.config.folderLinks || !node.url) && node._hc) ) str += ‘‘;
should be:
if (node.url || ((!this.config.folderLinks || !node.url) && node._hc && node.pid != this.root.id)) str += ‘‘;
Line: (Bug)
if (this.config.useStatusText) str += ‘ onmouseover=”window.status=\” + node.name + ‘\’;return true;” onmouseout=”window.status=\’\';return true;” ‘;
should be:
if (this.config.useStatusText) str += ‘ onmouseover=”window.status=\” + (node.name+”).replace(/[\\"']/g, ‘\\$&’).replace(/\u0000/g, ‘\’) + ‘\’; return true;” onmouseout=”window.status=\’\'; return true;” ‘;
Line: (cross browser compatibility issue)
str += ”;
should be:
str += ”;
Good luck
Sorry, forgot
tags, here is the code again.Line: (Bug)
if (node.url || ((!this.config.folderLinks || !node.url) && node._hc) ) str += '';
should be:
if (node.url || ((!this.config.folderLinks || !node.url) && node._hc && node.pid != this.root.id)) str += '';
Line: (Bug)
if (this.config.useStatusText) str += ' onmouseover="window.status=\'' + node.name + '\';return true;" onmouseout="window.status=\'\';return true;" ';
should be:
if (this.config.useStatusText) str += ' onmouseover="window.status=\'' + (node.name+'').replace(/[\\"']/g, '\\$&').replace(/\u0000/g, '\') + '\'; return true;" onmouseout="window.status=\'\'; return true;" ';
Line: (cross browser compatibility issue)
str += '';
should be:
str += '';
Good luck
Hi
how can I set it to works using frames?