Fancytree - Init from <ul> tag

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

HTML

<link rel="stylesheet" href="https://fancytree.googlecode.com/hg/src/skin-win7/ui.fancytree.css">
<script src="https://fancytree.googlecode.com/hg/src/jquery.fancytree.js"></script>
<div id="tree">
    <ul id="treeData" style="display: none;">
      <li id="id1" title="Look, a tool tip!">item1 with key and tooltip
      <li id="id2">item2
      <li id="id3" class="folder">Folder with some children
        <ul>
          <li id="id3.1">Sub-item 3.1
            <ul>
              <li id="id3.1.1">Sub-item 3.1.1
              <li id="id3.1.2">Sub-item 3.1.2
            </ul>
          <li id="id3.2">Sub-item 3.2
            <ul>
              <li id="id3.2.1">Sub-item 3.2.1
              <li id="id3.2.2">Sub-item 3.2.2
            </ul>
        </ul>
      <li id="id4" class="expanded">Document with some children (expanded on init)
        <ul>
          <li id="id4.1"  class="active focused">Sub-item 4.1 (active and focus on init)
            <ul>
              <li id="id4.1.1">Sub-item 4.1.1
              <li id="id4.1.2">Sub-item 4.1.2
            </ul>
          <li id="id4.2">Sub-item 4.2
            <ul>
              <li id="id4.2.1">Sub-item 4.2.1
              <li id="id4.2.2">Sub-item 4.2.2
            </ul>
        </ul>
    </ul>
  </div>
<div id="statusLine">-</div>
<p>
    <button id="button1">Select item2</button>
</p>

JavaScript

$(function(){
    // Initialize the tree from the <ul> tag inside <div id='tree'>
    $("#tree").fancytree({
        checkbox: true,
        activate: function(e, data){
            // this callback is called, whe the user activates a node
            $("div#statusLine").text("Active node: " + data.node);
        }
    });
    
    // Activate a node, on button click
    $("button#button1").click(function(){
        var tree = $("#tree").fancytree("getTree"),
            node2 = tree.getNodeByKey("id2");
        node2.setSelected();
    });
});