jquery.dynatree.js
Status
Version 0.5.1 is released.
See the Migration hints and Change Log for details.
Any kind of feedback is very welcome :-)
Overview
Dynatree is a jQuery plugin that allows to dynamically create html tree view controls using JavaScript.
Main features:
- Open source
- Object oriented interface
- Support for Ajax and lazy loading of branches
- Hierachical selection and checkboxes
- Keyboard aware
- Support for persistence
Documentation
Quick start
- Include jQuery and dynatree libraries.
- Initialize the dynatree object when the page is loaded.
- Add a <div> element where the tree should appear.
- Check the example page.
- Read the documentation to learn more.
Example:
<html>
<head>
<!-- (1. Include jQuery and dynatree libs...) -->
<script src='../jquery/jquery.js' type='text/javascript'></script>
<script src='../jquery/ui.core.js' type='text/javascript'></script>
<script src='../jquery/jquery.cookie.js' type='text/javascript'></script>
<link href='../src/skin/ui.dynatree.css' rel='stylesheet' type='text/css'>
<script src='../src/jquery.dynatree.js' type='text/javascript'></script>
<script type='text/javascript'>
// Add code to initialize the tree when the document is loaded:
$(function(){
// 2. Attach the dynatree widget to an existing <div id="tree"> element
// and pass the tree options as an argument to the dynatree() function:
$("#tree").dynatree({
// Pass an array of nodes (and child nodes)
children: [
{title: "Item 1"},
{title: "Folder 2", isFolder: true, key: "folder2",
children: [
{title: "Sub-item 2.1"},
{title: "Sub-item 2.2"}
]
},
{title: "Item 3"}
],
onActivate: function(dtnode) {
// This function is called, when a node is clicked
// A DynaTreeNode object is passed as argument.
alert("You activated " + dtnode.data.title);
}
});
});
</script>
</head>
<body>
<!-- 3. Add a <div> element where the tree should appear: -->
<div id="tree"> </div>
[...]
</body>
</html>