JQuery - Binary Tree plugin

Author

Contributor

What it is

This plugins allows you to display divs in a binary tree format with a single call. It also draws lines between the divs.

What's new?

1.1.0: Flip option
1.0.5: The return value is an array of every drawn btree. You can now make a single call to the script, on classes for example, rather than needing to call it for every required entity.
1.0.4: Fixed an issue where the script wouldn't work under Internet Explorer if the container div had no border.
1.0.3: Fixed an issue where the script wouldn't work at all under Internet Explorer due to an error reported by the JSon Parser.

Requiremens

JQuery (tested with jquery-1.4.min.js)
wz_jsgraphics
jquery.btree.js (v1.1.0)

Binary Tree in action

Vertical Space:
Horizontal Space:
Color:
Stroke:
Border width:
Flip:
OrientationHorizontal Vertical

Box1

Box2

Box3

Box4

Box5

Box6

Box7

Box8

Box9

Box10

Box11

Box12

Box13

Box14

Box15

Usage

Import the 3 required scripts.
Create a div that will contain your boxes.
Create your inner divs. They will be the boxes. (The css position attribute of those divs will become relative.)
Each of those divs content MUST be into a span. (The css white-space attribute of those spans will become nowrap.)
- Why spans? Well, the first thing the script does is computing what are the maximum widht and height required by the boxes. To do so, the script iterates through those spans. Spans are inline, so, unlike divs, their width will be as small as possible instead of taking all the available space. If you are only having text into your boxes, this is more convenient than manually specifying a width for your divs. Should you want to manually specify the size of the boxes, you can still put a div into the span and set it's dimensions.
Call the function btree() on your outer div.
Et voilà!

Should you need to redraw the tree, keep a reference to it and call clear(). Then you can recreate it with the original btree() call.

Parameters

hSpace:	Horizontal spacing
vSpace:	Vertical spacing
borderWidth:	The border width of the boxes.
branchColor:	The color of the branches
branchStroke:	The branches thickness
horizontal:	If true, the tree will be horizontal. Othewise it will be vertical
flip:	If true, the tree display will be flipped on the current orientation

Known fact

If you call btree() when your page isn't fully loaded (it could still be loading components such as images for example), then your tree might not display properly since it will be drawn before the components have their real size. You have two options.

Specify the size of your components.
Only call the script when all components of the tree are loaded.

Help

Once logged to JQuery, you can go to one of these: