AnimTree

TreeParams

TreeParams allows you to customize the behavior an appearance of your tree.

Here is a the TreeParams that comes in the example. Make a duplicate and change the values to suit your needs.

You can place this in the head of your document or in an external js file.

Object Literal Syntax

Before you dive right in, it's a good idea to know how to use object literals. TreeParams is an object literal.

Customizing TreeParams

You can change your icons with the value for IMG_EXT.OVER, IMG_EXT.DOWN, IMG_EXT.DOWN_OVER.

Read the object diagram below to understand what each parameter does and change the value of your own TreeParams to suit your needs.

All you have to do is change the property values in treeparams.js. It's not as hard as it looks.

TreeParams = {

OPEN_MULTIPLE_MENUS  : boolean
                     // if true, more than one menu can
                     // be open at a time. Otherwise,
                     // opening a new menu closes any
                     // open menu.


TIME_DELAY           :  int
                      // How slowly a menuNode collapses
                      // in milliseconds. (0 to 100).


OPEN_WHILE_CLOSING   :  boolean
                      // If OPEN_MULTIPLE_MENUS is false,
                      // OPEN_WHILE_CLOSING will simultaneously
                      // open a new menu while closing the
                      // currently open menu.
                       
                       
IMG_EXT              :  Object { 
                      // img file nomenclature: "menuicon.gif"
                      // "<menuicon>" + "" + ".gif" 
 
                      // "<menuicon>" may change for each image.
                      // if you don't want the image to change, 
                      // use and empty string, or "".
  
                    OVER       : String 
                                 // Icon appearance in mouseover state.
                                 // "<menuicon>" + IMG_EXT.OVER + ".gif" 
  
                    DOWN       : String 
                                 // Icon appearance in menu open state.
                                 // "<menuicon>" + IMG_EXT.DOWN + ".gif" 
  
                    DOWN_OVER  : String
                                 // Icon appearance in mouseover in menu
                                 // open state.
                                 // "<menuicon>" + IMG_EXT.DOWN_OVER + ".gif" 
                    }




// for backwards compatibility with an older version of AnimTree.
ICON_TYPE_INDIVIDUAL  : boolean
                      // If false, then OPEN_MENU_ICON, OPEN_OVER_MENU_ICON,
                      // and CLOSED_OVER_MENU_ICON are used instead. 
                       
                      // If true, each button may have a different 
                      // icn for all four states; closed, closed-over, 
                      // open, and open-over. If true, you can omit 
                      // CLOSED_OVER_MENU_ICON, OPEN_MENU_ICON, and 
                      // OPEN_OVER_MENU_ICON.



CLOSED_OVER_MENU_ICON : String
                      // When ICON_TYPE_INDIVIDUAL is false, this is the
                      // src for a closed menu's icon when buttonOver is
                      // called.
OPEN_MENU_ICON        : String
                      // When ICON_TYPE_INDIVIDUAL is false, this is the
                      // src for an open menu's icon.

OPEN_OVER_MENU_ICON   : String
                      // When ICON_TYPE_INDIVIDUAL is false, this is the
                      // src for an open menu's icon when buttonOver is
                      // called.
                     
}

Again, it's not as hard as it looks. Really. Email/phone support comes with every license. Give it a try.

Next in this tutorial: PersistentTree Tutorial