Fancytree Demo

<!DOCTYPE html>
<html>

  <head>
  	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  	<title>Fancytree - Demo</title>
  
  	<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

  	<link href="//cdn.jsdelivr.net/gh/mar10/fancytree@2/dist/skin-win8/ui.fancytree.min.css" rel="stylesheet"/>
  	<script src="//cdn.jsdelivr.net/gh/mar10/fancytree@2/dist/jquery.fancytree-all-deps.min.js"></script>

    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Fancytree Demo</h1>

    <button id="button1">Test</button>
    <hr>
    <div id="tree"></div>
    <div id="status">Ready.</div>
    <hr>
    <div id="version"></div>
  </body>

</html>

$(function(){
  var sampleSource = [
	    { title: "Folder 1", folder: true, children: [
	      { title: "Subnode 1.1"},
	      { title: "Subnode 1.2"},
	      { title: "Subnode 1.3"}
	      ]},
	    { title: "Folder 2", expanded: true, children: [
	      { title: "Subnode 2.1"},
	      { title: "Subnode 2.2"},
	      { title: "Subnode 2.3"}
	      ]},
	    { title: "Lazy Folder", lazy: true }
    ];

	$("#tree").fancytree({
//	  extensions: ["childcounter"],
//    checkbox: true,
	  source: sampleSource,
	  lazyLoad: function(event, data) {
	    data.result = { url: "sample1.json" };
	  },
	  activate: function(event, data) {
	    $("#status").text("Activate " + data.node);
	  }
	});
	
	$("#button1").click(function(event){
	  var tree = $("#tree").fancytree("getTree"),
	      node = tree.getActiveNode();

	  alert("Actie node " + node);
	});
	$("#version").text("Fancytree " + $.ui.fancytree.version 
    + " / jQuery " + $.fn.jquery);
});

/* Styles go here */

#status {
  border: 1px inset gray;
  background-color: #eee;
}
#version {
  color: #555;
  font-size: 70%;
}

# Fancytree Basic Sample

Use this Plunk to try Fancytree options or reproduce errors.

[
  {"title": "Subnode 1"},
  {"title": "Subnode 2", "lazy": true}
]