Introduction

Introduction to the Zapatec DHTML Tree Wizard

Using the Zapatec Javascript Tree Wizard you can construct a tree and choose the various configuration options. When you are done, the Wizard will generate the necessary Javascript code and you can just paste the code into your HTML page.
Use the Next and Previous buttons to navigate through the tabs. To go to a specific tab, just click on the tab header on top.
Move your mouse over the question marks These tooltips provide additional information in the Wizard. To make them go away, just move the mouse away from the question mark and outside the tooltip box. to see the help for specific items.

Tree contents You will most probably like to generate a tree dynamically from a database. However, for the purpose of our wizard, the generated content will be a simple static list that shows you how the generation should be done.

Tree contents

Here you can define the layout of your your tree. First click an item on the left to select it. Then, use the links on the left to create/remove items and sub-items relative to the selected item. You can also change the text of the item in the box.
Since the Generated tree layout is done in HTML, you may find it easier to focus here on the tree features and then finish moving the nodes around in your editor.

:: Insert Item Before
:: Insert Item After
- ALT-B: insert new item before the current one
- ALT-A: insert new item after the current one
- ALT-S: add a subtree to the current item
- ENTER: shorthand for ALT-A :: Remove Node
:: Add Subtree

Item 1

Item 2

SubItem 2.1

SubItem 2.2

SubItem 2.2.1

SubItem 2.2.2

SubItem 2.3

Configuration

Tree configuration

Specify your tree's properties, and click on next to see the generated tree. You can go back and forth between this and the next tab to experiment with what the different options do.

Highlight selected node Check this box if you want the a node to be highlighted when a user clicks on it.

Icons style Use this menu to choose the style of CSS based icons you'd like or "none" if you want no icons.

Compact mode Check to turn on compact mode in the tree. In compact mode, a tree will only allow one expanded branch per level. When a user expands another branch, the tree will automatically collapse the previous branch, thus keeping a compact height. This setting implies "collapsed".

Dynamic initialization If you check this box the tree will use a technique called "dynamic initialization" which works much faster for big trees. Subtrees are generated "on demand" rather than from at start up, greatly reducing the start up time. You only need to use this option with large trees that need to handle hundreds of nodes or more. This parameter implies "collapsed".

Collapsed tree Check this box if you want the tree to be initially collapsed with all the branches closed.

Initial level: Check this box if you want the tree to expand only to a certain level. You specify a level and only branches included in that level will be open.
For instance in a family tree with level 2, children and grand children will show but not great grand children.

Preview

Tree preview

Here is the generated tree. Click on previous if you want to change any options, or next to generated the code for this tree.

Get your code

Your code is below

Click on select all to copy the code into the clipboard. Go into your editor paste and save it.
The paths in the code assume that the tree file will be in the same folder where the zptree folder is in, not in the zptree folder itself. If you would like the file to be in a different folder, you will need to adjust the paths accordingly.

	Highlight selected node Check this box if you want the a node to be highlighted when a user clicks on it.
	Icons style Use this menu to choose the style of CSS based icons you'd like or "none" if you want no icons.
	Compact mode Check to turn on compact mode in the tree. In compact mode, a tree will only allow one expanded branch per level. When a user expands another branch, the tree will automatically collapse the previous branch, thus keeping a compact height. This setting implies "collapsed".
	Dynamic initialization If you check this box the tree will use a technique called "dynamic initialization" which works much faster for big trees. Subtrees are generated "on demand" rather than from at start up, greatly reducing the start up time. You only need to use this option with large trees that need to handle hundreds of nodes or more. This parameter implies "collapsed".
	Collapsed tree Check this box if you want the tree to be initially collapsed with all the branches closed.
Initial level:	Check this box if you want the tree to expand only to a certain level. You specify a level and only branches included in that level will be open. For instance in a family tree with level 2, children and grand children will show but not great grand children.