+++ /dev/null
----
-title: Tutorial
-name: Tutorial
----
-
-Include [jQuery](http://code.jquery.com/jquery.min.js)
-
-{% highlight html %}
-<script src="jquery.min.js"></script>
-{% endhighlight %}
-
-Include tree.jquery.js:
-
-{% highlight html %}
-<script src="tree.jquery.js"></script>
-{% endhighlight %}
-
-Include jqtree.css:
-
-{% highlight html %}
-<link rel="stylesheet" href="jqtree.css">
-{% endhighlight %}
-
-Optionally, for saveState include [jquery-cookie](https://github.com/carhartl/jquery-cookie):
-
-{% highlight html %}
-<script src="jquery.cookie.js"></script>
-{% endhighlight %}
-
-Create a div.
-
-{% highlight html %}
-<div id="tree1"></div>
-{% endhighlight %}
-
-Create tree data.
-
-{% highlight js %}
-var data = [
- {
- name: 'node1',
- children: [
- { name: 'child1' },
- { name: 'child2' }
- ]
- },
- {
- name: 'node2',
- children: [
- { name: 'child3' }
- ]
- }
-];
-{% endhighlight %}
-
-Create tree widget.
-
-{% highlight js %}
-$(function() {
- $('#tree1').tree({
- data: data
- });
-});
-{% endhighlight %}
-
-Alternatively, get the data from the server.
-
-{% highlight js %}
-$.getJSON(
- '/some_url/',
- function(data) {
- $('#tree1').tree({
- data: data
- });
- }
-);
-{% endhighlight %}