85 lines
3.7 KiB
HTML
85 lines
3.7 KiB
HTML
<!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="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
|
<script src="./../../dist/jstree.js"></script>
|
|
|
|
<script>
|
|
$('#data').jstree({
|
|
"core" : {
|
|
"animation" : 0,
|
|
"check_callback" : true,
|
|
"themes" : { "stripes" : true },
|
|
'data' : [{"id":"demo_root_1","text":"Root 1","icon":"/static/3.3.12/assets/images/tree_icon.png","li_attr":{"id":"demo_root_1"},"a_attr":{"href":"#","id":"demo_root_1_anchor"},"state":{"loaded":true,"opened":true,"selected":false,"disabled":false,"failed":false,"loading":false},"data":{},"children":[{"id":"j1_3","text":"Child 1","icon":true,"li_attr":{"id":"j1_3"},"a_attr":{"href":"#","id":"j1_3_anchor"},"state":{"loaded":true,"opened":false,"selected":false,"disabled":false},"data":{},"children":[],"type":"default"},{"id":"demo_child_1","text":"Child 2","icon":true,"li_attr":{"id":"demo_child_1"},"a_attr":{"href":"#","id":"demo_child_1_anchor"},"state":{"loaded":true,"opened":true,"selected":true,"disabled":false},"data":{},"children":[{"id":"demo_child_2","text":"One more","icon":"glyphicon glyphicon-file","li_attr":{"id":"demo_child_2"},"a_attr":{"href":"#","id":"demo_child_2_anchor"},"state":{"loaded":true,"opened":false,"selected":false,"disabled":false},"data":{},"children":[],"type":"file"}],"type":"default"}],"type":"root"},{"id":"demo_root_2","text":"Root 2","icon":"/static/3.3.12/assets/images/tree_icon.png","li_attr":{"id":"demo_root_2"},"a_attr":{"href":"#","id":"demo_root_2_anchor"},"state":{"loaded":true,"opened":false,"selected":false,"disabled":false},"data":{},"children":[],"type":"root"}]
|
|
},
|
|
"types" : {
|
|
"#" : {
|
|
"max_children" : 1,
|
|
"max_depth" : 4,
|
|
"valid_children" : ["root"]
|
|
},
|
|
"root" : {
|
|
"icon" : "/static/3.3.12/assets/images/tree_icon.png",
|
|
"valid_children" : ["default"]
|
|
},
|
|
"default" : {
|
|
"valid_children" : ["default","file"]
|
|
},
|
|
"file" : {
|
|
"icon" : "glyphicon glyphicon-file",
|
|
"valid_children" : []
|
|
}
|
|
},
|
|
"plugins" : [
|
|
"contextmenu", "dnd", "search",
|
|
"state", "types", "wholerow"
|
|
]
|
|
});
|
|
</script>
|
|
<div id="jstree-marker" style="left: 598.5px; top: 293.5px;" class="jstree-default"> </div>
|
|
<div id="vakata-dnd" style="display: block; margin: 0px; padding: 0px; position: absolute; top: 306px; line-height: 16px; z-index: 10000; left: 651px;"><div id="jstree-dnd" class="jstree-default jstree-default-false "><i class="jstree-icon jstree-ok"></i>Child 2<ins class="jstree-copy" style="display: none;">+</ins></div></div>
|
|
</body>
|
|
</html>
|