diff options
Diffstat (limited to 'ecomp-portal-FE/client/bower_components/jqTree/_entries/07_tutorial.md')
-rw-r--r-- | ecomp-portal-FE/client/bower_components/jqTree/_entries/07_tutorial.md | 77 |
1 files changed, 77 insertions, 0 deletions
diff --git a/ecomp-portal-FE/client/bower_components/jqTree/_entries/07_tutorial.md b/ecomp-portal-FE/client/bower_components/jqTree/_entries/07_tutorial.md new file mode 100644 index 00000000..55fe21e0 --- /dev/null +++ b/ecomp-portal-FE/client/bower_components/jqTree/_entries/07_tutorial.md @@ -0,0 +1,77 @@ +--- +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 %} |