# jsTree

## javascript tree component

### Documentation

## Output

The output basically follows the structure of the HTML data source:

    <your-container-node class="tree">
      <ul class="jstree-default jstree-your-theme-name">
        <li class="open|closed|leaf [your-class-names]" [your-attributes="attribute_values"]>
          <a
            class="language-of-node [your-class-names]"
            style="[background-image:url(your-icon-name);] [your-styles]"
            [your-attributes="attribute_values"]>Your node name</a>
            <ul>
            <!-- CHILD NODES -->
            </ul>
        </li>
      </ul>
    </your-container-node>

Your container node get the class tree applied to it. The first <ul> has the class jstree-default and then if different - the name of the theme applied. This ensures that the applied theme's rules override the matching default theme rules.

NOTE that it is not good practice to set the actual <ul> node as the source of the tree (when using predefined HTML).

Each <li> node has one of the classes open, closed or leaf. You can check for those classes in the callback functions, so that you know what node you are dealing with. A leaf node has no children, a closed node has chidren but they are not visible (if there is no <ul> node within this one - the children are not loaded yet), an open node has children, and they are visible.

The count of <a> nodes in each <li> depends on the count of languages for the tree (there is one <a> node for each language, and the node has the language name as a class) (NOTE that only one language is visible at a time). If you do not set the href attribute, a # is set.