Simple Static List
This example shows a simple static lists display and a display constructed from information in a JSON file.
More information about the dynatree jQuery plugin is available at: http://code.google.com/p/dynatree/ or http://wwwendt.de/
Try this example here
HTML and JavaScript for a server.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>jquery.dynatree - Simple Example</title>
<link rel='stylesheet' type='text/css' href='ui.dynatree.css' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js" type="text/javascript"></script>
<script src="jquery.dynatree.min.js" type="text/javascript"></script>
<script type='text/javascript'>
// The tree's root node has a title and visibility set
$(function(){
$("#tree").dynatree({
title: "Dynatree Sample",
rootVisible: true,
onActivate: function(dtnode) {
}
});
});
$(function () {
// This tree is created from a JSON file retrieved with AJAX
$("#rightBar").dynatree({
title: "Test json",
rootvisible: true,
fx: { height: "toggle", duration: 200 },
initAjax: { url: "SchoolsTree1985.json"},
onActivate: function(dtnode) { $("#echoActive").text(dtnode.data.title); },
onLazyRead: function(dtnode){ dtnode.appendAjax({ url: "Schools1985.json" }); }
});
});
</script>
</head>
<body>
<h1>Simple Tree example:</h1>
<p>$("#tree").dynatree(...); creates the tree here from a static div with an unordered list:</p>
<div id="tree">
<ul>
<li id="key1">item1 with key and tooltip
<li id="key2">item2
<li id="key3" class="folder">Folder with some children
<ul>
<li id="key3.1">Sub-item 3.1
<li id="key3.2">Sub-item 3.2
</ul>
<li id="key4" class="expanded">Document with some children
<ul>
<li id="key4.1">Sub-item 4.1
<li id="key4.2">Sub-item 4.2
</ul>
</ul>
</div>
<p>This tree is defined in a JSON file</p>
<div id="rightBar"> </div>
<p>Display the selected node from the JSON file</p>
<div>Active node: <span id="echoActive">-</span></div>
</body>
</html>