Tech » jquery.dynatree.js
JavaScript tree view control for jQuery
Dynatree is a JavaScript dynamic tree view plugin for jQuery with support for
lazy loading of branches.
Download
The latest release and sourcecode is available here for
download: dynatree.googlecode.com.
Documentation
See here for some documentation and
examples, or have a look at the live
examples.
A quick example
- item1 with key and tooltip
- item2
- Folder with some children
- Sub-item 3.1
- Sub-item 3.2
- Document with some children
- Sub-item 4.1
- Sub-item 4.2
The above example was created using this code:
<!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='skin/ui.dynatree.css' />
<script src='jquery/jquery.js' type='text/javascript'></script>
<script src='jquery/ui.core.js' type='text/javascript'></script>
<script src='jquery.dynatree.js' type='text/javascript'></script>
<script type='text/javascript'>
$(function(){
$("#tree").dynatree({
title: "Dynatree Sample",
rootVisible: true,
onActivate: function(dtnode) {
// alert ("You activated " + dtnode.data.title + ", key=" + dtnode.data.key);
}
});
});
</script>
</head>
<body>
<h1>Simple Tree example:</h1>
<p>$("#tree").dynatree(...); creates the tree here:</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>
</body>
</html>
Change Log and previous releases
|