Acknowledgment

Syntax Rules

Place the tag %TREEBROWSER{parameters}% immediately before a bulleted or numbered list. The lists can be handcrafted, generated by another Plugin, a %TOC%, or the result of a FormattedSearch. The list will be rendered in a tree-like fashion (similar to the explorer folder list). Whenever a new indentation level is started, the subsequent nodes at this or a lower indentation level are shown as descendents of the preceding node. The following parameters can be used to configure the appearance of the tree:

Parameter

Description

Default

"name" ortheme="name"

Select a rendering theme

none

title

Required. This text serves as the root of the tree

none

openAll

If on, the tree is shown fully expanded.

off

openTo

Must be an integer. If present, the tree is expanded to the given node, as numbered from the root.

0

shared

Must be a string. If present, the state of the tree is shared across all trees using this string. For example, if the tree is used in the WebLeftBar, the state will hold at all topics with this WebLeftBar. It's basically the name of the JavaScript object representing your tree.

none

uselines

Set to false if you don't want to show lines linking nodes and leafs in the tree

true

useplusminus

Set to false if you don't want to show '-' and '+' signs. One can use something like onclick='javascript: tree.o($index);' in the tree item to trigger opening/closing of a node.

true

noindent

Set to true to show children at the level of their parent. It suppresses children indentation. Enabling noindent will disable uselines and useplusminus.

false

nocss

Set to true to prevent inclusion of dtree.css.

false

closesamelevel

If true only one node within a parent can be expanded at the same time. openAll() and closeAll() functions do not work when this is enabled.

false

noroot

Prevents rendering of the title line. Useful if you don't want to show any title.

false

warn

Text to be displayed if no tree was found.

none

style

Name of the CSS file to include without the .css extension. The CSS file must be attached to this topic.

dtree

autotoggle

Set to on will enable node open/close when clicking the node item. Typically used for menu style tree along with noindent.

off

nodeactions

Defines node functionality in a comma separated list of HTML event and dTree function. Typically used for menu style tree along with noindent. Format:

<event> <function>[,...]

event is an HTML event e.g. onclick, ondblclick, onmouseover, onmouseout... function is one of the three dTree functions: open, close, toggle

none

popup

Set to on to enable pop-up menu mode. Typically used with closesamelevel. See pop-up menu example.

off

closepopupdelay

Pop-up mode only. Delay in millisecond before all popup close once the mouse cursor has left the menu structure.

The root icon image is shown at the root of the tree, the icon image is shown at every leaf node, the folder icon image is shown at every collapsed internal node, and the open folder icon image is shown at every expanded internal node. The icon images point to files attached to TWiki topics and are referenced in the standard manner. If no path is given, the images are taken from DocumentGraphics.

If an icon image is omitted, the following defaults are chosen: , , ,

If JavaScript is not enabled, the list is rendered as usual, and the =%TREEBROWSER% tag is omitted.

Refer to any icon at the beginning of the bullet using a full path or URL:

icon:http://foswiki.org/pub/System/DocumentGraphics/xls.png Followed by normal bullet text

CSS classes

A number of classes are used to facilitate look and feel customizations through CSS.

Constant class

This class won't change from one tree to the other:

treeBrowserPlugin: given to the div element encapsulating the whole tree and javascript.

Variable classes

Those classes are prefixed with the style parameter. For clarity of the documentation we used the default dtree prefix.
Variable classes allow for multiple tree style support on one page.

dtree: given to the div element encapsulating the whole tree. Since v0.1.

dtreeRoot: given to the div element encapsulating the root or title of the tree. Introduced in v1.1.

dtreeLeaf: given to the div element encapsulating a tree item without children. Introduced in v0.9.

dtreeNodeOpened: given to the div element encapsulating a tree item that is showing children. Introduced in v0.9.

dtreeNodeClosed: given to the div element encapsulating a tree item that is hiding children. Introduced in v0.9.

dtreeChildren: given to the div element encapsulating the children of a tree item. Changed in v0.9. Formerly clip.

dtreeLevel0: given to the div element encapsulating the children of the tree root item. Introduced in v0.9.

dtreeLevel1: given to the div element encapsulating the children of level 0 items. Introduced in v0.9.

dtreeLevel2: given to the div element encapsulating the children of level 1 items. Introduced in v0.9.

dtreeLeveln: given to the div element encapsulating the children of level n-1 items. Introduced in v0.9.

dtreeTransluscentBackground: given to the div element used for popup translucent background. Introduced in v1.5.

dtreeFakeItem: given to the div element simulating nodes and leaf in dtreeTransluscentBackground. It guarantees same size for the translucent background and actual dtreeChildrendiv. Typically you should give dtreeFakeItem the same margin and padding properties as for dtreeLeaf, dtreeNodeOpened and dtreeNodeclosed. Introduced in v1.5.

(v0.8) - Adding noroot and warn parameters. Now using preRenderingHandler instead of the deprecated startRenderingHandler . %TREEBROWSER% are hidden if there is no tree to render. Fixes TOC icons problem with TWiki:Plugins.NatSkin. By Stéphane Lenclud.