corrade-nucleus-nucleons

Subversion Repositories:
Compare Path: Rev
With Path: Rev
?path1? @ 19  →  ?path2? @ 20
/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>