<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jsTree » Examples </title>
<link rel="stylesheet" type="text/css" href="../media/style.css" />
<link rel="shortcut icon" href="../media/favicon.ico" />
<link rel="stylesheet" type="text/css" href="../media/prettify.css" />
<script type="text/javascript" src="../media/prettify.js"></script>
<script type="text/javascript" src="../media/iepngfix_tilebg.js"></script>
<script type="text/javascript">window.onload = function() { prettyPrint(); }</script>
<link rel="stylesheet" type="text/css" href="../../source/tree_component.css" />
<script type="text/javascript" src="../../source/_lib.js"></script>
<script type="text/javascript" src="../../source/tree_component.js"></script>
</head>
<body>
<div id="container">
<div id="head">
<h1>jsTree</h1>
<h2>javascript tree component</h2>
<h3>Examples</h3>
</div>
<div id="sidebar">
<h3 style="margin-top:0;">Documentation</h3>
<ul>
<li class="page_item"><a href="../_documentation/1_files.html" title="Required & optional files">Required & optional files</a></li>
<li class="page_item"><a href="../_documentation/2_creation.html" title="Instance creation">Instance creation</a></li>
<li class="page_item"><a href="../_documentation/3_configuration.html" title="Configuration">Configuration</a></li>
<li class="page_item"><a href="../_documentation/4_data.html" title="Data sources">Data sources</a></li>
<li class="page_item"><a href="../_documentation/5_customize.html" title="Customization">Customization</a></li>
<li class="page_item"><a href="../_documentation/6_output.html" title="Output">Output</a></li>
<li class="page_item"><a href="../_documentation/7_api.html" title="API">API </a></li>
</ul>
<h3>Examples</h3>
<ul>
<li class="page_item"><a href="1_datasources.html" title="Data sources">Data sources</a></li>
<li class="page_item"><a href="2_operations.html" title="Operations">Operations</a></li>
<li class="page_item current_page_item"><a href="3_callbacks.html" title="Callbacks">Callbacks</a></li>
<li class="page_item"><a href="4_themes.html" title="Themes">Themes</a></li>
<li class="page_item"><a href="5_others.html" title="Others">Other examples</a></li>
<li class="page_item important"><a href="7_full.html" title="Full example">Full PHP & mySQL example </a></li>
</ul>
</div>
<div id="data" style="margin-top:-45px;">
<div id="content">
<ul class='nav'>
<li><a href="2_operations.html" title="Operations">« Operations</a></li>
<li><a href="../index.html">Up to Reference</a></li>
<li><a href="4_themes.html" title="Themes">Themes »</a></li>
</ul>
<h2 style="margin-top:25px;">Callbacks</h2>
<div class="entry"><div id="documentation">
<p>You can view how callbacks are called here.</p>
<div class="tree-drop" rel="tree-drop" style="line-height:16px; background:silver; color:gray; border:3px solid gray; width:200px; text-align:center; margin:10px 0; cursor:move;">You can drop me on the tree</div>
<input type="button" value="refresh" onclick="$.tree_reference('demo').refresh();" style="margin-right:20px;"/>
<input type="button" value="create" onclick="$.tree_reference('demo').create();" />
<input type="button" value="rename" onclick="$.tree_reference('demo').rename();" />
<input type="button" value="remove" onclick="$.tree_reference('demo').remove();" />
<input type="button" value="copy" onclick="$.tree_reference('demo').copy();" />
<input type="button" value="cut" onclick="$.tree_reference('demo').cut();" />
<input type="button" value="paste" onclick="$.tree_reference('demo').paste();" />
<div id="demo" class="demo" style="height:200px;"></div>
<div id="sources" class="sources" style="200px;">
<pre style="height:200px;">
$(function () {
$("#demo").tree({
// Rest omitted
rules : {
droppable : [ "tree-drop" ],
multiple : true,
deletable : "all",
draggable : "all"
},
callback : {
beforechange: function() { log("About to change"); return true },
beforeopen : function() { log("About to open"); return true },
beforeclose : function() { log("About to close"); return true },
beforemove : function() { log("About to move"); return true },
beforecreate: function() { log("About to create"); return true },
beforerename: function() { log("About to rename"); return true },
beforedelete: function() { log("About to delete"); return true },
onselect : function() { log("Select"); },
ondeselect : function() { log("Deselect"); },
onchange : function() { log("Focus changed"); },
onrename : function() { log("Rename"); },
onmove : function() { log("Move"); },
oncopy : function() { log("Copy"); },
oncreate : function() { log("Create"); },
ondelete : function() { log("Delete"); },
onopen : function() { log("Open"); },
onopen_all : function() { log("Open ALL"); },
onclose : function() { log("Close"); },
error : function() { },
ondblclk : function() { log("Doubleclick"); TREE_OBJ.toggle_branch.call(TREE_OBJ, NODE); TREE_OBJ.select_branch.call(TREE_OBJ, NODE); },
onrgtclk : function() { log("Rightclick"); },
onload : function() { log("Tree loaded"); },
onfocus : function() { log("Tree got focus"); },
ondrop : function() { log("Foreign node dropped"); }
}
});
});
</pre>
</div>
<script type="text/javascript">
function log(str) {
$("#log").prepend(str + "<br />");
}
$(function () {
$("#demo").tree({
data : {
type : "json",
json : [
{ attributes: { id : "pjson4_1" }, data: "Root node 1", children : [
{ attributes: { id : "pjson4_2" }, data: { title : "Custom icon", icon : "../media/images/ok.png" } },
{ attributes: { id : "pjson4_3" }, data: "Child node 2" },
{ attributes: { id : "pjson4_4" }, data: "Some other child node" }
]},
{ attributes: { id : "pjson4_5" }, data: "Root node 2" }
]
},
rules : {
droppable : [ "tree-drop" ],
multiple : true,
deletable : "all",
draggable : "all"
},
callback : {
beforechange: function() { log("About to change"); return true },
beforeopen : function() { log("About to open"); return true },
beforeclose : function() { log("About to close"); return true },
beforemove : function() { log("About to move"); return true },
beforecreate: function() { log("About to create"); return true },
beforerename: function() { log("About to rename"); return true },
beforedelete: function() { log("About to delete"); return true },
onselect : function() { log("Select"); },
ondeselect : function() { log("Deselect"); },
onchange : function() { log("Focus changed"); },
onrename : function() { log("Rename"); },
onmove : function() { log("Move"); },
oncopy : function() { log("Copy"); },
oncreate : function() { log("Create"); },
ondelete : function() { log("Delete"); },
onopen : function() { log("Open"); },
onopen_all : function() { log("Open ALL"); },
onclose : function() { log("Close"); },
error : function() { },
ondblclk : function() { log("Doubleclick"); TREE_OBJ.toggle_branch.call(TREE_OBJ, NODE); TREE_OBJ.select_branch.call(TREE_OBJ, NODE); },
onrgtclk : function() { log("Rightclick"); },
onload : function() { log("Tree loaded"); },
onfocus : function() { log("Tree got focus"); },
ondrop : function() { log("Foreign node dropped"); }
}
});
});
</script>
<div id="log" style="border:3px solid gray; margin:5px 15px 5px 0; overflow:auto; padding:5px; background:white; height:100px;">
</div>
</div></div>
</div>
</div>
</div>
</body>
</html>