Initial OpenECOMP Portal commit

[portal.git] / ecomp-portal-FE / client / bower_components / jqTree / _entries / 07_tutorial.md

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 (file)
index 0000000..55fe21e
--- /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 %}