123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146 |
- <!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>
|