Mercurial > repos > mingchen0919 > aurora_deseq2
diff vakata-jstree-3.3.5/demo/basic/index.html @ 0:55d2db17c67c draft
planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
author | mingchen0919 |
---|---|
date | Fri, 14 Dec 2018 00:21:26 -0500 |
parents | |
children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/vakata-jstree-3.3.5/demo/basic/index.html Fri Dec 14 00:21:26 2018 -0500 @@ -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> \ No newline at end of file