summaryrefslogtreecommitdiffstats
path: root/ecomp-portal-FE/client/bower_components/jqTree/_entries/07_tutorial.md
diff options
context:
space:
mode:
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.md77
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 %}