Customizable graphics

COOLjsTree and COOLjsTree Professional have two basic kinds of graphics: buttons and folders/documents. Trees 1, 2 and 3 represent buttons, trees 4, 5 and 6 represent folder and documents, tree 7 represent combination of these two kinds of graphics.

Button is an icon which will be displayed near nodes with subnodes. It has two states: collpased and expanded. To define custom images you have to modify tree format definition:

var TREE1_FORMAT = [
    ...
//2. show +/- buttons
    true,
//3. couple of button images (collapsed/expanded/blank)
    [ "img/c1.gif", "img/e1.gif", "img/b.gif" ],
//4. size of images (width, height,ident for nodes w/o children)
    [16,16,0],
    ...

Field nr.2 turns off or on buttons, field nr. 3 defines image set, field nr.4 defines images size and indentation for nodes without images.

Folder images will be displayed near nodes with subnodes (two states: collapsed and expanded), and document images will be displayed near nodes without subnodes. These images are not included in links, so they are not clickable. To define custom images you have to modify tree format definition:

var TREE4_FORMAT = [
    ...
//5. show folder image
    true,
//6. folder images (closed/opened/document)
    ["img/fc1.gif", "img/fe1.gif", "img/d1.gif"],
//7. size of images (width, height)
    [16,16],
    ...

Field nr.5 turns off or on folder/document images, field nr. 6 defines image set, field nr.7 defines images size.

You can combine these two kinds of graphics like in sample tree 7. To do this you have just turn both buttons and folders/documents on (fields 2 and 5), define image sets (fields 3 and 6) and define sizes (fields 4 and 7).

Also COOLjsTree Professional offers some more graphics capabilities. Please look at these examples for more details.