diff options
Diffstat (limited to 'ecomp-portal-FE/client/bower_components/jqTree/_examples')
12 files changed, 0 insertions, 562 deletions
diff --git a/ecomp-portal-FE/client/bower_components/jqTree/_examples/01_load_json_data.html b/ecomp-portal-FE/client/bower_components/jqTree/_examples/01_load_json_data.html deleted file mode 100644 index c68461c7..00000000 --- a/ecomp-portal-FE/client/bower_components/jqTree/_examples/01_load_json_data.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Load json data in javascript tree -layout: page -js: examples/load_json_data.js -css: example.css ---- - -<p id="nav"> - <a href="../../index.html">« Documentation</a> - <a href="../02_load_json_data_from_server/" class="next">Example 2 »</a> -</p> - -<h1>Example 1 - load json data</h1> - -<div id="tree1"></div> - -<p> - In this example we load the data using the <strong>data</strong> option. - As you can see, the data is an array of objects. -</p> -<ul> - <li>The <strong>label</strong> property defines the label of the node.</li> - <li>The <strong>id</strong> is the unique id of the node.</li> - <li>The <strong>children</strong> property is an array of nodes.</li> -</ul> - -{% highlight js %} -var data = [ - { - name: 'node1', id: 1, - children: [ - { name: 'child1', id: 2 }, - { name: 'child2', id: 3 } - ] - }, - { - name: 'node2', id: 4, - children: [ - { name: 'child3', id: 5 } - ] - } -]; - -$('#tree1').tree({ - data: data -}); -{% endhighlight %} diff --git a/ecomp-portal-FE/client/bower_components/jqTree/_examples/02_load_json_data_from_server.html b/ecomp-portal-FE/client/bower_components/jqTree/_examples/02_load_json_data_from_server.html deleted file mode 100644 index 266aad7a..00000000 --- a/ecomp-portal-FE/client/bower_components/jqTree/_examples/02_load_json_data_from_server.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Load json data from the server in javascript tree -layout: page -js: examples/load_json_data_from_server.js -css: example.css ---- - -<p id="nav"> - <a href="../01_load_json_data/">« Example 1</a> - <a href="../03_drag_and_drop/" class="next">Example 3 »</a> -</p> - -<h1>Example 2 - load json data from the server</h1> - -<div id="tree1" data-url="/example_data/"></div> - -<p> - In this example we load the data from the server using the <strong>data-url</strong> property on the dom element. -</p> - -<h3>html</h3> - -{% highlight html %} -<div id="tree1" data-url="/example_data/"></div> -{% endhighlight %} - -<h3>javascript</h3> - -{% highlight js %} -$('#tree1').tree(); -{% endhighlight %} diff --git a/ecomp-portal-FE/client/bower_components/jqTree/_examples/03_drag_and_drop.html b/ecomp-portal-FE/client/bower_components/jqTree/_examples/03_drag_and_drop.html deleted file mode 100644 index f000b285..00000000 --- a/ecomp-portal-FE/client/bower_components/jqTree/_examples/03_drag_and_drop.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Javascript tree with drag and drop -layout: page -js: examples/drag_and_drop.js -css: example.css ---- - -<p id="nav"> - <a href="../02_load_json_data_from_server/">« Example 2</a> - <a href="../04_save_state/" class="next">Example 4 »</a> -</p> - -<h1>Example 3 - Drag and drop</h1> - -<div id="tree1" data-url="/example_data/"></div> - -<p> - Let's add drag-and-drop support by setting the option <strong>dragAndDrop</strong> to true. - You can now drag tree nodes to another position. -</p> - -<p> - Other options: -</p> - -<ul> - <li>The option <strong>autoOpen</strong> is set to 0 to open the first level of nodes.</li> -</ul> - -<h3>html</h3> - -{% highlight html %} -<div id="tree1" data-url="/example_data/"></div> -{% endhighlight %} - -<h3>javascript</h3> - -{% highlight js %} -var $tree = $('#tree1'); -$tree.tree({ - dragAndDrop: true, - autoOpen: 0 -}); -{% endhighlight %} diff --git a/ecomp-portal-FE/client/bower_components/jqTree/_examples/04_save_state.html b/ecomp-portal-FE/client/bower_components/jqTree/_examples/04_save_state.html deleted file mode 100644 index 51962f6b..00000000 --- a/ecomp-portal-FE/client/bower_components/jqTree/_examples/04_save_state.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Save the state in javascript tree -layout: page -js: examples/save_state.js -css: example.css ---- - -<p id="nav"> - <a href="../03_drag_and_drop/">« Example 3</a> - <a href="../05_load_on_demand/" class="next">Example 5 »</a> -</p> - -<h1>Example 4 - Save the state</h1> - -<div id="tree1" data-url="/example_data/"></div> - -<p> - If you set the option <strong>saveState</strong> to true, then jqtree remembers the tree state after a page reload. -</p> -<ul> - <li> - JqTree save the state into localStorage. - If the browser does not support localStorage, then jqTree saves the state in a cookie. - </li> - <li> - You must include the <a href="https://github.com/carhartl/jquery-cookie">jquery-cookie</a> plugin for cookie support. - </li> -</ul> - -<h3>html</h3> - -{% highlight html %} -<div id="tree1" data-url="/example_data/"></div> -{% endhighlight %} - -<h3>javascript</h3> - -{% highlight js %} -$('#tree1').tree({ - saveState: true -}); -{% endhighlight %} - -<p> - Giving the <strong>saveState</strong> a string value sets the storage key. The default key is 'tree'. -</p> - -{% highlight js %} -$('#tree1').tree({ - saveState: 'my-tree' -}); -{% endhighlight %} diff --git a/ecomp-portal-FE/client/bower_components/jqTree/_examples/05_load_on_demand.html b/ecomp-portal-FE/client/bower_components/jqTree/_examples/05_load_on_demand.html deleted file mode 100644 index 135036fa..00000000 --- a/ecomp-portal-FE/client/bower_components/jqTree/_examples/05_load_on_demand.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Load nodes on demand from the server in javascript tree -layout: page -js: examples/load_on_demand.js -css: example.css ---- - -<p id="nav"> - <a href="../04_save_state/">« Example 4</a> - <a href="../06_autoescape/" class="next">Example 6 »</a> -</p> - -<h1>Example 5 - Load nodes on demand from the server</h1> - - -<div id="tree1" data-url="/nodes/"></div> - -<p> - In this example, the data is loaded on demand from the server. - <br> - To use load on demand, you must do the following: -</p> - -<ul> - <li> - You must specify a <strong>data url</strong>. In this example this is done using the <strong>data-url</strong> - html data attribute. - </li> - <li> - Folders that must be loaded on demand must have the <strong>load_on_demand</strong> property. You can specify this in the data. - </li> - <li> - In this example, the url <strong>/nodes/</strong> returns the first level of data (Saurischia and Ornithischians). - </li> - <li> - The url for the load on demand data is <strong><data-url>?node=<node-id></strong>. So, for node 23 this would be - <strong>/nodes/?node=23</strong>. - </li> -</ul> - -<h3>first level of data</h3> - -{% highlight js %} -[ - { - "label": "Saurischia", - "id": 1, - "load_on_demand": true - }, - { - "label": "Ornithischians", - "id": 23, - "load_on_demand": true - } -] -{% endhighlight %} - -<h3>html</h3> - -{% highlight html %} -<div id="tree1" data-url="/nodes/"></div> -{% endhighlight %} - -<h3>javascript</h3> - -{% highlight js %} -$('#tree1').tree({ - dragAndDrop: true -}); -{% endhighlight %} diff --git a/ecomp-portal-FE/client/bower_components/jqTree/_examples/06_autoescape.html b/ecomp-portal-FE/client/bower_components/jqTree/_examples/06_autoescape.html deleted file mode 100644 index 308d56a0..00000000 --- a/ecomp-portal-FE/client/bower_components/jqTree/_examples/06_autoescape.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Javascript tree with autoescape -layout: page -js: examples/autoescape.js -css: example.css ---- - -<p id="nav"> - <a href="../05_load_on_demand/">« Example 5</a> - <a href="../07_autoscroll/" class="next">Example 7 »</a> -</p> - -<h1>Example 6 - autoEscape</h1> - -<p> - You can put html in the node titles setting the <a href="../index.html#tree-options-autoescape">autoEscape</a> option to <strong>false</strong>. -</p> - -<div id="tree1"></div> - -<h3>html</h3> - -{% highlight html %} -<div id="tree1"></div> -{% endhighlight %} - -<h3>javascript</h3> - -{% highlight js %} -var data = [ - { - label: 'examples', - children: [ - { name: '<a href="example1.html">Example 1</a>' }, - { name: '<a href="example2.html">Example 2</a>' }, - '<a href="example3.html">Example </a>' - ] - } -]; - -// set autoEscape to false -$('#tree1').tree({ - data: data, - autoEscape: false, - autoOpen: true -}); -{% endhighlight %} diff --git a/ecomp-portal-FE/client/bower_components/jqTree/_examples/07_autoscroll.html b/ecomp-portal-FE/client/bower_components/jqTree/_examples/07_autoscroll.html deleted file mode 100644 index 1f3aff07..00000000 --- a/ecomp-portal-FE/client/bower_components/jqTree/_examples/07_autoscroll.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Javascript tree with autoscroll -layout: page -js: examples/autoscroll.js -css: example.css ---- - -<p id="nav"> - <a href="../06_autoescape/">« Example 6</a> - <a href="../08_multiple_select/" class="next">Example 8 »</a> -</p> - -<h1>Example 7 - autoscroll</h1> - -<div id="scroll-container"> - <div id="tree1"></div> -</div> - -<p> - This is an example of autoscroll. The tree will scroll automatically if you drag an item outside of the tree. - <br /> - Autoscroll will work automatically. There is no option for it. -</p> - -<h3>html</h3> - -{% highlight html %} -<div id="scroll-container"> - <div id="tree1"></div> -</div> -{% endhighlight %} - -<h3>css</h3> - -{% highlight css %} -#scroll-container { - height: 200px; - overflow-y: scroll; - user-select: none; -} -{% endhighlight %} - -<h3>js</h3> - -{% highlight js %} -$('#tree1').tree({ - data: ExampleData.example_data -}); -{% endhighlight %} diff --git a/ecomp-portal-FE/client/bower_components/jqTree/_examples/08_multiple_select.html b/ecomp-portal-FE/client/bower_components/jqTree/_examples/08_multiple_select.html deleted file mode 100644 index 5331acf3..00000000 --- a/ecomp-portal-FE/client/bower_components/jqTree/_examples/08_multiple_select.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Javascript tree with multiple select -layout: page -js: examples/multiple_select.js -css: example.css ---- - -<p id="nav"> - <a href="../07_autoscroll/">« Example 7</a> - <a href="../09_custom_html/" class="next">Example 9 »</a> -</p> - -<h1>Example 8 - multiple select</h1> - - -<p> - This example implements multiple select using the following functions and events: -</p> -<ul> - <li> - <strong>addToSelection</strong>: add node to selections - </li> - <li> - <strong>isNodeSelected</strong>: is this node selected? - </li> - <li> - <strong>removeFromSelection</strong>: unselect this node - </li> - <li> - <strong>tree.click event</strong>: this event is fired when a user clicks on a node - </li> -</ul> - -<div id="tree1"></div> - -<h3>html</h3> - -{% highlight html %} -<div id="tree1" data-url="/nodes/"></div> -{% endhighlight %} - -<h3>javascript</h3> - -{% highlight js %} -$(function() { - var $tree = $('#tree1'); - $tree.tree({ - data: ExampleData.example_data, - autoOpen: true - }); - $tree.bind( - 'tree.click', - function(e) { - // Disable single selection - e.preventDefault(); - - var selected_node = e.node; - - if (selected_node.id == undefined) { - console.log('The multiple selection functions require that nodes have an id'); - } - - if ($tree.tree('isNodeSelected', selected_node)) { - $tree.tree('removeFromSelection', selected_node); - } - else { - $tree.tree('addToSelection', selected_node); - } - } - ); -}); -{% endhighlight %} diff --git a/ecomp-portal-FE/client/bower_components/jqTree/_examples/09_custom_html.html b/ecomp-portal-FE/client/bower_components/jqTree/_examples/09_custom_html.html deleted file mode 100644 index 4a0cebec..00000000 --- a/ecomp-portal-FE/client/bower_components/jqTree/_examples/09_custom_html.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Javascript tree with custom html -layout: page -js: examples/custom_html.js -css: example.css ---- - -<p id="nav"> - <a href="../08_multiple_select/">« Example 8</a> - <a href="../10_icon_buttons/" class="next">Example 10 »</a> -</p> - -<h1>Example 9 - custom html</h1> - -<style> - .jqtree-tree .edit { - margin-left: 8px; - vertical-align: middle; - } -</style> -<p> - This example uses the <strong>onCreateLi</strong> option to create an edit link next to the tree node. -</p> -<div id="tree1"></div> - -<h3>html</h3> - -{% highlight html %} -<div id="tree1"></div> -{% endhighlight %} - -<h3>javascript</h3> - -{% highlight js %} -$(function() { - var $tree = $('#tree1'); - - $tree.tree({ - data: ExampleData.example_data, - autoOpen: 1, - onCreateLi: function(node, $li) { - // Append a link to the jqtree-element div. - // The link has an url '#node-[id]' and a data property 'node-id'. - $li.find('.jqtree-element').append( - '<a href="#node-'+ node.id +'" class="edit" data-node-id="'+ - node.id +'">edit</a>' - ); - } - }); - - // Handle a click on the edit link - $tree.on( - 'click', '.edit', - function(e) { - // Get the id from the 'node-id' data property - var node_id = $(e.target).data('node-id'); - - // Get the node from the tree - var node = $tree.tree('getNodeById', node_id); - - if (node) { - // Display the node name - alert(node.name); - } - } - ); -}); -{% endhighlight %} diff --git a/ecomp-portal-FE/client/bower_components/jqTree/_examples/10_icon_buttons.html b/ecomp-portal-FE/client/bower_components/jqTree/_examples/10_icon_buttons.html deleted file mode 100644 index a4b23e3f..00000000 --- a/ecomp-portal-FE/client/bower_components/jqTree/_examples/10_icon_buttons.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Use icon toggle buttons -layout: page -js: examples/icon_buttons.js -css: example.css ---- - -<p id="nav"> - <a href="../09_custom_html/">« Example 9</a> - <a href="../11_right-to-left/" class="next">Example 11 »</a> -</p> - -<h1>Example 10 - use icon toggle buttons</h1> - -<p> - You can use the <strong>openedIcon</strong> and <strong>closedIcon</strong> options to use html for - the toggle buttons. You can for example use <a href="http://fortawesome.github.io/Font-Awesome/">Fontawesome icons</a>. -</p> -<div id="tree1" data-url="/example_data/"></div> - -<h3>javascript</h3> - -{% highlight js %} -$('#tree1').tree({ - closedIcon: $('<i class="fa fa-arrow-circle-right"></i>'), - openedIcon: $('<i class="fa fa-arrow-circle-down"></i>') -}); -{% endhighlight %} diff --git a/ecomp-portal-FE/client/bower_components/jqTree/_examples/11_right-to-left.html b/ecomp-portal-FE/client/bower_components/jqTree/_examples/11_right-to-left.html deleted file mode 100644 index f70d6117..00000000 --- a/ecomp-portal-FE/client/bower_components/jqTree/_examples/11_right-to-left.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Right-to-left support -layout: page -js: examples/right-to-left.js -css: example.css ---- - -<p id="nav"> - <a href="../10_icon_buttons/">« Example 10</a> - <a href="../12_button_on_right/" class="next">Example 12 »</a> -</p> - -<h1>Example 11 - right-to-left support</h1> - -<p> - You can display the tree from right to left with the <strong>rtl</strong> option. -</p> - -<div id="tree1" data-url="/example_data/"></div> - -<h3>javascript</h3> - -{% highlight js %} -$('#tree1').tree({ - rtl: true -}); -{% endhighlight %} diff --git a/ecomp-portal-FE/client/bower_components/jqTree/_examples/12_button_on_right.html b/ecomp-portal-FE/client/bower_components/jqTree/_examples/12_button_on_right.html deleted file mode 100644 index 9e1bbc84..00000000 --- a/ecomp-portal-FE/client/bower_components/jqTree/_examples/12_button_on_right.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Button on right -layout: page -js: examples/button-on-right.js -css: example.css ---- - -<p id="nav"> - <a href="../11_right-to-left/">« Example 11</a> -</p> - -<h1>Example 12 - button on right</h1> - -<p> - You can put the toggle button on the right by setting the <strong>buttonLeft</strong> option to <strong>false</strong>. -</p> - -<div id="tree1" class="block-style" data-url="/example_data/"></div> - -<h3>javascript</h3> - -{% highlight js %} -$('#tree1').tree({ - buttonLeft: false, - autoOpen: 0 -}); -{% endhighlight %} |