| /pack-rat/003_pack_rat/pack-rat/node_modules/jstree/demo/basic/index.html |
|---|
| @@ -0,0 +1,146 @@ |
|---|
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>jstree basic demos</title> |
| <style> |
| html { margin:0; padding:0; font-size:62.5%; } |
| body { max-width:800px; min-width:300px; margin:0 auto; padding:20px 10px; font-size:14px; font-size:1.4em; } |
| h1 { font-size:1.8em; } |
| .demo { overflow:auto; border:1px solid silver; min-height:100px; } |
| </style> |
| <link rel="stylesheet" href="./../../dist/themes/default/style.min.css" /> |
| </head> |
| <body> |
| <h1>HTML demo</h1> |
| <div id="html" class="demo"> |
| <ul> |
| <li data-jstree='{ "opened" : true }'>Root node |
| <ul> |
| <li data-jstree='{ "selected" : true }'>Child node 1</li> |
| <li>Child node 2</li> |
| </ul> |
| </li> |
| </ul> |
| </div> |
| |
| <h1>Inline data demo</h1> |
| <div id="data" class="demo"></div> |
| |
| <h1>Data format demo</h1> |
| <div id="frmt" class="demo"></div> |
| |
| <h1>AJAX demo</h1> |
| <div id="ajax" class="demo"></div> |
| |
| <h1>Lazy loading demo</h1> |
| <div id="lazy" class="demo"></div> |
| |
| <h1>Callback function data demo</h1> |
| <div id="clbk" class="demo"></div> |
| |
| <h1>Interaction and events demo</h1> |
| <button id="evts_button">select node with id 1</button> <em>either click the button or a node in the tree</em> |
| <div id="evts" class="demo"></div> |
| |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> |
| <script src="./../../dist/jstree.min.js"></script> |
| |
| <script> |
| // html demo |
| $('#html').jstree(); |
| |
| // inline data demo |
| $('#data').jstree({ |
| 'core' : { |
| 'data' : [ |
| { "text" : "Root node", "children" : [ |
| { "text" : "Child node 1" }, |
| { "text" : "Child node 2" } |
| ]} |
| ] |
| } |
| }); |
| |
| // data format demo |
| $('#frmt').jstree({ |
| 'core' : { |
| 'data' : [ |
| { |
| "text" : "Root node", |
| "state" : { "opened" : true }, |
| "children" : [ |
| { |
| "text" : "Child node 1", |
| "state" : { "selected" : true }, |
| "icon" : "jstree-file" |
| }, |
| { "text" : "Child node 2", "state" : { "disabled" : true } } |
| ] |
| } |
| ] |
| } |
| }); |
| |
| // ajax demo |
| $('#ajax').jstree({ |
| 'core' : { |
| 'data' : { |
| "url" : "./root.json", |
| "dataType" : "json" // needed only if you do not supply JSON headers |
| } |
| } |
| }); |
| |
| // lazy demo |
| $('#lazy').jstree({ |
| 'core' : { |
| 'data' : { |
| "url" : "//www.jstree.com/fiddle/?lazy", |
| "data" : function (node) { |
| return { "id" : node.id }; |
| } |
| } |
| } |
| }); |
| |
| // data from callback |
| $('#clbk').jstree({ |
| 'core' : { |
| 'data' : function (node, cb) { |
| if(node.id === "#") { |
| cb([{"text" : "Root", "id" : "1", "children" : true}]); |
| } |
| else { |
| cb(["Child"]); |
| } |
| } |
| } |
| }); |
| |
| // interaction and events |
| $('#evts_button').on("click", function () { |
| var instance = $('#evts').jstree(true); |
| instance.deselect_all(); |
| instance.select_node('1'); |
| }); |
| $('#evts') |
| .on("changed.jstree", function (e, data) { |
| if(data.selected.length) { |
| alert('The selected node is: ' + data.instance.get_node(data.selected[0]).text); |
| } |
| }) |
| .jstree({ |
| 'core' : { |
| 'multiple' : false, |
| 'data' : [ |
| { "text" : "Root node", "children" : [ |
| { "text" : "Child node 1", "id" : 1 }, |
| { "text" : "Child node 2" } |
| ]} |
| ] |
| } |
| }); |
| </script> |
| </body> |
| </html> |
