zhxd2
/
tripal


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
							<!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 &raquo; 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 &amp; optional files">Required &#038; 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&nbsp;</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 &amp; mySQL example&nbsp;</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">&laquo;&nbsp;Operations</a></li>
					<li><a href="../index.html">Up to Reference</a></li>
					<li><a href="4_themes.html" title="Themes">Themes&nbsp;&raquo;</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>