Dynatree - Fiddle with options

This sample includes all options (with their default values) to allow playing with them.

HTML

<script src="http://dynatree.googlecode.com/svn/trunk/src/jquery.dynatree.js"></script>
<link rel="stylesheet" href="http://wwwendt.de/tech/dynatree/src/skin-vista/ui.dynatree.css">
<div id="tree">
    <ul id="treeData" style="display: none;">
        <li id="id1" title="Look, a tool tip!">LINK 1
            <li id="id2">LINK 2
                <li id="id3" class="folder">LINK 3
                    <ul>
                        <li id="id3.1">LINK 3.1
                            <ul>
                                <li id="id3.1.1">LINK 3.1.1
                                    <li id="id3.1.2">LINK 3.1.2</ul>
                            <li id="id3.2">LINK 3.2
                                <ul>
                                    <li id="id3.2.1">LINK 3.2.1
                                        <li id="id3.2.2">LINK 3.2.2</ul>
                    </ul>
                    <li id="id4" class="expanded">LINK 4
                        <ul>
                            <li id="id4.1" class="active focused">LINK 4.1
                                <ul>
                                    <li id="id4.1.1">LINK 4.1.1
                                        <li id="id4.1.2">LINK 4.1.2</ul>
                                <li id="id4.2">LINK 4.2
                                    <ul>
                                        <li id="id4.2.1">LINK 4.2.1
                                            <li id="id4.2.2">LINK 4.2.2</ul>
                        </ul>
    </ul>
</div>
<p id="message"></p>

JavaScript

$(function () {
    $("#tree").dynatree({
        checkbox: true, // Show checkboxes.
        selectMode: 2, // 1:single, 2:multi, 3:multi-hier
        noLink: false, // Use <span> instead of <a> tags for all nodes
        onSelect: function (select, node) {
            updateTitle508(node);
        },
        onDblClick: function (node) {
            node.toggleSelect();
        },
        onRender: function (node, nodeSpan) {
            updateTitle508(node);
        },
        onExpand: function (flag, node) {
            updateTitle508(node);
        }
    });
});


function updateTitle508(node) {
    var nodeText = node.data.title; //Current node text
    var nodeLink = node.span.lastChild; //Anchor element that is actually clicked
    var newTitle = nodeText;
    
    
    //check for checkboxes
    if($(node.span).children(".dynatree-checkbox").length > 0) {
        //check for checkbox state
        if (node.isSelected()) {
            newTitle += " checkbox checked";
        } else {
            newTitle += " checkbox not checked";
        } 
    }

    //check for children
    if (node.hasChildren()) {
        //if it has children then check if it is expanded
        if (node.isExpanded()) {
            newTitle += " expandable expanded";
        } else {
            newTitle += " expandable collapsed";
        }
    }

    //Update the link title with the updated string
    nodeLink.title = newTitle;
}