JQuery - Binary Tree plugin

Author

Frank-Mich

Contributor

Sergiy Kovalchuk

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?

Requiremens

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

  1. Import the 3 required scripts.
  2. Create a div that will contain your boxes.
  3. Create your inner divs. They will be the boxes. (The css position attribute of those divs will become relative.)
  4. Each of those divs content MUST be into a span. (The css white-space attribute of those spans will become nowrap.)
  5. Call the function btree() on your outer div.
  6. 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.
  1. Specify the size of your components.
  2. Only call the script when all components of the tree are loaded.

Help

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