Intermédiaire
This commit is contained in:
146
Sources/webAduc/www/vendor/vakata/jstree/demo/basic/index.html
vendored
Normal file
146
Sources/webAduc/www/vendor/vakata/jstree/demo/basic/index.html
vendored
Normal file
@@ -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="https://ajax.googleapis.com/ajax/libs/jquery/3.3.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>
|
||||
1
Sources/webAduc/www/vendor/vakata/jstree/demo/basic/root.json
vendored
Normal file
1
Sources/webAduc/www/vendor/vakata/jstree/demo/basic/root.json
vendored
Normal file
@@ -0,0 +1 @@
|
||||
[{"id":1,"text":"Root node","children":[{"id":2,"text":"Child node 1"},{"id":3,"text":"Child node 2"}]}]
|
||||
Reference in New Issue
Block a user