Location: PHPKode > projects > TafelTree view javascript > tafelTree/doc/docOffline_en.html
<html>
<head>
	<title>TafelTree v1.7, 2006-11-14 >> Documentation</title>
	<style>
	body, table, select, option, input, textarea {
	font-family: Verdana, Arial, sans-serif;
	}

	body {
	margin-top: 50px;
	text-align: center;
	background-color: #FFFFFF;
	padding-bottom: 30px;
	}

	div.body {
	text-align: left;
	width: 850px;
	font-size: 0.7em;
	margin: 0 auto;
	}

	h1 {
	text-align: right;
	font-size: 2em;
	color: #333399;
	margin: 0;
	padding: 0.1em;
	}

	h2 {
	text-align: right;
	font-size: 1.5em;
	color: #9999FF;
	margin: 0;
	padding: 0.2em;
	padding-bottom: 1em;
	border-bottom: 1px solid #999999;
	}

	h1 span {
	font-size: 0.5em;
	font-style: italic;
	}

	img.titre {
	float: left;
	}

	.spacer {
	clear: both;
	}

	a:visited {
	color: #9999FF;
	}

	a:hover {
	color: #009900;
	}

	/**
	 * Le menu
	 */
	#menu {
	list-style: none;
	margin: 0;
	padding: 0;
	font-weight: bold;
	font-size: 1.2em;
	}

	#menu li {
	float: left;
	width: 16.64%;
	background-color: #EEEEFF;
	}

	#menu a {
	display: block;
	text-align: center;
	text-decoration: none;
	border-bottom: 1px solid #999999;
	}

	#menu a:visited {
	color: #0000FF;
	}

	#menu .ici a {
	color: #009900;
	}

	#menu a:hover {
	background-color: #CCCCFF;
	color: #EEEEFF;
	}

	#contenu {
	clear: both;
	}

	#contenu .gauche {
	font-size: 1.1em;
	text-align: justify;
	margin-top: 1em;
	}

	/**
	 * Le contenu de gauche
	 */
	#contenu code {
	display: block;
	padding: 0.2em;
	background-color: #EEEEEE;
	border: 1px solid #999999;
	margin: 1em 0;
	font-size: 1em;
	}

	#contenu .gauche > code {
	font-size: 1.3em;
	}

	#contenu .gauche h4 {
	border-bottom: 1px solid #CCCCCC;
	font-size: 1em;
	color: #999999;
	margin-top: 2em;
	margin-bottom: 0;
	}

	#contenu h3 {
	text-align: center;
	margin: 0;
	font-size: 1.2em;
	padding-bottom: 55px;
	}

	/**
	 * Le bas du site
	 */
	div.bottom {
	clear: both;
	border-top: 1px solid #CCCCCC;
	color: #555555;
	margin-top: 1em;
	padding-right: 25px;
	background: url('../imgs/fleche.jpg') right center no-repeat;
	}

	div.bottom p {
	text-align: right;
	margin: 0;
	padding: 0;
	}

	.classe {
	color: #009900;
	}

	.var {
	color: #000099;
	}

	.err {
	color: #990000;
	}

	.defaut {
	font-weight: bold;
	color: #990000;
	}

	em {
	color: inherit;
	}

	.develop {
	margin-left: 5em;
	display: none;
	}

	.doc h4 {
	cursor: pointer;
	}

	#contenu .gauche .doc h4:hover {
	color: #009900;
	}


	div.code {
	border: 1px solid #999999;
	margin-bottom: 1em;
	}

	div.code table {
	border-collapse: collapse;
	font-family: monospace;
	}

	div.code td {
	vertical-align: top;
	}

	div.code td.num {
	background-color: #EEEEEE;
	border-right: 1px solid #DDDDDD;
	}

	div.code td th {
	font-size: 11px;
	text-align: right;
	font-weight: normal;
	background-color: #EEEEEE;
	color: #777777;
	width: 2em;
	}

	div.code td td {
	font-size: 13px;
	padding: 0 0 0 0.5em;
	}

	div.code span.reserved {
	color: #0000FF;
	}

	div.code span.string {
	color: #CC0000;
	}

	div.code span.object {
	color: #660000;
	}

	div.code span.php {
	font-weight: bold;
	color: #CC33CC;
	}

	div.code span.comment, span.comment span.reserved, span.comment span.object, span.comment span.string {
	color: #009900;
	}

	.doc h1 {
	text-align: left;
	margin-top: 1em;
	}
	.doc h2 {
	text-align: left;
	margin-top: 0.5em;
	}

	#contenu .gauche h4.new {
	color: #CC5555;
	background-image: url('../imgs/new.png');
	background-position: top right;
	background-repeat: no-repeat;
	}

	.doc table.prop {
	margin-left: 5%;
	font-size: 0.9em;
	border-collapse: collapse;
	width: 95%;
	}

	.doc table.prop th {
	text-align: left;
	}
	.doc table.prop th.long {
	width: 30%;
	}

	.doc table.prop tr:hover {
	background-color: #EEEEEE;
	}
	</style>
	<script type="text/javascript">
		function shownext(obj) {
			var div = obj;
			while (div && div.nodeName.toLowerCase() != 'div') {
				div = div.nextSibling;
			}
			if (div.style.display == 'block') {
				div.style.display = 'none';
			} else {
				div.style.display = 'block';
			}
		}
	</script>
</head>
<body>

<div class="body">

	<div id="contenu">
		<div class="gauche" >

			<h3 class="m4">Documentation</h3>

			<h4>Offline documentation</h4>
			<ul>
				<li><a href="docOffline_en.html" target="_blank">See offline documentation (HTML)</a></li>
				<li><a href="docOffline_en.zip">Offline documentation (ZIP, 270 kb)</a></li>
			</ul>
			<h4>HTML format</h4>
			<p>TafelTree is an opensource Javascript tree which has a lot of behaviours useful for managing datas. It's based on JSON and DOM. The HTML structure, totally transparent for the user of course, is like that :</p>

			<div id="myTree"></div>
			<div class="spacer">&nbsp;</div>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr><tr><th>14</th></tr><tr><th>15</th></tr><tr><th>16</th></tr><tr><th>17</th></tr><tr><th>18</th></tr><tr><th>19</th></tr><tr><th>20</th></tr><tr><th>21</th></tr><tr><th>22</th></tr><tr><th>23</th></tr><tr><th>24</th></tr><tr><th>25</th></tr><tr><th>26</th></tr><tr><th>27</th></tr><tr><th>28</th></tr><tr><th>29</th></tr><tr><th>30</th></tr><tr><th>31</th></tr><tr><th>32</th></tr><tr><th>33</th></tr><tr><th>34</th></tr><tr><th>35</th></tr><tr><th>36</th></tr><tr><th>37</th></tr><tr><th>38</th></tr><tr><th>39</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;div id=<span class="string">"tree"</span> class="tafelTree"></p></td></tr><tr><td><p style="padding-left:4ex;">&lt;div class="tafelTree_root"></p></td></tr><tr><td><p style="padding-left:8ex;">&lt;table>&lt;tbody>&lt;tr></p></td></tr><tr><td><p style="padding-left:12ex;">&lt;td>&lt;img class="openable<span class="string">" src="</span>../imgs/minus5.gif"/>&lt;/td></p></td></tr><tr><td><p style="padding-left:12ex;">&lt;td>&lt;img src=<span class="string">"../imgs/globe.gif"</span>/>&lt;/td></p></td></tr><tr><td><p style="padding-left:12ex;">&lt;td class="canevas<span class="string">">&lt;div class="</span>content">Root&lt;/div>&lt;/td></p></td></tr><tr><td><p style="padding-left:8ex;">&lt;/tr>&lt;/tbody>&lt;/table></p></td></tr><tr><td><p style="padding-left:8ex;">&lt;div class="tafelTree_branch"></p></td></tr><tr><td><p style="padding-left:12ex;">&lt;table>&lt;tbody>&lt;tr></p></td></tr><tr><td><p style="padding-left:16ex;">&lt;td>&lt;img src=<span class="string">"../imgs/empty.gif"</span>/>&lt;/td></p></td></tr><tr><td><p style="padding-left:16ex;">&lt;td>&lt;img class="openable<span class="string">" src="</span>../imgs/line3.gif"/>&lt;/td></p></td></tr><tr><td><p style="padding-left:16ex;">&lt;td>&lt;img src=<span class="string">"../imgs/page.gif"</span>/>&lt;/td></p></td></tr><tr><td><p style="padding-left:16ex;">&lt;td class="canevas<span class="string">">&lt;div class="</span>content"></p></td></tr><tr><td><p style="padding-left:20ex;">Child 1&lt;/div>&lt;/td></p></td></tr><tr><td><p style="padding-left:12ex;">&lt;/tr>&lt;/tbody>&lt;/table></p></td></tr><tr><td><p style="padding-left:8ex;">&lt;/div></p></td></tr><tr><td><p style="padding-left:8ex;">&lt;div class="tafelTree_branch"></p></td></tr><tr><td><p style="padding-left:12ex;">&lt;table>&lt;tbody>&lt;tr></p></td></tr><tr><td><p style="padding-left:16ex;">&lt;td>&lt;img src=<span class="string">"../imgs/empty.gif"</span>/>&lt;/td></p></td></tr><tr><td><p style="padding-left:16ex;">&lt;td>&lt;img class="openable<span class="string">" src="</span>../imgs/minus2.gif"/>&lt;/td></p></td></tr><tr><td><p style="padding-left:16ex;">&lt;td>&lt;img src=<span class="string">"../imgs/folderopen.gif"</span>/>&lt;/td></p></td></tr><tr><td><p style="padding-left:16ex;">&lt;td class="canevas<span class="string">">&lt;div class="</span>content"></p></td></tr><tr><td><p style="padding-left:20ex;">Child 2&lt;/div>&lt;/td></p></td></tr><tr><td><p style="padding-left:12ex;">&lt;/tr>&lt;/tbody>&lt;/table></p></td></tr><tr><td><p style="padding-left:12ex;">&lt;div class="tafelTree_branch"></p></td></tr><tr><td><p style="padding-left:16ex;">&lt;table>&lt;tbody>&lt;tr></p></td></tr><tr><td><p style="padding-left:20ex;">&lt;td>&lt;img src=<span class="string">"../imgs/empty.gif"</span>/>&lt;/td></p></td></tr><tr><td><p style="padding-left:20ex;">&lt;td>&lt;img src=<span class="string">"../imgs/empty.gif"</span>/>&lt;/td></p></td></tr><tr><td><p style="padding-left:20ex;">&lt;td>&lt;img class="openable"</p></td></tr><tr><td><p style="padding-left:24ex;">src=<span class="string">"../imgs/line2.gif"</span>/>&lt;/td></p></td></tr><tr><td><p style="padding-left:20ex;">&lt;td>&lt;img src=<span class="string">"../imgs/page.gif"</span>/>&lt;/td></p></td></tr><tr><td><p style="padding-left:20ex;">&lt;td class="canevas<span class="string">">&lt;div class="</span>content"></p></td></tr><tr><td><p style="padding-left:24ex;">Child with child&lt;/div>&lt;/td></p></td></tr><tr><td><p style="padding-left:16ex;">&lt;/tr>&lt;/tbody>&lt;/table></p></td></tr><tr><td><p style="padding-left:12ex;">&lt;/div></p></td></tr><tr><td><p style="padding-left:8ex;">&lt;/div></p></td></tr><tr><td><p style="padding-left:4ex;">&lt;/div></p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/div></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			<div class="doc">
			<h1>TafelTreeBranch Properties structure</h1>
			<h2>TafelTreeBranch basic properties</h2>
			
			<a name="tag"></a>
			<h4 onclick="shownext(this)">id <em>(string)</em></h4>
			<div class="develop">
				<p class="classe">Required</p>

				<p>The branch's user ID. Must be unique in the whole page, event if it's not in the same tree.
				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"myId"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"My super text"</span></p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// UL - LI</span></p></td></tr><tr><td><p style="padding-left:0ex;">&lt;li id=<span class="string">"myId"</span>>My super text&lt;/li></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>
			
			<a name="txt"></a>
			<h4 onclick="shownext(this)">txt <em>(string)</em></h4>
			<div class="develop">
				<p class="classe">Required</p>
				<p>The text which is showed just next the icon</p>
				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"myId"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"My super text"</span></p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// UL - LI</span></p></td></tr><tr><td><p style="padding-left:0ex;">&lt;li id=<span class="string">"myId"</span>>My super text&lt;/li></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<a name="acceptdrop"></a>
			<h4 onclick="shownext(this)">acceptdrop <em>(boolean)</em></h4>
			<div class="develop">
				<p class="classe">Optional. Defaul value : true</p>
				<p><strong>True</strong> means you can drop a branch into it, <strong>false</strong> make this action impossible.</p>

				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"myId"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"My super text"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"acceptdrop"</span> : <span class="reserved">true</span></p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// UL - LI</span></p></td></tr><tr><td><p style="padding-left:0ex;">&lt;li id=<span class="string">"myId"</span> Tacceptdrop=<span class="string">"1"</span>>My super text&lt;/li></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>
			
			<a name="canhavechildren"></a>
			<h4 onclick="shownext(this)">canhavechildren <em>(boolean)</em></h4>
			<div class="develop">
				<p class="classe">Optional. Defaul value : false</p>
				<p><strong>*rue</strong> means the branch can have children from the server. You need it with the function <strong><a href="#onopenpopulate">onopenpopulate()</a></strong>. That allow the branch to have the " + " which shows that the branch has children.</p>

				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"myId"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"My super text"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"canhavechildren"</span> : <span class="reserved">true</span></p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// UL - LI</span></p></td></tr><tr><td><p style="padding-left:0ex;">&lt;li id=<span class="string">"myId"</span> Tcanhavechildren=<span class="string">"1"</span>>My super text&lt;/li></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>
			
			<a name="check"></a>
			<h4 onclick="shownext(this)">check <em>(integer)</em></h4>
			<div class="develop">
				<p class="classe">Optional. Defaul value : 0</p>
				<p>Put <strong>1</strong> and the branch will be checked, if checkboxes are activated</p>

				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"myId"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"My super text"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"check"</span> : 1</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// UL - LI</span></p></td></tr><tr><td><p style="padding-left:0ex;">&lt;li id=<span class="string">"myId"</span> Tcheck=<span class="string">"1"</span>>My super text&lt;/li></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>
			
			<a name="draggable"></a>
			<h4 onclick="shownext(this)">draggable <em>(boolean)</em></h4>
			<div class="develop">
				<p class="classe">Optional. Defaul value : true</p>
				<p><strong>True</strong> allows you to drag the branch, <strong>false</strong> make this action impossible. Have no effects if the functions setOnDrop() or setOnDropAjax() aren't defined. (or ondrop or ondropajax)</p>

				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"myId"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"My super text"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"draggable"</span> : <span class="reserved">true</span></p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// UL - LI</span></p></td></tr><tr><td><p style="padding-left:0ex;">&lt;li id=<span class="string">"myId"</span> Tdraggable=<span class="string">"1"</span>>My super text&lt;/li></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>
			
			<a name="editable"></a>
			<h4 onclick="shownext(this)">editable <em>(boolean)</em></h4>
			<div class="develop">
				<p class="classe">Optional. Defaul value : 1</p>
				<p>Permit the branch to be edited or not. If the funciton onEdit() exists, you can put 0 to force the branch to be "readonly"</p>
				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"myId"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"My super text"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"editable"</span> : <span class="reserved">false</span></p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// UL - LI</span></p></td></tr><tr><td><p style="padding-left:0ex;">&lt;li id=<span class="string">"myId"</span> Teditable=<span class="string">"0"</span>>My super text&lt;/li></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>
			
			<a name="img"></a>
			<h4 onclick="shownext(this)">img <em>(string)</em></h4>
			<div class="develop">
				<p class="classe">Optional. Defaul value : no icon</p>
				<p>The icon if the branch hasn't children</p>
				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"myId"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"My super text"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"img"</span> : <span class="string">"anImg.gif"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"imgopen"</span> : <span class="string">"anImg.gif"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"imgclose"</span> : <span class="string">"anImg.gif"</span></p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// UL - LI</span></p></td></tr><tr><td><p style="padding-left:0ex;">&lt;li id=<span class="string">"myId"</span> Timg=<span class="string">"anImg.gif"</span> Timgopen=<span class="string">"anImg.gif"</span> Timgclose=<span class="string">"anImg.gif"</span>>My super text&lt;/li></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>
			
			<a name="imgclose"></a>
			<h4 onclick="shownext(this)">imgclose <em>(string)</em></h4>
			<div class="develop">
				<p class="classe">Optional. Defaul value : the same as <a href="#img">img</a></p>
				<p>The icon if the branch has children and is closed.</p>

				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"myId"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"My super text"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"img"</span> : <span class="string">"anImg.gif"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"imgopen"</span> : <span class="string">"anImg.gif"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"imgclose"</span> : <span class="string">"anImg.gif"</span></p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// UL - LI</span></p></td></tr><tr><td><p style="padding-left:0ex;">&lt;li id=<span class="string">"myId"</span> Timg=<span class="string">"anImg.gif"</span> Timgopen=<span class="string">"anImg.gif"</span> Timgclose=<span class="string">"anImg.gif"</span>>My super text&lt;/li></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>
			
			<a name="imgopen"></a>
			<h4 onclick="shownext(this)">imgopen <em>(string)</em></h4>
			<div class="develop">
				<p class="classe">Optional. Defaul value : the same as <a href="#img">img</a></p>
				<p>The icon if the branch has children and is opened.</p>

				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"myId"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"My super text"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"img"</span> : <span class="string">"anImg.gif"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"imgopen"</span> : <span class="string">"anImg.gif"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"imgclose"</span> : <span class="string">"anImg.gif"</span></p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// UL - LI</span></p></td></tr><tr><td><p style="padding-left:0ex;">&lt;li id=<span class="string">"myId"</span> Timg=<span class="string">"anImg.gif"</span> Timgopen=<span class="string">"anImg.gif"</span> Timgclose=<span class="string">"anImg.gif"</span>>My super text&lt;/li></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>
			
			<a name="img"></a>
			<h4 class="new" onclick="shownext(this)">imgselected <em>(string)</em></h4>
			<div class="develop">
				<p class="classe">Optional. Defaul value : the same as <a href="#img">img</a></p>
				<p>The icon if the branch hasn't children and is selected</p>

				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"myId"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"My super text"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"imgselected"</span> : <span class="string">"anImgSelect.gif"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"img"</span> : <span class="string">"anImg.gif"</span></p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// UL - LI</span></p></td></tr><tr><td><p style="padding-left:0ex;">&lt;li id=<span class="string">"myId"</span> Timg=<span class="string">"anImg.gif"</span> Timgselected=<span class="string">"anImgSelect.gif"</span>>My super text&lt;/li></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>
			
			<a name="imgclose"></a>
			<h4 class="new" onclick="shownext(this)">imgcloseselected <em>(string)</em></h4>
			<div class="develop">
				<p class="classe">Optional. Defaul value : the same as <a href="#img">imgclose</a></p>
				<p>The icon if the branch has children and is closed and selected.</p>

				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"myId"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"My super text"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"imgcloseselected"</span> : <span class="string">"anImgSelect.gif"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"imgclose"</span> : <span class="string">"anImg.gif"</span></p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// UL - LI</span></p></td></tr><tr><td><p style="padding-left:0ex;">&lt;li id=<span class="string">"myId"</span> Timgcloseselected=<span class="string">"anImgSelect.gif"</span> Timgclose=<span class="string">"anImg.gif"</span>>My super text&lt;/li></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>
			
			<a name="imgopen"></a>
			<h4 class="new" onclick="shownext(this)">imgopenselected <em>(string)</em></h4>
			<div class="develop">
				<p class="classe">Optional. Defaul value : the same as <a href="#img">imgopen</a></p>
				<p>The icon if the branch has children and is opened and selected.</p>

				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"myId"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"My super text"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"imgopenselected"</span> : <span class="string">"anImgSelect.gif"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"imgopen"</span> : <span class="string">"anImg.gif"</span></p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// UL - LI</span></p></td></tr><tr><td><p style="padding-left:0ex;">&lt;li id=<span class="string">"myId"</span> Timgopen=<span class="string">"anImg.gif"</span> Timgopenselected=<span class="string">"anImgSelect.gif"</span>>My super text&lt;/li></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>
			
			<a name="items"></a>
			<h4 onclick="shownext(this)">items <em>(array)</em></h4>
			<div class="develop">
				<p class="classe">Optional</p>
				<p>An array of TafelTreeBranch descriptions. Represents the children of the branch.</p>
				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr><tr><th>14</th></tr><tr><th>15</th></tr><tr><th>16</th></tr><tr><th>17</th></tr><tr><th>18</th></tr><tr><th>19</th></tr><tr><th>20</th></tr><tr><th>21</th></tr><tr><th>22</th></tr><tr><th>23</th></tr><tr><th>24</th></tr><tr><th>25</th></tr><tr><th>26</th></tr><tr><th>27</th></tr><tr><th>28</th></tr><tr><th>29</th></tr><tr><th>30</th></tr><tr><th>31</th></tr><tr><th>32</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"myId"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"My super text"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"items"</span> : [</p></td></tr><tr><td><p style="padding-left:4ex;">{</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"id"</span> : <span class="string">"child1"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"txt"</span> : <span class="string">"Child 1"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"items"</span> : [</p></td></tr><tr><td><p style="padding-left:8ex;">{</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="string">"id"</span> : <span class="string">"child1_1"</span>,</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="string">"txt"</span> : <span class="string">"Child of child 1"</span></p></td></tr><tr><td><p style="padding-left:8ex;">}</p></td></tr><tr><td><p style="padding-left:8ex;">]</p></td></tr><tr><td><p style="padding-left:4ex;">}, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"id"</span> : <span class="string">"child2"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"txt"</span> : <span class="string">"Child 2"</span></p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:4ex;">]</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// UL - LI</span></p></td></tr><tr><td><p style="padding-left:0ex;">&lt;li id=<span class="string">"myId"</span>>My super text</p></td></tr><tr><td><p style="padding-left:4ex;">&lt;ul></p></td></tr><tr><td><p style="padding-left:8ex;">&lt;li id=<span class="string">"child1"</span>>Child 1</p></td></tr><tr><td><p style="padding-left:12ex;">&lt;ul></p></td></tr><tr><td><p style="padding-left:16ex;">&lt;li id=<span class="string">"child1_1"</span>>Child of child 1&lt;/li></p></td></tr><tr><td><p style="padding-left:12ex;">&lt;/ul></p></td></tr><tr><td><p style="padding-left:8ex;">&lt;/li></p></td></tr><tr><td><p style="padding-left:8ex;">&lt;li id=<span class="string">"child2"</span>>Child 2&lt;/li></p></td></tr><tr><td><p style="padding-left:4ex;">&lt;/ul></p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/li></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>
			
			<a name="last"></a>
			<h4 onclick="shownext(this)">last <em>(boolean)</em></h4>
			<div class="develop">
				<p class="classe">Optional. Defaul value : false</p>
				<p><strong>True</strong> allows you to have the branch always in the last position (in its parent). Useful after drag&drop, if you drag an other branch into the parent and whish to have this one always last.</p>

				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"myId"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"Trash"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"img"</span> : <span class="string">"trash.gif"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"last"</span> : <span class="reserved">true</span></p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// UL - LI</span></p></td></tr><tr><td><p style="padding-left:0ex;">&lt;li id=<span class="string">"myId"</span> Tlast=<span class="string">"1"</span>>My super text&lt;/li></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>
			
			<a name="open"></a>
			<h4 onclick="shownext(this)">open <em>(boolean)</em></h4>
			<div class="develop">
				<p class="classe">Optional. Defaul value, the value of (<a href="#setOpenAll">setOpenAll()</a>). If cookies are activated, it's the cookie's state which is the default.</p>
				<p><strong>True</strong> to have the branch open, <strong>false</strong> to have it closed.</p>

				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"myId"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"My super text"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"open"</span> : <span class="reserved">true</span></p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// UL - LI</span></p></td></tr><tr><td><p style="padding-left:0ex;">&lt;li id=<span class="string">"myId"</span> Topen=<span class="string">"1"</span>>My super text&lt;/li></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>
			
			<a name="style"></a>
			<h4 onclick="shownext(this)">style <em>(string)</em></h4>
			<div class="develop">
				<p class="classe">Optional</p>
				<p>The name of a CSS class. This class will be set for the text</p>
				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"myId"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"My super text"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"style"</span> : <span class="string">"aCSSclassName"</span></p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// UL - LI</span></p></td></tr><tr><td><p style="padding-left:0ex;">&lt;li id=<span class="string">"myId"</span> Tstyle=<span class="string">"aCCSclassName"</span>>My super text&lt;/li></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>
			
			<a name="title"></a>
			<h4 onclick="shownext(this)">title <em>(string)</em></h4>
			<div class="develop">
				<p class="classe">Optional</p>
				<p>The content of the HTML attribute "title". It can contains only plain normal text.</p>
				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"myId"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"My super text"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"title"</span> : <span class="string">"My title"</span></p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// UL - LI</span></p></td></tr><tr><td><p style="padding-left:0ex;">&lt;li id=<span class="string">"myId"</span> Ttitle=<span class="string">"My title"</span>>My super text&lt;/li></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>
			
			<a name="style"></a>
			<h4 onclick="shownext(this)">tooltip <em>(string)</em></h4>
			<div class="develop">
				<p class="classe">Optional</p>
				<p>A tooltip which shows after an "onmouseover". The content can be HTML or text (or both)</p>
				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"myId"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"My super text"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"tooltip"</span> : <span class="string">"Mon joli tooltip"</span></p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// UL - LI</span></p></td></tr><tr><td><p style="padding-left:0ex;">&lt;li id=<span class="string">"myId"</span> Ttooltip=<span class="string">"Mon joli tooltip"</span>>My super text&lt;/li></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

				<h4>Notes</h4>
				<ul>
					<li>It's possible to put HTML. Beware with ( ' ) and ( " )</li>
					<li>The tooltip is automatically inserted into a hidden DIV</li>
					<li>The CSS style is <strong>div.tooltip</strong></li>
				</ul>

			</div>


			<h2>TafelTreeBranch function properties</h2>

			<a name="onbeforecheck"></a>
			<h4 onclick="shownext(this)">onbeforecheck <em>(function)</em></h4>
			<div class="develop">
				<h4>Arguments</h4>

				<table class="prop">
					<tr><th>branch <em>(TafelTreeBranch)</em></th>
						<td>the branch which called this action</td></tr>
					<tr><th>checked <em>(boolean)</em></th>
						<td>the check state of the branch</td></tr>
				</table>

				<p class="var">Optional</p>
				<p>Called when you check or uncheck a branch, BEFORE changes are made.</p>
				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">function</span> myBeforeCheck (branch, checked) {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(branch.getId());</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">return</span> <span class="reserved">true</span>;</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"tag1"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"A branch"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"onbeforecheck"</span> : myBeforeCheck</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<a name="onbeforeopen"></a>
			<h4 onclick="shownext(this)">onbeforeopen <em>(function)</em></h4>
			<div class="develop">
				<h4>Arguments</h4>
				<table class="prop">
					<tr><th>branch <em>(TafelTreeBranch)</em></th>

						<td>the branch which called this action</td></tr>
					<tr><th>opened <em>(boolean)</em></th>
						<td>the open state of the branch</td></tr>
				</table>
				<p class="var">Optional</p>
				<p>Called just before the branch is opened or closed. <strong>It must return a boolean</strong>. Override <strong><a href="#setOnBeforeOpen">setOnBeforeOpen()</a></strong> of TafelTree</p>

				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr><tr><th>14</th></tr><tr><th>15</th></tr><tr><th>16</th></tr><tr><th>17</th></tr><tr><th>18</th></tr><tr><th>19</th></tr><tr><th>20</th></tr><tr><th>21</th></tr><tr><th>22</th></tr><tr><th>23</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">function</span> myBeforeOpen (branch, opened) {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Tests</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">if</span> (resultsFromTest) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// OK, the branch will open</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">return</span> <span class="reserved">true</span>;</p></td></tr><tr><td><p style="padding-left:4ex;">} <span class="reserved">else</span> {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// Here, the branch won't open. The <span class="reserved">function</span></span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// myOpen() won't be called</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">return</span> <span class="reserved">false</span>;</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="reserved">function</span> myOpen (branch, opened) {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(branch.getTag());</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"tag1"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"A branch"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"onbeforeopen"</span> : myBeforeOpen,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"onopen"</span> : myOpen</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<a name="oncheck"></a>
			<h4 onclick="shownext(this)">oncheck <em>(function)</em></h4>
			<div class="develop">
				<h4>Arguments</h4>
				<table class="prop">
					<tr><th>branch <em>(TafelTreeBranch)</em></th>

						<td>the branch which called this action</td></tr>
					<tr><th>checked <em>(boolean)</em></th>
						<td>the check state of the branch</td></tr>
				</table>
				<p class="var">Optional</p>
				<p>Called after the check (or uncheck) is done</p>

				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">function</span> myCheck (branch, checked) {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(branch.getId());</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"tag1"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"A branch"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"oncheck"</span> : myCheck</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<a name="onclick"></a>
			<h4 onclick="shownext(this)">onclick <em>(function)</em></h4>
			<div class="develop">
				<h4>Arguments</h4>
				<table class="prop">
					<tr><th>branch <em>(TafelTreeBranch)</em></th>

						<td>the branch which called this action</td></tr>
				</table>
				<p class="var">Optional</p>
				<p>Called when you click on the branch. Override <strong><a href="#setOnClick">setOnClick()</a></strong> of TafelTree</p>
				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">function</span> myClick (branch) {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(branch.getId());</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"tag1"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"A branch click"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"onclick"</span> : myClick</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<a name="ondblclick"></a>
			<h4 onclick="shownext(this)">ondblclick <em>(function)</em></h4>
			<div class="develop">
				<h4>Arguments</h4>
				<table class="prop">
					<tr><th>branch <em>(TafelTreeBranch)</em></th>

						<td>the branch which called this action</td></tr>
				</table>
				<p class="var">Optional</p>
				<p>Called when you double-click on the branch. Override <strong><a href="#setOnDblClick">setOnDblClick()</a></strong> of TafelTree</p>
				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">function</span> myDblClick (branch) {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(branch.getId());</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"tag1"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"A branch double-click"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"ondblclick"</span> : myDblClick</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<a name="ondrop"></a>
			<h4 class="new" onclick="shownext(this)">ondrop <em>(function)</em></h4>
			<div class="develop">
				<h4>Arguments</h4>
				<table class="prop">
					<tr><th>branch_move <em>(TafelTreeBranch)</em></th>

						<td>the dragged branch</td></tr>
					<tr><th>branch_here <em>(TafelTreeBranch)</em></th>
						<td>branch where the drop is done</td></tr>
					<tr><th>drop_finished <em>(boolean)</em></th>
						<td>False if drop isn't done, True if drop is done</td></tr>

					<tr><th>new_branch <em>(boolean)</em></th>
						<td>The inserted branch, if it's a copyDrag</td></tr>
				</table>
				<p class="var">Optional</p>
				<p>Called after the drop of the branch. <strong>It must return a boolean</strong>. You can make a "drop as sibling" if you keep the <strong>ALT</strong> key pressed. You can also do a "copydrag" if you maintain the <strong>CONTROL</strong> key pressed. Override <strong><a href="#setOnDrop">setOnDrop()</a></strong> of TafelTree</p>

				<p>This method is called twice. One time before drop happens (drop_finished = false) and one time after the drop is done (drop_finished = true), if there were no errors before.</p>
				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr><tr><th>14</th></tr><tr><th>15</th></tr><tr><th>16</th></tr><tr><th>17</th></tr><tr><th>18</th></tr><tr><th>19</th></tr><tr><th>20</th></tr><tr><th>21</th></tr><tr><th>22</th></tr><tr><th>23</th></tr><tr><th>24</th></tr><tr><th>25</th></tr><tr><th>26</th></tr><tr><th>27</th></tr><tr><th>28</th></tr><tr><th>29</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">function</span> myDrop (branch_move, branch_here, drop_finished,</p></td></tr><tr><td><p style="padding-left:4ex;">new_branch) {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Beware, the <span class="reserved">function</span> is called twice. One time before drop</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// happends, one time after. Here, we check before drop</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// happends</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">if</span> (!drop_finished) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// Tests</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">if</span> (resultsFromTest) {</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="comment">// OK, the branch will be dropped here</span></p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">return</span> <span class="reserved">true</span>;</p></td></tr><tr><td><p style="padding-left:8ex;">} <span class="reserved">else</span> {</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="comment">// Here, the branch won't be dropped and will return</span></p></td></tr><tr><td><p style="padding-left:12ex;"><span class="comment">// at her place</span></p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">return</span> <span class="reserved">false</span>;</p></td></tr><tr><td><p style="padding-left:8ex;">}</p></td></tr><tr><td><p style="padding-left:4ex;">} <span class="reserved">else</span> {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// We can get the <span class="reserved">new</span> inserted branch, <span class="reserved">if</span> it's a copyDrag</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">if</span> (new_branch) {</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">alert</span>(new_branch.getId())</p></td></tr><tr><td><p style="padding-left:8ex;">}</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"tag1"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"A branch"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"ondrop"</span> : myDrop</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

				<h4>Notes</h4>
				<ul>
					<li>Keep ALT pressed for an "as sibling" drop</li>
					<li>Keep CONTROL pressed to make a "copydrag"</li>
				</ul>
			</div>

			<a name="onedit"></a>

			<h4 onclick="shownext(this)">onedit <em>(function)</em></h4>
			<div class="develop">
				<h4>Arguments</h4>
				<table class="prop">
					<tr><th>branch <em>(TafelTreeBranch)</em></th>
						<td>the edited branch</td></tr>

					<tr><th>newValue <em>(string)</em></th>
						<td>the new value</td></tr>
					<tr><th>oldValue <em>(string)</em></th>
						<td>the old value</td></tr>
				</table>
				<p class="var">Optional</p>

				<p>Called after the edition of the branch (precisely, after the blur() of the input)</p>
				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr><tr><th>14</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">function</span> myEdit (branch, newValue, oldValue) {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">if</span> (newValue.toLowerCase() == <span class="string">"trop facile"</span>) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">return</span> <span class="string">"Vraiment trop facile"</span>;</p></td></tr><tr><td><p style="padding-left:4ex;">} <span class="reserved">else</span> {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">return</span> newValue;</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"tag1"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"To be edited..."</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"onedit"</span> : myEdit</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

				<h4>Notes</h4>
				<ul>
					<li>Returns the string that will be the new value of the branch</li>
				</ul>
			</div>

			<a name="onmouseout"></a>
			<h4 onclick="shownext(this)">onmouseout <em>(function)</em></h4>

			<div class="develop">
				<h4>Arguments</h4>
				<table class="prop">
					<tr><th>branch <em>(TafelTreeBranch)</em></th>
						<td>the branch which called this action</td></tr>
				</table>
				<p class="var">Optional</p>

				<p>Called after a "mouse out" of the branch. Override <strong><a href="#setOnMouseOut">setOnMouseOut()</a></strong> of TafelTree</p>
				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr><tr><th>14</th></tr><tr><th>15</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">function</span> myMouseOut (branch) {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(<span class="string">"out : "</span> + branch.getId());</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="reserved">function</span> myMouseOver (branch) {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(<span class="string">"over : "</span> + branch.getId());</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"tag1"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"A branch mouse over and out"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"onmouseover"</span> : myMouseOver,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"onmouseout"</span> : myMouseOut</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<a name="onmouseover"></a>
			<h4 onclick="shownext(this)">onmouseover <em>(function)</em></h4>
			<div class="develop">
				<h4>Arguments</h4>
				<table class="prop">
					<tr><th>branch <em>(TafelTreeBranch)</em></th>

						<td>the branch which called this action</td></tr>
				</table>
				<p class="var">Optional</p>
				<p>Called after a "mouse over" of the branch. Override <strong><a href="#setOnMouseOver">setOnMouseOver()</a></strong> of TafelTree</p>
				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr><tr><th>14</th></tr><tr><th>15</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">function</span> myMouseOut (branch) {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(<span class="string">"out : "</span> + branch.getId());</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="reserved">function</span> myMouseOver (branch) {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(<span class="string">"over : "</span> + branch.getId());</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"tag1"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"A branch mouse over and out"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"onmouseover"</span> : myMouseOver,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"onmouseout"</span> : myMouseOut</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<a name="onmousedown"></a>
			<h4 class="new" onclick="shownext(this)">onmousedown <em>(function)</em></h4>
			<div class="develop">
				<h4>Arguments</h4>
				<table class="prop">
					<tr><th>branch <em>(TafelTreeBranch)</em></th>

						<td>the branch which called this action</td></tr>
				</table>
				<p class="var">Optional</p>
				<p>Called after a "mouse down" of the branch. Override <strong><a href="#setOnMouseDown">setOnMouseDown()</a></strong> of TafelTree</p>
				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">function</span> myMouseDown (branch) {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(<span class="string">"down : "</span> + branch.getId());</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"tag1"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"A branch mouse down"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"onmousedown"</span> : myMouseDown</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<a name="onmouseup"></a>
			<h4 class="new" onclick="shownext(this)">onmouseup <em>(function)</em></h4>
			<div class="develop">
				<h4>Arguments</h4>
				<table class="prop">
					<tr><th>branch <em>(TafelTreeBranch)</em></th>

						<td>the branch which called this action</td></tr>
				</table>
				<p class="var">Optional</p>
				<p>Called after a "mouse up" of the branch. Override <strong><a href="#setOnMouseUp">setOnMouseUp()</a></strong> of TafelTree</p>
				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">function</span> myMouseUp (branch) {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(<span class="string">"up : "</span> + branch.getId());</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"tag1"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"A branch mouse up"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"onmouseup"</span> : myMouseUp</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<a name="onopen"></a>
			<h4 onclick="shownext(this)">onopen <em>(function)</em></h4>
			<div class="develop">
				<h4>Arguments</h4>
				<table class="prop">
					<tr><th>branch <em>(TafelTreeBranch)</em></th>

						<td>the branch which called this action</td></tr>
					<tr><th>opened <em>(boolean)</em></th>
						<td>the state of the branch</td></tr>
				</table>
				<p class="var">Optional</p>
				<p>Called after the branch is opened or closed. Override <strong><a href="#setOnOpen">setOnOpen()</a></strong> of TafelTree</p>

				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr><tr><th>14</th></tr><tr><th>15</th></tr><tr><th>16</th></tr><tr><th>17</th></tr><tr><th>18</th></tr><tr><th>19</th></tr><tr><th>20</th></tr><tr><th>21</th></tr><tr><th>22</th></tr><tr><th>23</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">function</span> myBeforeOpen (branch, opened) {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Tests</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">if</span> (resultsFromTest) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// OK, the branch will open</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">return</span> <span class="reserved">true</span>;</p></td></tr><tr><td><p style="padding-left:4ex;">} <span class="reserved">else</span> {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// Here, the branch won't open. The <span class="reserved">function</span></span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// myOpen() won't be called</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">return</span> <span class="reserved">false</span>;</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="reserved">function</span> myOpen (branch, opened) {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(branch.getTag());</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"tag1"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"A branch"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"onbeforeopen"</span> : myBeforeOpen,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"onopen"</span> : myOpen</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>


			<h2>Specialities</h2>

			<h4 class="new" onclick="shownext(this)">onerrorajax(function)</h4>
			<div class="develop">
				<h4>Arguments</h4>
				<table class="prop">

					<tr><th>type <em>(string)</em></th>
						<td>error type (open, drop or edit)</td></tr>
					<tr><th>response <em>(string)</em></th>
						<td>Ajax response text</td></tr>
					<tr><th>branch <em>(TafelTreeBranch)</em></th>

						<td>current branch</td></tr>
					<tr><th>droppedOn <em>(TafelTreeBranch)</em></th>
						<td>branch dropped on (if it's a "drop" error)</td></tr>
				</table>
				<p>Called after an error Ajax in functions drop, open or edit</p>
				<h4>Samples</h4>

				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr><tr><th>14</th></tr><tr><th>15</th></tr><tr><th>16</th></tr><tr><th>17</th></tr><tr><th>18</th></tr><tr><th>19</th></tr><tr><th>20</th></tr><tr><th>21</th></tr><tr><th>22</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">function</span> myErrorAjax (type, response, branch, droppedOn) {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Check the type of error. Can be drop, edit or open</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">switch</span> (type) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">case</span> <span class="string">"drop"</span> :</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">alert</span>(<span class="string">"An error occured during the drop"</span>);</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">break</span>;</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">case</span> <span class="string">"open"</span> :</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">break</span>;</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">case</span> <span class="string">"edit"</span> :</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">break</span>;</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"tag1"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"A branch"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"ondropajax"</span> : myDrop,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"droplink"</span> : <span class="string">"page.php"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"onerrorajax"</span> : myErrorAjax</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<a name="openlink"></a>
			<h4 onclick="shownext(this)">openlink <em>(string)</em></h4>
			<div class="develop">
				<p class="err">Optional, but required if <strong>onopenpopulate</strong> is defined. Used with the branch property <strong><a href="#canhavechildren">canhavechildren</a></strong></p>

				<p>Path of a script page on the server. Override <strong><a href="#setOnOpenPopulate">setOnOpenPopulate()</a></strong> of TafelTree</p>
			</div>

			<a name="onopenpopulate"></a>
			<h4 onclick="shownext(this)">onopenpopulate <em>(function)</em></h4>
			<div class="develop">

				<h4>Arguments</h4>
				<table class="prop">
					<tr><th>branch <em>(TafelTreeBranch)</em></th>
						<td>the branch opened</td></tr>
					<tr><th>response <em>(string)</em></th>
						<td>the Ajax response text</td></tr>

				</table>
				<p class="err">Optional</p>
				<p>Called after a branch is opened. When it's open, it launch an Ajax request at the page <strong>openlink</strong> and send the Ajax response to the user function. <strong>It must return a JSON string representing an array of one or more TafelTreeBranch</strong>. Override <strong><a href="#setOnOpenPopulate">setOnOpenPopulate()</a></strong> of TafelTree</p>
				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr><tr><th>14</th></tr><tr><th>15</th></tr><tr><th>16</th></tr><tr><th>17</th></tr><tr><th>18</th></tr><tr><th>19</th></tr><tr><th>20</th></tr><tr><th>21</th></tr><tr><th>22</th></tr><tr><th>23</th></tr><tr><th>24</th></tr><tr><th>25</th></tr><tr><th>26</th></tr><tr><th>27</th></tr><tr><th>28</th></tr><tr><th>29</th></tr><tr><th>30</th></tr><tr><th>31</th></tr><tr><th>32</th></tr><tr><th>33</th></tr><tr><th>34</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">function</span> myOpenPopulate (branch, response) {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// To see the content of response, you can <span class="string">"<span class="reserved">alert</span>"</span> it or</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// put it in a div content like that :</span></p></td></tr><tr><td><p style="padding-left:4ex;">branch.tree.debug(response);</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Evaluate a JSON response (note that the JSON is an array)</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// The response MUST BE a description of one or more</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// TafelTreeBranch</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// [{</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// <span class="string">"id"</span> : <span class="string">"id_from_server_1"</span>,</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// <span class="string">"txt"</span> : <span class="string">"This is one is from the server"</span>,</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// <span class="string">"img"</span> : <span class="string">"globe.gif"</span></span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// }]</span></p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Some tests</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">if</span> (resultsFromTest) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// OK, the branch will be open with <span class="reserved">new</span> children</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// from the server;</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">return</span> response;</p></td></tr><tr><td><p style="padding-left:4ex;">} <span class="reserved">else</span> {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// Here, the branch won't be open and no children will</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// be added</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">return</span> <span class="reserved">false</span>;</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"tag1"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"A branch"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"onopenpopulate"</span> : myOpenPopulate,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"openlink"</span> : <span class="string">"somewhere/serverScriptPage.php"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"canhavechildren"</span> : <span class="reserved">true</span></p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

				<h4>Notes</h4>
				<ul>
					<li>Response MUST BE an JSON array ( <strong>[ ]</strong> ) representing one or more TafelTreeBranch</li>
					<li>JSON MUST BE a description of one or more TafelTreeBranch</li>
					<li>Vars sent to the script page <a href="#openlink">openlink</a> are sent in POST</li>

					<li>These vars are :
						<ul>
							<li>" branch " = JSON description of the branch opened</li>
							<li>" branch_id " = id of the branch opened</li>
							<li>" tree_id " = id of the branch's parent tree</li>
						</ul>
					</li>
					<li>All other vars passed throught <a href="#openlink">openlink</a> are in POST. For example, if openlink = "page.php?spec=1", you'll get <em>spec</em> in POST.</li>

				</ul>
			</div>

			<a name="editlink"></a>
			<h4 onclick="shownext(this)">editlink <em>(string)</em></h4>
			<div class="develop">
				<p class="err">Optional, but required if <strong>oneditajax</strong> is defined. Can be used with the branch property <strong><a href="#editable">editable</a></strong></p>

				<p>Path of a script page on the server. Override <strong><a href="#setOnEditAjax">setOnEditAjax()</a></strong> of TafelTree</p>
			</div>

			<a name="oneditajax"></a>
			<h4 onclick="shownext(this)">oneditajax <em>(function)</em></h4>
			<div class="develop">

				<h4>Arguments</h4>
				<table class="prop">
					<tr><th>branch <em>(TafelTreeBranch)</em></th>
						<td>the edited branch</td></tr>
					<tr><th>response <em>(string)</em></th>
						<td>the Ajax response text</td></tr>

					<tr><th>oldValue <em>(string)</em></th>
						<td>the old value</td></tr>
				</table>
				<p class="err">Optional</p>
				<p>Called after the branch is edited. It launch an Ajax request at the page <strong>editlink</strong> and send the Ajax response to the user function. <strong>The method must return a string representing the new value of the branch</strong>. Override <strong><a href="#setOnEditAjax">setOnEditAjax()</a></strong> of TafelTree</p>

				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr><tr><th>14</th></tr><tr><th>15</th></tr><tr><th>16</th></tr><tr><th>17</th></tr><tr><th>18</th></tr><tr><th>19</th></tr><tr><th>20</th></tr><tr><th>21</th></tr><tr><th>22</th></tr><tr><th>23</th></tr><tr><th>24</th></tr><tr><th>25</th></tr><tr><th>26</th></tr><tr><th>27</th></tr><tr><th>28</th></tr><tr><th>29</th></tr><tr><th>30</th></tr><tr><th>31</th></tr><tr><th>32</th></tr><tr><th>33</th></tr><tr><th>34</th></tr><tr><th>35</th></tr><tr><th>36</th></tr><tr><th>37</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">function</span> myEditAjax (branch, response, oldValue) {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// To see the content of response, you can <span class="string">"<span class="reserved">alert</span>"</span> it or</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// put it in a div content like that :</span></p></td></tr><tr><td><p style="padding-left:4ex;">branch.tree.debug(response);</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Evaluate a JSON response (note that the JSON is inside</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// brackets). The response should contain, somehow, the</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// <span class="reserved">new</span> value of the branch</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// ({</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// <span class="string">"message"</span> : <span class="string">"Everything was fine on the server"</span>,</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// <span class="string">"newValue"</span> : <span class="string">"<span class="reserved">new</span> value of the branch"</span>,</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// <span class="string">"anyOtherParams"</span> : <span class="reserved">true</span></span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// })</span></p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// You can also just <span class="reserved">return</span> the <span class="reserved">new</span> value, <span class="reserved">if</span> you want</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// (and so you don't need brackets anymore). For example:</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span> (response); <span class="comment">// show the <span class="reserved">new</span> text</span></p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Some tests</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">if</span> (resultsFromTest) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// OK, the branch will be edited and will have as</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// value what is returned by this <span class="reserved">function</span></span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">return</span> theNewValue;</p></td></tr><tr><td><p style="padding-left:4ex;">} <span class="reserved">else</span> {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// Here, the branch won<span class="string">'t be edited and it'</span>ll keep</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// the oldValue</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">return</span> <span class="reserved">false</span>;</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"tag1"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"A branch"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"oneditajax"</span> : myEditAjax,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"editlink"</span> : <span class="string">"somewhere/serverScriptPage.php"</span></p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

				<h4>Notes</h4>
				<ul>
					<li>The Ajax response should contain the new value of the branch</li>
					<li>Vars sent to the script page <a href="#editlink">editlink</a> are sent in POST</li>
					<li>These vars are :
						<ul>

							<li>" branch " = JSON description of the branch</li>
							<li>" branch_id " = id of the branch</li>
							<li>" tree_id " = id of the branch's parent tree</li>
							<li>" new_value " = the new value</li>
							<li>" old_value " = the old value</li>
						</ul>

					</li>
					<li>All other vars passed throught <a href="#editlink">editlink</a> are in POST. For example, if editlink = "page.php?spec=1", you'll get <em>spec</em> in POST.</li>
				</ul>
			</div>

			<a name="droplink"></a>

			<h4 onclick="shownext(this)">droplink <em>(string)</em></h4>
			<div class="develop">
				<p class="err">Optional, but required if <strong>ondropajax</strong> is defined.</p>
				<p>Path of a script page on the server. Override <strong><a href="#setOnDropAjax">setOnDropAjax()</a></strong> of TafelTree</p>

			</div>

			<a name="ondropajax"></a>
			<h4 class="new" onclick="shownext(this)">ondropajax <em>(function)</em></h4>
			<div class="develop">
				<h4>Arguments</h4>
				<table class="prop">
					<tr><th>branch_move <em>(TafelTreeBranch)</em></th>

						<td>the dragged branch</td></tr>
					<tr><th>branch_here <em>(TafelTreeBranch)</em></th>
						<td>the branch dropped on</td></tr>
					<tr><th>response <em>(string)</em></th>
						<td>the Ajax response text</td></tr>

					<tr><th>drop_finished <em>(boolean)</em></th>
						<td>False if drop isn't done, True if drop is done</td></tr>
					<tr><th>new_branch <em>(boolean)</em></th>
						<td>The inserted branch, if it's a copyDrag</td></tr>
				</table>
				<p class="err">Optional</p>

				<p>Called after a drag&drop. When the branch is dropped, it launch an Ajax request at the page  <strong>droplink</strong> and send the Ajax response to the user function. <strong>The medthod must return a boolean</strong>. You can make a "drop as sibling" if you keep the <strong>ALT</strong> key pressed. You can also do a "copydrag" if you maintain the <strong>CONTROL</strong> key pressed. Override <strong><a href="#setOnDropAjax">setOnDropAjax()</a></strong> of TafelTree</p>

				<p>This method is called twice. One time before drop happens (drop_finished = false) and one time after the drop is done (drop_finished = true), if there were no errors before.</p>
				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr><tr><th>14</th></tr><tr><th>15</th></tr><tr><th>16</th></tr><tr><th>17</th></tr><tr><th>18</th></tr><tr><th>19</th></tr><tr><th>20</th></tr><tr><th>21</th></tr><tr><th>22</th></tr><tr><th>23</th></tr><tr><th>24</th></tr><tr><th>25</th></tr><tr><th>26</th></tr><tr><th>27</th></tr><tr><th>28</th></tr><tr><th>29</th></tr><tr><th>30</th></tr><tr><th>31</th></tr><tr><th>32</th></tr><tr><th>33</th></tr><tr><th>34</th></tr><tr><th>35</th></tr><tr><th>36</th></tr><tr><th>37</th></tr><tr><th>38</th></tr><tr><th>39</th></tr><tr><th>40</th></tr><tr><th>41</th></tr><tr><th>42</th></tr><tr><th>43</th></tr><tr><th>44</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">function</span> myDropAjax(branch_move, branch_here, response,</p></td></tr><tr><td><p style="padding-left:4ex;">drop_finished, new_branch){</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Check that the move is not done now</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">if</span> (!drop_finished) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// To see the content of response, you can <span class="string">"<span class="reserved">alert</span>"</span> it or</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// put it in a div content like that :</span></p></td></tr><tr><td><p style="padding-left:8ex;">branch_move.tree.debug(response); <span class="comment">// you can use branch_here too</span></p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// Evaluate a JSON response (note that the JSON is</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// inside brackets). For example, <span class="reserved">if</span> response equal :</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// ({</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// <span class="string">"param1"</span> : <span class="reserved">true</span>,</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// <span class="string">"param2"</span> : <span class="string">"salut biscuit"</span></span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// })</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">var</span> obj = eval(response);</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">if</span> (obj.param1) {</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">alert</span>(obj.param2);</p></td></tr><tr><td><p style="padding-left:8ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// Some tests</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">if</span> (resultsFromTest) {</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="comment">// OK, the branch will be dropped here</span></p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">return</span> <span class="reserved">true</span>;</p></td></tr><tr><td><p style="padding-left:8ex;">} <span class="reserved">else</span> {</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="comment">// Here, the branch won't be dropped and will</span></p></td></tr><tr><td><p style="padding-left:12ex;"><span class="comment">// <span class="reserved">return</span> at her place</span></p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">return</span> <span class="reserved">false</span>;</p></td></tr><tr><td><p style="padding-left:8ex;">}</p></td></tr><tr><td><p style="padding-left:4ex;">} <span class="reserved">else</span> {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// We can get the <span class="reserved">new</span> inserted branch, <span class="reserved">if</span> it's a copyDrag</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// style</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">if</span> (new_branch) {</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">alert</span>(new_branch.getId())</p></td></tr><tr><td><p style="padding-left:8ex;">}</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"tag1"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"A branch"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"ondropajax"</span> : myDropAjax,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"droplink"</span> : <span class="string">"somewhere/serverScriptPage.php"</span></p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

				<h4>Notes</h4>
				<ul>
					<li>Keep ALT pressed for an "as sibling" drop</li>
					<li>Keep CONTROL pressed to make a "copydrag"</li>
					<li>Vars sent to the script page <a href="#droplink">droplink</a> are sent in POST</li>

					<li>These vars are :
						<ul>
							<li>" drag " = JSON description of dragged branch</li>
							<li>" drop " = JSON description of dropped-on branch</li>
							<li>" drag_id " = dragged branch id</li>
							<li>" drop_id " = drop branch id</li>
							<li>" treedrag_id " = dragged branch's tree id</li>

							<li>" treedrop_id " = drop branch's tree id</li>
							<li>" sibling " = 0 if it's a drop "as child", 1 if it's an "as-sibling"</li>
						</ul>
					</li>
					<li>All other vars passed throught <a href="#droplink">droplink</a> are in POST. For example, if droplink = "page.php?spec=1", you'll get <em>spec</em> in POST.</li>

				</ul>
			</div>

			<a name="other"></a>
			<h4 onclick="shownext(this)">...my own parameter <em>(integer, float, string, object, function, boolean, array)</em></h4>
			<div class="develop">
				<p>It's possible to add any other prameters. When you manipulate a branch, you can access these properties throught the branch's property <strong>struct</strong>.</p>

				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr><tr><th>14</th></tr><tr><th>15</th></tr><tr><th>16</th></tr><tr><th>17</th></tr><tr><th>18</th></tr><tr><th>19</th></tr><tr><th>20</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">function</span> myClick (branch) {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">if</span> (branch.struct.theWhetherIsBeautiful) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">var</span> str = branch.struct.wow;</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(branch.struct.aStrangeObject.param1 + <span class="string">" | "</span> + str);</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">for</span> (<span class="reserved">var</span> i = 0; i &lt; branch.struct.frenchNames.length; i++) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(branch.struct.frenchNames[i]);</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="reserved">var</span> branch = {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"tag1"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"A branch"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"wow"</span> : <span class="string">"some text"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"theWhetherIsBeautiful"</span> : <span class="reserved">true</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"aStrangeObject"</span> : {<span class="string">"param1"</span> : <span class="string">"object in object"</span>},</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"frenchNames"</span> : [<span class="string">"Albert"</span>, <span class="string">"Gilbertin"</span>, <span class="string">"Zéphirin"</span>, <span class="string">"Anatole"</span>, <span class="string">"Gontan"</span>],</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"onclick"</span> : myClick</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

				<h4>Notes</h4>
				<ul>
					<li>These parameters ARE AVAILABLE in serialisation</li>
					<li>They ARE VISIBLE in a toString()</li>
					<li>They AREN'T INTERPRETED if you have an UL-LI structure</li>
				</ul>
			</div>


			<h1>TafelTreeBranch methods</h1>
			<h2>TafelTreeBranch public methods</h2>

			<h4 onclick="shownext(this)">hasChildren()</h4>
			<div class="develop">
			<p>Returns true if branch has children, false if not</p>

			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(branch.hasChildren());</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">isOpened()</h4>
			<div class="develop">
			<p>Returns true if the branch is opened</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(branch.isOpened());</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 class="new" onclick="shownext(this)">isVisible()</h4>
			<div class="develop">
			<p>Returns true if the branch is visible, false if not</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(branch.isVisible());</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">getId()</h4>
			<div class="develop">
			<p>Returns the ID of the branch</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(branch.getId());</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">changeId()</h4>
			<div class="develop">
			<p>Change the branch's ID. Returns true if all is ok, false if the ID already exists in the tree.</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">if</span> (branch.changeId(<span class="string">"newId"</span>)) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(<span class="string">"Change ok"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;">} <span class="reserved">else</span> {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(<span class="string">"This id ("</span> + newId + <span class="string">") already exists"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">getText()</h4>
			<div class="develop">
			<p>Returns branch's content</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(branch.getText());</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 class="new" onclick="shownext(this)">getParent()</h4>
			<div class="develop">
			<p>Returns parent branch, if it exists</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> parent = branch.getParent();</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">if</span> (parent) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(parent.getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 class="new" onclick="shownext(this)">getParents()</h4>
			<div class="develop">
			<p>Returns all parent branches. The first array's element is the closer parent. The last element is th root branch.</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> parents = branch.getParents();</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">for</span> (<span class="reserved">var</span> i = 0; i &lt; parents.length; i++) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">if</span> (i &lt; parents.length - 1) {</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">alert</span>(<span class="string">"Parent : "</span> + parents[i].getId());</p></td></tr><tr><td><p style="padding-left:8ex;">} <span class="reserved">else</span> {</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">alert</span>(<span class="string">"Root : "</span> + parents[i].getId());</p></td></tr><tr><td><p style="padding-left:8ex;">}</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 class="new" onclick="shownext(this)">getAncestor()</h4>
			<div class="develop">
			<p>Returns the root of the branch. IF you search the root's ancestor, it will returns "null"</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> root = branch.getAncestor();</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">if</span> (root) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(root.getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">getFirstBranch()</h4>
			<div class="develop">
			<p>Returns the first branch's child, null if there isn't any</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> child = branch.getFirstBranch();</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">if</span> (child) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(child.getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">getLastBranch()</h4>
			<div class="develop">
			<p>Returns the last branch's child, null if there isn't any</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> child = branch.getLastBranch();</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">if</span> (child) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(child.getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">getPreviousSibling()</h4>
			<div class="develop">
			<p>Returns the previous branch's sibling, null if there isn't any</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> sibling = branch.getPreviousSibling();</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">if</span> (sibling) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(sibling.getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">getNextSibling()</h4>
			<div class="develop">
			<p>Returns the next branch's sibling, null if there isn't any</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> sibling = branch.getNextSibling();</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">if</span> (sibling) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(sibling.getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">getPreviousBranch()</h4>
			<div class="develop">
			<p>Returns the previous branch's sibling (without taking care of depth), null if there isn't any</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> previous = branch.getPreviousBranch();</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">if</span> (previous) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(previous.getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">getNextBranch()</h4>
			<div class="develop">
			<p>Returns the next branch's sibling (without taking care of depth), null if there isn't any</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> next = branch.getNextBranch();</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">if</span> (next) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(next.getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">getPreviousOpenedBranch()</h4>
			<div class="develop">
			<p>Returns the previous branch's opened sibling (without taking care of depth), null if there isn't any</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> opened = branch.getPreviousOpenedBranch();</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">if</span> (opened) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(opened.getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">getNextOpenedBranch()</h4>
			<div class="develop">
			<p>Returns the next branch's opened sibling (without taking care of depth), null if there isn't any</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> opened = branch.getNextOpenedBranch();</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">if</span> (opened) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(opened.getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">setText()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>txt <em>(string)</em></th>

					<td>the new text of the branch</td></tr>
			</table>
			<p>Set branch's texte</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;">branch.setText(<span class="string">"Hello"</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">getChildren()</h4>
			<div class="develop">
			<p>Returns branch's children in an array</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> children = branch.getChildren();</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">for</span> (<span class="reserved">var</span> i = 0; i &lt; children.length; i++) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(children[i].getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">getLevel()</h4>
			<div class="develop">
			<p>Returns branch's depth. Root is at depth 0</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(branch.getLevel());</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">getIcon()</h4>
			<div class="develop">
			<p>Returns the icon when the branch hasn't children</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(branch.getIcon());</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">getOpenIcon()</h4>
			<div class="develop">
			<p>Returns the icon when the branch has children and is opened</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(branch.getOpenIcon());</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">getCloseIcon()</h4>
			<div class="develop">
			<p>Returns the icon when the branch has children and is closed</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(branch.getCloseIcon());</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 class="new" onclick="shownext(this)">getIconSelected()</h4>
			<div class="develop">
			<p>Returns the icon when the branch hasn't children and is selected</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(branch.getIconSelected());</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 class="new" onclick="shownext(this)">getOpenIconSelected()</h4>
			<div class="develop">
			<p>Returns the icon when the branch has children and is opened and selected</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(branch.getOpenIconSelected());</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 class="new" onclick="shownext(this)">getCloseIconSelected()</h4>
			<div class="develop">
			<p>Returns the icon when the branch has children and is closed and selected</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(branch.getCloseIconSelected());</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">getCurrentIcon()</h4>
			<div class="develop">
			<p>Returns the icon of the current state of the branch (open, close, children or not)</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(branch.getCurrentIcon());</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">setIcons()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>icon <em>(string)</em></th>

					<td>icon when the branch hasn't children</td></tr>
				<tr class="classe"><th>iconOpen <em>(string)</em></th>
					<td>icon when the branch has children and is opened</td></tr>
				<tr class="classe"><th>iconClose <em>(string)</em></th>
					<td>icon when the branch has children and is closed</td></tr>

			</table>
			<p>Set branch's icon. If <strong>iconOpen</strong> or <strong>iconClose</strong> aren't defined, they take the value of <strong>icon</strong></p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Branch will have page.g<span class="reserved">if</span> <span class="reserved">for</span> all states</span></p></td></tr><tr><td><p style="padding-left:4ex;">branch.setIcons(<span class="string">"page.gif"</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Here, each state will have a different icon</span></p></td></tr><tr><td><p style="padding-left:4ex;">branch.setIcons(<span class="string">"page.gif"</span>, <span class="string">"folderopen.gif"</span>, <span class="string">"folder.gif"</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 class="new" onclick="shownext(this)">setIconsSelected()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>iconSelected <em>(string)</em></th>

					<td>icon when the branch hasn't children and is selected</td></tr>
				<tr class="classe"><th>iconOpenSelected <em>(string)</em></th>
					<td>icon when the branch has children and is opened and selected</td></tr>
				<tr class="classe"><th>iconCloseSelected <em>(string)</em></th>
					<td>icon when the branch has children and is closed and selected</td></tr>

			</table>
			<p>Set branch's icon. If <strong>iconOpenSelected</strong> or <strong>iconCloseSelected</strong> aren't defined, they take respectively the value of <strong>iconopen</strong> and <strong>iconclose</strong> (see function <em>setIcons()</em>)</p>

			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Branch will have page.g<span class="reserved">if</span> <span class="reserved">if</span> it<span class="string">'s selected and hasn'</span>t</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// any children</span></p></td></tr><tr><td><p style="padding-left:4ex;">branch.setIconsSelected(<span class="string">"page.gif"</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Here, each state will have a different icon</span></p></td></tr><tr><td><p style="padding-left:4ex;">branch.setIconsSelected(<span class="string">"page.gif"</span>, <span class="string">"folderopen.gif"</span>, <span class="string">"folder.gif"</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">isChild()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>branch <em>(TafelTreeBranch, string)</em></th>

					<td>branch to test, or just its ID</td></tr>
			</table>
			<p>Returns true if the branch in argument is an ancestor, false if not.</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(branch.isChild(<span class="string">"otherBranch"</span>));</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">openIt()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>open <em>(boolean)</em></th>

					<td>True open the branch, false close it</td></tr>
			</table>
			<p>Permits to open or close the branch</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;">branch.openIt(<span class="reserved">true</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">insertIntoFirst()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>item <em>(object)</em></th>

					<td>a JSON object describing a TafelTreeBranch</td></tr>
			</table>
			<p>Insert the branch as a child, in the first position</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> item = {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"id"</span> : <span class="string">"branch1"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"txt"</span> : <span class="string">"child first"</span></p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> newBranch = branch.insertIntoFirst(item);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(newBranch.getId());</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">insertIntoLast()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>item <em>(object)</em></th>

					<td>a JSON object describing a TafelTreeBranch</td></tr>
			</table>
			<p>Insert the branch as a child, in the last position</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> item = {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"id"</span> : <span class="string">"branch2"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"txt"</span> : <span class="string">"child last"</span></p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> newBranch = branch.insertIntoLast(item);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(newBranch.getId());</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">insertBefore()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>item <em>(object)</em></th>

					<td>a JSON object describing a TafelTreeBranch</td></tr>
			</table>
			<p>Insert the branch as a sibling, just before</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> item = {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"id"</span> : <span class="string">"branch3"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"txt"</span> : <span class="string">"sibling first"</span></p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> newBranch = branch.insertBefore(item);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(newBranch.getId());</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">insertAfter()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>item <em>(object)</em></th>

					<td>a JSON object describing a TafelTreeBranch</td></tr>
			</table>
			<p>Insert the branch as a sibling, just after</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> item = {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"id"</span> : <span class="string">"branch4"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"txt"</span> : <span class="string">"sibling last"</span></p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> newBranch = branch.insertAfter(item);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(newBranch.getId());</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 class="new" onclick="shownext(this)">clone()</h4>
			<div class="develop">
			<p>Clone the structure of the initial branch. Doesn't create a new branch. It just returns a JSON object.</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> clonedStructure = branch.clone();</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;">clonedStructure.id = <span class="string">"newid"</span>;</p></td></tr><tr><td><p style="padding-left:4ex;">clonedStructure.txt = <span class="string">"My <span class="reserved">new</span> branch cloned"</span>;</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> newBranch = branch.insertAfter(clonedStructure);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(newBranch.getId());</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			<h4>Notes</h4>
			<ul>
				<li>Doesn't create a branch. Returns only the JSON structure</li>
			</ul>
			</div>

			<h4 onclick="shownext(this)">move()</h4>
			<div class="develop">

			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>here <em>(TafelTreeBranch, string)</em></th>
					<td>the new parent branch, or just its ID</td></tr>
			</table>
			<p>Method which move the branch as a child of "here", in the last position</p>

			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;">branch.move(<span class="string">"idNewParent"</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">moveBefore()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>here <em>(TafelTreeBranch, string)</em></th>

					<td>the new parent branch, or just its ID</td></tr>
			</table>
			<p>Method which move the branch as a sibling after "here"</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;">branch.moveBefore(<span class="string">"idNewSibling"</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">closeSiblings()</h4>
			<div class="develop">
			<p>Close all sibling branches</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;">branch.closeSiblings();</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">addClass()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>class <em>(string)</em></th>

					<td>CSS class to add</td></tr>
			</table>
			<p>Add a CSS class for the text</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;">branch.addClass(<span class="string">"myCSSclass"</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">removeClass()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>class <em>(string)</em></th>

					<td>CSS class to retrieve</td></tr>
			</table>
			<p>Retrieve a CSS class of the branch</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;">branch.removeClass(<span class="string">"myCSSclass"</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">removeChildren()</h4>
			<div class="develop">
			<p>Remove all children of the branch</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;">branch.removeChildren();</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">hasAllChildrenChecked()</h4>
			<div class="develop">
			<p>Returns 1 if all children are checked, 0 if any, and -1 if some but not all</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(branch.hasAllChildrenChecked());</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">isChecked()</h4>
			<div class="develop">
			<p>Returns 1 if the branch is checked, 0 if not, and -1 if partially checked</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(branch.isChecked());</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">check()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>check <em>(integer)</em></th>

					<td>Le status é donner é la branche</td></tr>
			</table>
			<p>Passer 1 pour la checker, 0 pour la unchecker</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;">branch.check(1);</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">select()</h4>
			<div class="develop">
			<p>Select the branch</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;">branch.select();</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">unselect()</h4>
			<div class="develop">
			<p>Unselect the branch</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branches = tree.getSelectedBranches();</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">if</span> (branches.length > 0) {</p></td></tr><tr><td><p style="padding-left:8ex;">branches[0].unselect();</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 class="new" onclick="shownext(this)">getWithinOffset()</h4>
			<div class="develop">
			<p>Returns branch's coordinates inside the tree</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> pos = branch.getWithinOffset();</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(<span class="string">"Left : "</span> + pos[0] + <span class="string">", Top : "</span> + pos[1]);</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 class="new" onclick="shownext(this)">getAbsoluteOffset()</h4>
			<div class="develop">
			<p>Returns branch's coordinates inside the navigator</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> pos = branch.getAbsoluteOffset();</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(<span class="string">"Left : "</span> + pos[0] + <span class="string">", Top : "</span> + pos[1]);</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>


			<h2>TafelTreeBranch tree-like public methods</h2>

			<h4 onclick="shownext(this)">serialize()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">

				<tr><th>debug <em>(boolean)</em></th>
					<td>true allows you to have a nice display of the serialized string. ONLY FOR DEBUG! Default value is false</td></tr>
			</table>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// True to see a nice string (usefull <span class="reserved">for</span> control)</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(branch.serialize(<span class="reserved">true</span>));</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Send the serialization to the server</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">new</span> Ajax.Request(<span class="string">"mapage.php"</span>, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"parameters"</span>: <span class="string">"tree="</span> + branch.serialize()</p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">countBranches()</h4>
			<div class="develop">
			<p>Count the number of branches inside tthis branch</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(branch.countBranches());</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">getOpenedBranches()</h4>
			<div class="develop">
			<p>Retruns an array of all children-branches that are opened</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branches = branch.getOpenedBranches();</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">for</span> (<span class="reserved">var</span> i = 0; i &lt; branches.length; i++) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(branches[i].getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">getCheckedBranches()</h4>
			<div class="develop">
			<p>Retruns an array of all children-branches that are checked</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branches = branch.getCheckedBranches();</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">for</span> (<span class="reserved">var</span> i = 0; i &lt; branches.length; i++) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(branches[i].getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">getUnCheckedBranches()</h4>
			<div class="develop">
			<p>Retruns an array of all children-branches that aren't checked</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branches = branch.getUnCheckedBranches();</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">for</span> (<span class="reserved">var</span> i = 0; i &lt; branches.length; i++) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(branches[i].getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">getPartCheckedBranches()</h4>
			<div class="develop">
			<p>Retruns an array of all children-branches that are partially checked</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branches = branch.getPartCheckedBranches();</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">for</span> (<span class="reserved">var</span> i = 0; i &lt; branches.length; i++) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(branches[i].getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">getParentBranches()</h4>
			<div class="develop">
			<p>Retruns an array of all children-branches that are themself parent of other branches</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branches = branch.getParentBranches();</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">for</span> (<span class="reserved">var</span> i = 0; i &lt; branches.length; i++) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(branches[i].getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">getLeafBranches()</h4>
			<div class="develop">
			<p>Retruns an array of all children-branches that are leaf branches (without children)</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branches = branch.getLeafBranches();</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">for</span> (<span class="reserved">var</span> i = 0; i &lt; branches.length; i++) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(branches[i].getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 class="new" onclick="shownext(this)">getBranches()</h4>
			<div class="develop">
				<h4>Arguments</h4>
				<table class="prop">
					<tr><th>filter <em>(function)</em></th>

						<td>the user function</td></tr>
				</table>
				<p>Retruns an array of all branches below this one. It's possible to put a filter.</p>
				<h4>Samples</h4>
				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr><tr><th>14</th></tr><tr><th>15</th></tr><tr><th>16</th></tr><tr><th>17</th></tr><tr><th>18</th></tr><tr><th>19</th></tr><tr><th>20</th></tr><tr><th>21</th></tr><tr><th>22</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branches = branch.getBranches();</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">for</span> (<span class="reserved">var</span> i = 0; i &lt; branches.length; i++) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(branches[i].getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// We can filter branches with an user <span class="reserved">function</span></span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">function</span> myFilter (branch) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">if</span> (branch.getText() == <span class="string">"This one"</span>) {</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">return</span> <span class="reserved">true</span>;</p></td></tr><tr><td><p style="padding-left:8ex;">} <span class="reserved">else</span> {</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">return</span> <span class="reserved">false</span>;</p></td></tr><tr><td><p style="padding-left:8ex;">}</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branches = branch.getBranches(myFilter);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">for</span> (<span class="reserved">var</span> i = 0; i &lt; branches.length; i++) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(branches[i].getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">expend()</h4>
			<div class="develop">
			<p>Expends all children-branches</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;">branch.expend();</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">collapse()</h4>
			<div class="develop">
			<p>Collapses all children-branches</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a tree was created</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;">branch.collapse();</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>


			<h1>TafelTree methods</h1>
			<h2>TafelTree static methods</h2>
			<h4 onclick="shownext(this)">loadFromUL()</h4>
			<div class="develop">
			<h4>Arguments</h4>

			<table class="prop">
				<tr>
					<th>id <em>(string)</em></th>
					<td>UL id</td>
				</tr>
				<tr class="classe">
					<th>options (optional) <em>(object)</em></th>

					<td>All functions and parameters that can be set before generate(), including generate()</td>
				</tr>
				<tr class="classe">
					<th>debug (optional) <em>(boolean)</em></th>
					<td>True display the JSON structure without creating the tree. Default value is false</td>
				</tr>
			</table>

			<p>UL generation doesn't allow to set your own parameters.</p>
			<h4>Exemple</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr><tr><th>14</th></tr><tr><th>15</th></tr><tr><th>16</th></tr><tr><th>17</th></tr><tr><th>18</th></tr><tr><th>19</th></tr><tr><th>20</th></tr><tr><th>21</th></tr><tr><th>22</th></tr><tr><th>23</th></tr><tr><th>24</th></tr><tr><th>25</th></tr><tr><th>26</th></tr><tr><th>27</th></tr><tr><th>28</th></tr><tr><th>29</th></tr><tr><th>30</th></tr><tr><th>31</th></tr><tr><th>32</th></tr><tr><th>33</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;ul id=<span class="string">"idTree"</span>></p></td></tr><tr><td><p style="padding-left:4ex;">&lt;li id=<span class="string">"b1"</span> Timg=<span class="string">"base.gif"</span>>My text&lt;/li></p></td></tr><tr><td><p style="padding-left:4ex;">&lt;li id=<span class="string">"b2"</span> Timg=<span class="string">"base.gif"</span>>Other text</p></td></tr><tr><td><p style="padding-left:8ex;">&lt;ul></p></td></tr><tr><td><p style="padding-left:12ex;">&lt;li id=<span class="string">"b3"</span> Timg=<span class="string">"page.gif"</span> >Child&lt;/li></p></td></tr><tr><td><p style="padding-left:12ex;">&lt;li id=<span class="string">"b4"</span> Timg=<span class="string">"page.gif"</span> Timgclose=<span class="string">"folder.gif"</span></p></td></tr><tr><td><p style="padding-left:16ex;">Timgopen=<span class="string">"folderopen.gif"</span>>Other child</p></td></tr><tr><td><p style="padding-left:16ex;">&lt;ul></p></td></tr><tr><td><p style="padding-left:20ex;">&lt;li id=<span class="string">"b5"</span> Timg=<span class="string">"page.gif"</span>>Child&lt;/li></p></td></tr><tr><td><p style="padding-left:20ex;">&lt;li id=<span class="string">"b6"</span> Timg=<span class="string">"page.gif"</span> Teditable=<span class="string">"1"</span>></p></td></tr><tr><td><p style="padding-left:24ex;">Other child&lt;/li></p></td></tr><tr><td><p style="padding-left:16ex;">&lt;/ul></p></td></tr><tr><td><p style="padding-left:12ex;">&lt;/li></p></td></tr><tr><td><p style="padding-left:8ex;">&lt;/ul></p></td></tr><tr><td><p style="padding-left:4ex;">&lt;/li></p></td></tr><tr><td><p style="padding-left:4ex;">&lt;li id=<span class="string">"b7"</span> Timg=<span class="string">"base.gif"</span>>Fin&lt;/li></p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/ul></p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">function</span> myFuncClick(branch) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(branch.getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = TafelTree.loadFromUL(<span class="string">"idTree"</span>, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"generate"</span> : <span class="reserved">true</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"imgBase"</span> : <span class="string">"imgs/"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"width"</span> : <span class="string">"300px"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"height"</span> : <span class="string">"250px"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onClick"</span> : myFuncClick,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"openAtLoad"</span> : <span class="reserved">true</span></p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			<h4>Notes</h4>
			<ul>
				<li>Functions to execute before generate() are set with the parameter OPTIONS</li>
				<li>All branch's attirbutes are preceded with a " T " except ID</li>
				<li>Attribute is <em>NEVER</em> between " " and its content is <em>ESCAPED (simple quote)</em> and is <em>ALWAYS</em> inside " "</li>

				<li>Attribute's content <em>MUST NOT</em> contains double quotes</li>
				<li>It's not possible to set your own parameter</li>
			</ul>
			</div>

			<h2>TafelTree getters & setters methods</h2>

			<a name="new"></a>
			<h4 onclick="shownext(this)">new TafelTree()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr>
					<th>id <em>(string)</em></th>

					<td>DIV ID</td>
				</tr>
				<tr>
					<th>struct <em>(array)</em></th>
					<td>JSON structure</td>
				</tr>
				<tr class="classe">

					<th>options (optional) <em>(object)</em></th>
					<td>All functions and parameters that can be set before generate(), including generate()</td>
				</tr>
			</table>
			<h4>Exemple</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr><tr><th>14</th></tr><tr><th>15</th></tr><tr><th>16</th></tr><tr><th>17</th></tr><tr><th>18</th></tr><tr><th>19</th></tr><tr><th>20</th></tr><tr><th>21</th></tr><tr><th>22</th></tr><tr><th>23</th></tr><tr><th>24</th></tr><tr><th>25</th></tr><tr><th>26</th></tr><tr><th>27</th></tr><tr><th>28</th></tr><tr><th>29</th></tr><tr><th>30</th></tr><tr><th>31</th></tr><tr><th>32</th></tr><tr><th>33</th></tr><tr><th>34</th></tr><tr><th>35</th></tr><tr><th>36</th></tr><tr><th>37</th></tr><tr><th>38</th></tr><tr><th>39</th></tr><tr><th>40</th></tr><tr><th>41</th></tr><tr><th>42</th></tr><tr><th>43</th></tr><tr><th>44</th></tr><tr><th>45</th></tr><tr><th>46</th></tr><tr><th>47</th></tr><tr><th>48</th></tr><tr><th>49</th></tr><tr><th>50</th></tr><tr><th>51</th></tr><tr><th>52</th></tr><tr><th>53</th></tr><tr><th>54</th></tr><tr><th>55</th></tr><tr><th>56</th></tr><tr><th>57</th></tr><tr><th>58</th></tr><tr><th>59</th></tr><tr><th>60</th></tr><tr><th>61</th></tr><tr><th>62</th></tr><tr><th>63</th></tr><tr><th>64</th></tr><tr><th>65</th></tr><tr><th>66</th></tr><tr><th>67</th></tr><tr><th>68</th></tr><tr><th>69</th></tr><tr><th>70</th></tr><tr><th>71</th></tr><tr><th>72</th></tr><tr><th>73</th></tr><tr><th>74</th></tr><tr><th>75</th></tr><tr><th>76</th></tr><tr><th>77</th></tr><tr><th>78</th></tr><tr><th>79</th></tr><tr><th>80</th></tr><tr><th>81</th></tr><tr><th>82</th></tr><tr><th>83</th></tr><tr><th>84</th></tr><tr><th>85</th></tr><tr><th>86</th></tr><tr><th>87</th></tr><tr><th>88</th></tr><tr><th>89</th></tr><tr><th>90</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;div id=<span class="string">"idTree"</span>>&lt;/div></p></td></tr><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> myStruct = [</p></td></tr><tr><td><p style="padding-left:4ex;">{</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"id"</span> : <span class="string">"root"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"txt"</span> : <span class="string">"Root node"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"img"</span> : <span class="string">"base.gif"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"style"</span> : <span class="string">"cssBoldStyle"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"items"</span> : [</p></td></tr><tr><td><p style="padding-left:8ex;">{</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="string">"id"</span> : <span class="string">"node1"</span>,</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="string">"txt"</span> : <span class="string">"Node 1"</span>,</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="string">"img"</span> : <span class="string">"folderopen.gif"</span></p></td></tr><tr><td><p style="padding-left:8ex;">},</p></td></tr><tr><td><p style="padding-left:8ex;">{</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="string">"id"</span> : <span class="string">"music"</span>,</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="string">"txt"</span> : <span class="string">"My music"</span>,</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="string">"img"</span> : <span class="string">"musicfolder.gif"</span></p></td></tr><tr><td><p style="padding-left:8ex;">}</p></td></tr><tr><td><p style="padding-left:8ex;">]</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:4ex;">];</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"generate"</span> : <span class="reserved">true</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"imgBase"</span> : <span class="string">"imgs/"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"width"</span> : <span class="string">"300px"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"height"</span> : <span class="string">"150px"</span></p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Example using options</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> treeToBind = <span class="reserved">new</span> TafelTree(<span class="string">"idTreeToBind"</span>, structBind, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"generate"</span> : <span class="reserved">true</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"imgBase"</span> : <span class="string">"imgs/"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"width"</span> : <span class="string">"300px"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"height"</span> : <span class="string">"150px"</span></p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> treeToBind2 = <span class="reserved">new</span> TafelTree(<span class="string">"idTreeToBind2"</span>, structBind2, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"generate"</span> : <span class="reserved">true</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"imgBase"</span> : <span class="string">"imgs/"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"width"</span> : <span class="string">"300px"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"height"</span> : <span class="string">"150px"</span></p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"generate"</span> : <span class="reserved">true</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"imgBase"</span> : <span class="string">"imgs/"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"width"</span> : <span class="string">"300px"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"height"</span> : <span class="string">"250px"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"defaultImg"</span> : <span class="string">"page.gif"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"defaultImgOpen"</span> : <span class="string">"folderopen.gif"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"defaultImgClose"</span> : <span class="string">"folder.gif"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"defaultImgSelected"</span> : <span class="string">"page.gif"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"defaultImgOpenSelected"</span> : <span class="string">"folderopen.gif"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"defaultImgCloseSelected"</span> : <span class="string">"folder.gif"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onLoad"</span> : myFuncLoad,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onDebug"</span> : myFuncDebug,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onCheck"</span> : myFuncCheck,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onBeforeCheck"</span> : myFuncBeforeCheck,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onClick"</span> : myFuncClick,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onDblClick"</span> : myFuncDblClick,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onBeforeOpen"</span> : myFuncBeforeOpen,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onOpen"</span> : myFunconOpen,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onMouseOver"</span> : myFuncMouseOver,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onMouseOut"</span> : myFuncMouseOut,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onMouseDown"</span> : myFuncMouseDown,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onMouseUp"</span> : myFuncMouseUp,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onDrop"</span> : myFuncDrop,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onEdit"</span> : myFuncEdit,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onEditAjax"</span> : [myFuncEditAjax, <span class="string">"server/edit.php"</span>],</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onDropAjax"</span> : [myFuncDropAjax, <span class="string">"server/drop.php"</span>]</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onOpenPopulate"</span> : [myFuncOpenPopulate, <span class="string">"server/open.php"</span>],</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"multiline"</span> : <span class="reserved">false</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"checkboxes"</span> : <span class="reserved">false</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"checkboxesThreeState"</span> : <span class="reserved">false</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"cookies"</span> : <span class="reserved">true</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"openOneAtOnce"</span> : <span class="reserved">false</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"openAtLoad"</span> : <span class="reserved">true</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"openAfterAdd"</span> : <span class="reserved">true</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"showSelectedBranch"</span> : <span class="reserved">true</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"lineStyle"</span> : <span class="string">"line"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"rtlMode"</span> : <span class="reserved">false</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"dropALT"</span> : <span class="reserved">true</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"dropCTRL"</span> : <span class="reserved">false</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"propagateRestriction"</span> : <span class="reserved">true</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"reopenFromServer"</span> : <span class="reserved">true</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"behaviourDrop"</span> : <span class="string">"child"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"bind"</span> : [treeToBind],</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"bindAsUnidirectional"</span> : [treeToBind2]</p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">enableMultiline()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr>
					<th>enable <em>(boolean)</em></th>

					<td>true for activating multi-line behaviour (default value, false)</td>
				</tr>
			</table>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct);</p></td></tr><tr><td><p style="padding-left:4ex;">tree.enableMultiline(<span class="reserved">true</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Options</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"multiline"</span> : <span class="reserved">true</span></p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 class="new" onclick="shownext(this)">reopenFromServerAfterLoad()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr>
					<th>enable <em>(boolean)</em></th>

					<td>false to empécher branches to be reopened from cookie, if their children are from the server. Default value is true</td>
				</tr>
			</table>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct);</p></td></tr><tr><td><p style="padding-left:4ex;">tree.reopenFromServerAfterLoad(<span class="reserved">true</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Options</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"reopenFromServer"</span> : <span class="reserved">true</span></p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">enableCheckboxes()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr>
					<th>enable <em>(boolean)</em></th>

					<td>True activate the "checkbox 2 states" behaviour (default value, false)</td>
				</tr>
			</table>
			<p>"Checkbox 2 states" means that you can check or uncheck a branch, but you'll never have partially checked branches.</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct);</p></td></tr><tr><td><p style="padding-left:4ex;">tree.enableCheckboxes(<span class="reserved">true</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Options</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"checkboxes"</span> : <span class="reserved">true</span></p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			<h4>Notes</h4>
			<ul>
				<li>Checkboxes 2 states can be either " checked " or " unchecked "</li>
				<li>For managing 3 states, see enableCheckboxesThreeState() function</li>
			</ul>
			</div>

			<h4 onclick="shownext(this)">enableCheckboxesThreeState()</h4>

			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr>
					<th>enable <em>(boolean)</em></th>
					<td>True activate the "checkbox 3 states" behaviour (default value, false)</td>
				</tr>

			</table>
			<p>"Checkbox 2 states" means that it's an "clever check". When you check or uncheck a branch, il will automatically check or uncheck all children. If some children aren't checked and some other are, the parent will be partially checked.<p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct);</p></td></tr><tr><td><p style="padding-left:4ex;">tree.enableCheckboxesThreeState(<span class="reserved">true</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Options</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"checkboxesThreeState"</span> : <span class="reserved">true</span></p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			<h4>Notes</h4>
			<ul>
				<li>There's no need to call enableCheckboxes() function.</li>
			</ul>
			</div>

			<h4 onclick="shownext(this)">enableCookies()</h4>
			<div class="develop">

			<h4>Arguments</h4>
			<table class="prop">
				<tr>
					<th>enable <em>(boolean)</em></th>
					<td>True activates cookies management (default value, true)</td>
				</tr>
				<tr class="classe">

					<th>separator (optional) <em>(string)</em></th>
					<td>Separator used in cookies (default value, " | ")</td>
				</tr>
			</table>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct);</p></td></tr><tr><td><p style="padding-left:4ex;">tree.enableCookies(<span class="reserved">true</span>, <span class="string">"#___#"</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Options. It's not possible to set the separator from here</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"cookies"</span> : <span class="reserved">true</span></p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			<h4>Notes</h4>
			<ul>
				<li>Cookies remember which branches are opened after a reload</li>
				<li>Modify the separator can be useful if a " | " is part of branches ID</li>
			</ul>
			</div>

			<h4 onclick="shownext(this)">openOneAtOnce()</h4>

			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr>
					<th>enable <em>(boolean)</em></th>
					<td>True enable the fact that you can only open one branch at one (default value, false)</td>
				</tr>

			</table>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct);</p></td></tr><tr><td><p style="padding-left:4ex;">tree.openOneAtOnce(<span class="reserved">true</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Options</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"openOneAtOnce"</span> : <span class="reserved">true</span></p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">openAtLoad()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr>
					<th>open <em>(boolean)</em></th>

					<td>True open all tree at load (default value, false)</td>
				</tr>
			</table>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct);</p></td></tr><tr><td><p style="padding-left:4ex;">tree.openAtLoad(<span class="reserved">true</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Options</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"openAtLoad"</span> : <span class="reserved">true</span></p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			<h4>Notes</h4>
			<ul>
				<li>When cookies are activated, it's the cookie state which is interpreted</li>
			</ul>
			</div>

			<h4 onclick="shownext(this)">openAfterAdd()</h4>
			<div class="develop">

			<h4>Arguments</h4>
			<table class="prop">
				<tr>
					<th>open <em>(boolean)</em></th>
					<td>True open the branch after an insert or a drop, false keep it closed</td>
				</tr>
			</table>

			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct);</p></td></tr><tr><td><p style="padding-left:4ex;">tree.openAfterAdd(<span class="reserved">false</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Options</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"openAfterAdd"</span> : <span class="reserved">false</span></p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">showSelectedBranch()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr>
					<th>show <em>(boolean)</em></th>

					<td>True highlight the selected branch (default value, true)</td>
				</tr>
			</table>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct);</p></td></tr><tr><td><p style="padding-left:4ex;">tree.showSelectedBranch(<span class="reserved">false</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Options</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"showSelectedBranch"</span> : <span class="reserved">false</span></p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">setLineStyle()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr>
					<th>style <em>(string)</em></th>

					<td>Set the line style of the tree (default value, " line ")</td>
				</tr>
			</table>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct);</p></td></tr><tr><td><p style="padding-left:4ex;">tree.setLineStyle(<span class="string">"none"</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Options</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"lineStyle"</span> : <span class="string">"none"</span></p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			<h4>Notes</h4>
			<ul>
				<li>Les valeurs possibles sont " line ", " full " ou " none ".</li>
			</ul>
			</div>

			<h4 onclick="shownext(this)">setIcons()</h4>
			<div class="develop">

			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>icon <em>(string)</em></th>
					<td>The icon if the branch hasn't children</td></tr>
				<tr class="classe"><th>iconOpen <em>(string)</em></th>
					<td>The icon if the branch has children and is opened</td></tr>

				<tr class="classe"><th>iconClose <em>(string)</em></th>
					<td>The icon if the branch has children and is closed</td></tr>
			</table>
			<p>Set default icons for all banches. If <strong>iconOpen</strong> or <strong>iconClose</strong> aren't defined, they take the value of <strong>icon</strong></p>

			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct);</p></td></tr><tr><td><p style="padding-left:4ex;">tree.setIcons(<span class="string">"page.gif"</span>, <span class="string">"folderopen.gif"</span>, <span class="string">"folder.gif"</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Options</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"defaultImg"</span> : <span class="string">"page.gif"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"defaultImgOpen"</span> : <span class="string">"folderopen.gif"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"defaultImgClose"</span> : <span class="string">"folder.gif"</span></p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 class="new" onclick="shownext(this)">setIconsSelected()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>iconSelected <em>(string)</em></th>

					<td>icon when the branch hasn't children and is selected</td></tr>
				<tr class="classe"><th>iconOpenSelected <em>(string)</em></th>
					<td>icon when the branch has children and is opened and selected</td></tr>
				<tr class="classe"><th>iconCloseSelected <em>(string)</em></th>
					<td>icon when the branch has children and is closed and selected</td></tr>

			</table>
			<p>Set branch's icon. If <strong>iconOpenSelected</strong> or <strong>iconCloseSelected</strong> aren't defined, they take respectively the value of <strong>iconopen</strong> and <strong>iconclose</strong> (see function <em>setIcons()</em>)</p>

			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct);</p></td></tr><tr><td><p style="padding-left:4ex;">tree.setIconsSelected(<span class="string">"page.gif"</span>, <span class="string">"folderopen.gif"</span>, <span class="string">"folder.gif"</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Options</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"defaultImgSelected"</span> : <span class="string">"page.gif"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"defaultImgOpenSelected"</span> : <span class="string">"folderopen.gif"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"defaultImgCloseSelected"</span> : <span class="string">"folder.gif"</span></p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<a name="#behaviourDrop"></a>
			<h4 class="new" onclick="shownext(this)">setBehaviourDrop()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>dropStyle <em>(string)</em></th>

					<td>'sibling', 'siblingcopy', child' or 'childcopy', default value is 'child'</td></tr>
			</table>
			<p>Set default drop behaviour. Set <strong>sibling</strong> and dropping a branch will make a new sibling or, by keeping ALT pressed, a new child. And vice-versa if it's set to <strong>child</strong>.</p>
			<p>If you set  <strong>siblingcopy</strong>, the drop will result in a new sibling which is a copy of the branch dropped. If you maintain ALT + CTRL pressed, it will move the branch as child, without copy. Well, the best thing to do is to test the four keywords, and see what happends...</p>

			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct);</p></td></tr><tr><td><p style="padding-left:4ex;">tree.setBehaviourDrop(<span class="string">"sibling"</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Options</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"behaviourDrop"</span> : <span class="string">"sibling"</span></p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 class="new" onclick="shownext(this)">disableDropCTRL()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>ctrlDrop <em>(boolean)</em></th>

					<td>False disable the functionality CTRL drop, default value true</td></tr>
			</table>
			<p>If you give "false", it will disable the CTRL key. So it you'll not be able to make a copyDrag. A copyDrag makes a copy of the branch moved. An insertDrag just move the branch without creating any other.</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct);</p></td></tr><tr><td><p style="padding-left:4ex;">tree.disableDropCTRL(<span class="reserved">false</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Options</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"dropCTRL"</span> : <span class="reserved">false</span></p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 class="new" onclick="shownext(this)">disableDropALT()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>altDrop <em>(string)</em></th>

					<td>False disable the functionality ALT drop, default value true</td></tr>
			</table>
			<p>False disable the functionality of having 2 different drop styles. Either "as sibling" or "as child". If you give "false" to this function, you
			will have only the possibility of drop defined by the function <a href="#">setBehaviourDrop()</a></p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct);</p></td></tr><tr><td><p style="padding-left:4ex;">tree.disableDropALT(<span class="reserved">false</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Options</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"dropALT"</span> : <span class="reserved">false</span></p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">propagateRestriction()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr>
					<th>propagate <em>(boolean)</em></th>

					<td>True propagate the interdiction to move after a ajax drag&drop (default value, true)</td>
				</tr>
			</table>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct);</p></td></tr><tr><td><p style="padding-left:4ex;">tree.setOnDropAjax(myFunc, <span class="string">"mypage.php"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;">tree.propagateRestriction(<span class="reserved">false</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Options</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onDropAjax"</span> : [myFunc, <span class="string">"mypage.php"</span>],</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"propagateRestriction"</span> : <span class="reserved">false</span></p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			<h4>Notes</h4>
			<ul>
				<li>Propagation means that children of the branch moved are blocked and can't be moved. (used to skip data problems).</li>
			</ul>
			</div>

			<h4 class="new" onclick="shownext(this)">enableRTL()</h4>
			<div class="develop">

			<h4>Arguments</h4>
			<table class="prop">
				<tr>
					<th>rtl <em>(boolean)</em></th>
					<td>True display the tree from right to left (default value, false)</td>
				</tr>
			</table>

			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct);</p></td></tr><tr><td><p style="padding-left:4ex;">tree.enableRTL(<span class="reserved">true</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Options</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"rtlMode"</span> : <span class="reserved">true</span></p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>


			<h2>TafelTree public methods</h2>
			<h4 onclick="shownext(this)">generate()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">

				<tr>
					<th>partLoad <em>(boolean)</em></th>
					<td>True generate the tree step-by-step (experimental), default value is false</td>
				</tr>
			</table>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct);</p></td></tr><tr><td><p style="padding-left:4ex;">tree.generate();</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">serialize()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>debug <em>(boolean)</em></th>

					<td>true allows you to have a nice display of the serialized string. ONLY FOR DEBUG! Default value is false</td></tr>
			</table>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr><tr><th>14</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree(<span class="string">"idTree"</span>, myStruct);</p></td></tr><tr><td><p style="padding-left:4ex;">tree.generate();</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// True to see a nice string (usefull <span class="reserved">for</span> control)</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(tree.serialize(<span class="reserved">true</span>));</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Send the serialization to the server</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">new</span> Ajax.Request(<span class="string">"mapage.php"</span>, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"parameters"</span> : <span class="string">"tree="</span> + tree.serialize()</p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">getSelectedBranches()</h4>
			<div class="develop">
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> selected = tree.getSelectedBranches();</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">if</span> (selected.length > 0) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">for</span> (<span class="reserved">var</span> i = 0; i &lt; selected.length; i++) {</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">alert</span>(selected[i].getId());</p></td></tr><tr><td><p style="padding-left:8ex;">}</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">getBranchById()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>id <em>(string)</em></th>

					<td>branch ID</td></tr>
			</table>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch = tree.getBranchById(<span class="string">"idBranch"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(branch.getId();</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">bind()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>tree <em>(TafelTree)</em></th>

					<td>the tree to bind</td></tr>
				<tr class="classe"><th>tree <em>(TafelTree)</em></th>
					<td>an other tree</td></tr>
				<tr class="classe"><th>... <em>(TafelTree)</em></th>
					<td>all the trees we want</td></tr>

			</table>
			<p>This binding is bi-directional. That means that you can drop from tree1 to tree2 and from tree2 to tree1.</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// In this case, it will be possible to drag&drop between</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// tree_1 and tree_2 and inversement</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree_2 = <span class="reserved">new</span> TafelTree(<span class="string">"idTree_2"</span>, myOtherStruct);</p></td></tr><tr><td><p style="padding-left:4ex;">tree.bind(tree_2);</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			<h4>Notes</h4>
			<ul>
				<li>This binding is bi-directional</li>
			</ul>
			</div>

			<h4 onclick="shownext(this)">bindAsUnidirecitonal()</h4>
			<div class="develop">

			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>tree <em>(TafelTree)</em></th>
					<td>the tree to bind</td></tr>
				<tr class="classe"><th>tree <em>(TafelTree)</em></th>
					<td>an other tree</td></tr>

				<tr class="classe"><th>... <em>(TafelTree)</em></th>
					<td>all the trees we want</td></tr>
			</table>

			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// In this case, it will only be possible to drag&drop</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// from tree to tree_2</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree_2 = <span class="reserved">new</span> TafelTree(<span class="string">"idTree_2"</span>, myOtherStruct);</p></td></tr><tr><td><p style="padding-left:4ex;">tree.bindAsUnidirecitonal(tree_2);</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			<h4>Notes</h4>
			<ul>
				<li>This binding is uni-directional</li>
			</ul>
			</div>

			<h4 onclick="shownext(this)">isBindedWith()</h4>
			<div class="develop">

			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>tree <em>(TafelTree)</em></th>
					<td>the tree to test if it's binded with</td></tr>
			</table>
			<h4>Samples</h4>

			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree_2 = <span class="reserved">new</span> TafelTree(<span class="string">"idTree_2"</span>, myOtherStruct);</p></td></tr><tr><td><p style="padding-left:4ex;">tree.bindAsUnidirectional(tree_2);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(tree.isBindedWith(tree_2)); <span class="comment">// returns <span class="reserved">true</span></span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(tree_2.isBindedWith(tree)); <span class="comment">// returns <span class="reserved">false</span></span></p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">unselect()</h4>
			<div class="develop">
			<p>Unselect branches, if one or more were selected</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;">tree.unselect();</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">countBranches()</h4>
			<div class="develop">
			<p>Count the number of branches</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(tree.countBranches());</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">getOpenedBranches()</h4>
			<div class="develop">
			<p>Retruns an array of all branches that are opened</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branches = tree.getOpenedBranches();</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">for</span> (<span class="reserved">var</span> i = 0; i &lt; branches.length; i++) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(branches[i].getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">getCheckedBranches()</h4>
			<div class="develop">
			<p>Retruns an array of all branches that are checked</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branches = tree.getCheckedBranches();</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">for</span> (<span class="reserved">var</span> i = 0; i &lt; branches.length; i++) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(branches[i].getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">getUnCheckedBranches()</h4>
			<div class="develop">
			<p>Retruns an array of all branches that aren't checked</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branches = tree.getUnCheckedBranches();</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">for</span> (<span class="reserved">var</span> i = 0; i &lt; branches.length; i++) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(branches[i].getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">getPartCheckedBranches()</h4>
			<div class="develop">
			<p>Retruns an array of all branches that are partially checked</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branches = tree.getPartCheckedBranches();</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">for</span> (<span class="reserved">var</span> i = 0; i &lt; branches.length; i++) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(branches[i].getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">getParentBranches()</h4>
			<div class="develop">
			<p>Retruns an array of all branches that are themself parent of other branches</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branches = tree.getParentBranches();</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">for</span> (<span class="reserved">var</span> i = 0; i &lt; branches.length; i++) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(branches[i].getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">getLeafBranches()</h4>
			<div class="develop">
			<p>Retruns an array of all branches that are leaf branches (without children)</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branches = tree.getLeafBranches();</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">for</span> (<span class="reserved">var</span> i = 0; i &lt; branches.length; i++) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(branches[i].getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 class="new" onclick="shownext(this)">getBranches()</h4>
			<div class="develop">
				<h4>Arguments</h4>
				<table class="prop">
					<tr><th>filter <em>(function)</em></th>

						<td>the user function</td></tr>
				</table>
				<p>Retruns an array of all branches. It's possible to put a filter.</p>
				<h4>Samples</h4>
				<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr><tr><th>14</th></tr><tr><th>15</th></tr><tr><th>16</th></tr><tr><th>17</th></tr><tr><th>18</th></tr><tr><th>19</th></tr><tr><th>20</th></tr><tr><th>21</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branches = tree.getBranches();</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">for</span> (<span class="reserved">var</span> i = 0; i &lt; branches.length; i++) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(branches[i].getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// We can filter branches with an user <span class="reserved">function</span></span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">function</span> myFilter (branch) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">if</span> (branch.getText() == <span class="string">"Celle-ci"</span>) {</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">return</span> <span class="reserved">true</span>;</p></td></tr><tr><td><p style="padding-left:8ex;">} <span class="reserved">else</span> {</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">return</span> <span class="reserved">false</span>;</p></td></tr><tr><td><p style="padding-left:8ex;">}</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branches = tree.getBranches(myFilter);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">for</span> (<span class="reserved">var</span> i = 0; i &lt; branches.length; i++) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(branches[i].getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">expend()</h4>
			<div class="develop">
			<p>Expends all branches</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;">tree.expend();</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">collapse()</h4>
			<div class="develop">
			<p>Collapses all branches</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;">tree.collapse();</p></td></tr><tr><td><p style="padding-left:4ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">insertBranch()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>position <em>(TafelTreeBranch, string)</em></th>

					<td>the source branch (or just the ID)</td></tr>
				<tr><th>item <em>(object)</em></th>
					<td>new branch (format JSON <a href="#tag"><em>TafelTreeBranch properties</em></a>)</td></tr>
				<tr class="classe"><th>sibling <em>(boolean)</em></th>
					<td>true means we want to insert it as sibling, default value false (=child)</td></tr>

				<tr class="classe"><th>first <em>(boolean)</em></th>
					<td>true means we want to insert it as first child or sibling before, default value false</td></tr>
			</table>
			<p>Allows you to insert a branch as sibling or as child, before, after, in the first or last place.</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr><tr><th>14</th></tr><tr><th>15</th></tr><tr><th>16</th></tr><tr><th>17</th></tr><tr><th>18</th></tr><tr><th>19</th></tr><tr><th>20</th></tr><tr><th>21</th></tr><tr><th>22</th></tr><tr><th>23</th></tr><tr><th>24</th></tr><tr><th>25</th></tr><tr><th>26</th></tr><tr><th>27</th></tr><tr><th>28</th></tr><tr><th>29</th></tr><tr><th>30</th></tr><tr><th>31</th></tr><tr><th>32</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> item = {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"id"</span>:<span class="string">"new1"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"img"</span>:<span class="string">"page.gif"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"txt"</span>:<span class="string">"child before"</span></p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> item2 = {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"id"</span>:<span class="string">"new2"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"img"</span>:<span class="string">"page.gif"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"txt"</span>:<span class="string">"child after"</span></p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> item3 = {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"id"</span>:<span class="string">"new3"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"img"</span>:<span class="string">"page.gif"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"txt"</span>:<span class="string">"sibling before"</span></p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> item4 = {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"id"</span>:<span class="string">"new4"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"img"</span>:<span class="string">"page.gif"</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"txt"</span>:<span class="string">"sibling after"</span></p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Child branch - in first</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch1 = tree.insertBranch(<span class="string">"id_branch"</span>, item, <span class="reserved">false</span>, <span class="reserved">true</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Child branch - in last</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch2 = tree.insertBranch(<span class="string">"id_branch"</span>, item2, <span class="reserved">false</span>, <span class="reserved">false</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Sibling branch - before</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch3 = tree.insertBranch(<span class="string">"id_branch"</span>, item3, <span class="reserved">true</span>, <span class="reserved">true</span>);</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Sibling branch - after</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> branch4 = tree.insertBranch(<span class="string">"id_branch"</span>, item4, <span class="reserved">true</span>, <span class="reserved">false</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">removeBranch()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>branch <em>(TafelTreeBranch, string)</em></th>

					<td>the branch to remove (or just the ID)</td></tr>
			</table>
			<p>Remove the branch and all its children</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;">tree.removeBranch(<span class="string">"id_branch_to_delete"</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">debug()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>str <em>(string)</em></th>

					<td>The string to display</td></tr>
			</table>
			<p>Display a string into the Debug Zone</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Let's say a structure was defined</span></p></td></tr><tr><td><p style="padding-left:4ex;">tree.debug(<span class="string">"text to debug : "</span> + tree.id);</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h2>TafelTree event methods</h2>
			<h4 onclick="shownext(this)">setOnDebug()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>func <em>(function)</em></th>

					<td>The user function to call</td></tr>
			</table>
			<p>Called after the function tree.debug()</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr><tr><th>14</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// User <span class="reserved">function</span></span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">function</span> myDebug (tree, HTMLDebugObj, str) {</p></td></tr><tr><td><p style="padding-left:8ex;">HTMLDebugObj.innerHTML = <span class="string">"My func : "</span> + str;</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree (<span class="string">"idtree"</span>, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"generate"</span> : <span class="reserved">true</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onDebug"</span> : myDebug</p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;">tree.debug(<span class="string">"text to debug"</span>);</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			<h4>Notes</h4>
			<ul>
				<li>By default, tree.debug() display only the text into the HTMLDebugObj</li>
			</ul>
			</div>

			<h4 onclick="shownext(this)">setOnLoad()</h4>
			<div class="develop">

			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>func <em>(function)</em></th>
					<td>The user function to call</td></tr>
			</table>
			<p>Called when the tree finished to load</p>

			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// User <span class="reserved">function</span></span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">function</span> myLoad () {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(<span class="string">"load finished"</span>);</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree (<span class="string">"idtree"</span>, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"generate"</span> : <span class="reserved">true</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onLoad"</span> : myLoad</p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">setOnOpen()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>func <em>(function)</em></th>

					<td>The user function to call</td></tr>
			</table>
			<p>Called after a branch is opened (<em>status = true</em>) or closed (<em>status = false</em>)</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// User <span class="reserved">function</span></span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">function</span> myOpen (branch, status) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">var</span> str = (status) ? <span class="string">"opened"</span> : <span class="string">"closed"</span>;</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(branch.getId() + <span class="string">" has been "</span> + str);</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree (<span class="string">"idtree"</span>, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"generate"</span> : <span class="reserved">true</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onOpen"</span> : myOpen</p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">setOnBeforeOpen()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>func <em>(function)</em></th>

					<td>The user function to call</td></tr>
			</table>
			<p>Called before a branch is open (<em>status = true</em>) or closed (<em>status = false</em>). If it returns <strong>false</strong>, the branch will keep its actual state.</p>
			<h4>Samples</h4>

			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr><tr><th>14</th></tr><tr><th>15</th></tr><tr><th>16</th></tr><tr><th>17</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// User <span class="reserved">function</span></span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">function</span> myBeforeOpen (branch, status) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">var</span> strNow = (status) ? <span class="string">"opened"</span> : <span class="string">"closed"</span>;</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">var</span> strNext = (status) ? <span class="string">"closed"</span> : <span class="string">"opened"</span>;</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(branch.getId() + <span class="string">" is "</span> + strNow +</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="string">" and will be "</span> + strNext +</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="string">" <span class="reserved">if</span> this <span class="reserved">function</span> returns <span class="reserved">true</span>"</span>);</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">return</span> <span class="reserved">true</span>;</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree (<span class="string">"idtree"</span>, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"generate"</span> : <span class="reserved">true</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onBeforeOpen"</span> : myBeforeOpen</p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">setOnMouseOver()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>func <em>(function)</em></th>

					<td>The user function to call</td></tr>
			</table>
			<p>Called when the mouse pass trought the branch</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// User <span class="reserved">function</span></span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">function</span> myMouseOver (branch) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(<span class="string">"over : "</span> + branch.getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree (<span class="string">"idtree"</span>, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"generate"</span> : <span class="reserved">true</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onMouseOver"</span> : myMouseOver</p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">setOnMouseOut()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>func <em>(function)</em></th>

					<td>The user function to call</td></tr>
			</table>
			<p>Called when the mouse quit the branch</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// User <span class="reserved">function</span></span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">function</span> myMouseOut (branch) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(<span class="string">"out : "</span> + branch.getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree (<span class="string">"idtree"</span>, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"generate"</span> : <span class="reserved">true</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onMouseOut"</span> : myMouseOut</p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 class="new" onclick="shownext(this)">setOnMouseDown()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>func <em>(function)</em></th>

					<td>The user function to call</td></tr>
			</table>
			<p>Called when the mouse "down" on the branch</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// User <span class="reserved">function</span></span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">function</span> myMouseDown (branch) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(<span class="string">"down : "</span> + branch.getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree (<span class="string">"idtree"</span>, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"generate"</span> : <span class="reserved">true</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onMouseDown"</span> : myMouseDown</p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 class="new" onclick="shownext(this)">setOnMouseUp()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>func <em>(function)</em></th>

					<td>The user function to call</td></tr>
			</table>
			<p>Called when the mouse "up" on the branch</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// User <span class="reserved">function</span></span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">function</span> myMouseUp (branch) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(<span class="string">"up : "</span> + branch.getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree (<span class="string">"idtree"</span>, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"generate"</span> : <span class="reserved">true</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onMouseUp"</span> : myMouseUp</p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">setOnClick()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>func <em>(function)</em></th>

					<td>The user function to call</td></tr>
			</table>
			<p>Called after a click on the branch</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// User <span class="reserved">function</span></span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">function</span> myClick (branch) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(branch.getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree (<span class="string">"idtree"</span>, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"generate"</span> : <span class="reserved">true</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onClick"</span> : myClick</p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			<h4>Notes</h4>
			<ul>
				<li>A clicked-branch will be automatically selected</li>
			</ul>
			</div>

			<h4 onclick="shownext(this)">setOnDblClick()</h4>
			<div class="develop">

			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>func <em>(function)</em></th>
					<td>The user function to call</td></tr>
			</table>
			<p>Called after a double-click on a branch</p>

			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// User <span class="reserved">function</span></span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">function</span> myDblClick (branch) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(branch.getId());</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree (<span class="string">"idtree"</span>, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"generate"</span> : <span class="reserved">true</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onDblClick"</span> : myDblClick</p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			<h4>Notes</h4>
			<ul>
				<li>If edition is defined, the double-clic will start the branch's edition</li>
			</ul>
			</div>

			<h4 onclick="shownext(this)">setOnEdit()</h4>
			<div class="develop">

			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>func <em>(function)</em></th>
					<td>The user function to call</td></tr>
			</table>
			<p>Activate branches edition. Called after the edition of the branch (precisely, after the blur() of the input). The new content will be the one returned by the user function.</p>

			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// User <span class="reserved">function</span></span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">function</span> myEdit (branch, newValue, oldValue) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">var</span> str = branch.getId() + <span class="string">" : "</span> + newValue;</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">return</span> str;</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree (<span class="string">"idtree"</span>, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"generate"</span> : <span class="reserved">true</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onEdit"</span> : myEdit</p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			<h4>Notes</h4>
			<ul>
				<li>If you have a doube-click fuction <em>(tree.setOnDblClick())</em>, the edition is no more available. It's one or the other, but not edition and double-click together</li>
			</ul>
			</div>

			<h4 onclick="shownext(this)">setOnBeforeCheck()</h4>

			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>func <em>(function)</em></th>
					<td>The user function to call</td></tr>
			</table>
			<p>Called when you check or uncheck a branch, BEFORE changes are made. If you don't want its state to change, just return <strong>false</strong></p>

			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr><tr><th>14</th></tr><tr><th>15</th></tr><tr><th>16</th></tr><tr><th>17</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// User <span class="reserved">function</span></span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">function</span> myBeforeCheck (branch, status) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">var</span> strNow = (status) ? <span class="string">"checked"</span> : <span class="string">"unchecked"</span>;</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">var</span> strNext = (status) ? <span class="string">"unchecked"</span> : <span class="string">"checked"</span>;</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(branch.getId() + <span class="string">" is "</span> + strNow +</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="string">" and will be "</span> + strNext +</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="string">" <span class="reserved">if</span> this <span class="reserved">function</span> returns <span class="reserved">true</span>"</span>);</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">return</span> <span class="reserved">true</span>;</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree (<span class="string">"idtree"</span>, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"generate"</span> : <span class="reserved">true</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onBeforeCheck"</span> : myBeforeCheck</p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 onclick="shownext(this)">setOnCheck()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>func <em>(function)</em></th>

					<td>The user function to call</td></tr>
			</table>
			<p>Called after the check (or uncheck) is done</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// User <span class="reserved">function</span></span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">function</span> myCheck (branch, status) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">var</span> str = (status) ? <span class="string">"checked"</span> : <span class="string">"unchecked"</span>;</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(branch.getId() + <span class="string">" is now "</span> + str);</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree (<span class="string">"idtree"</span>, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"generate"</span> : <span class="reserved">true</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onCheck"</span> : myCheck</p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 class="new" onclick="shownext(this)">setOnDrop()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>func <em>(function)</em></th>

					<td>The user function to call</td></tr>
			</table>
			<p>Called after the drop of the branch. <strong>It must return a boolean</strong>. You can make a "drop as sibling" if you keep the <strong>ALT</strong> key pressed. You can also do a "copydrag" if you maintain the <strong>CONTROL</strong> key pressed.</p>
			<p>This method is called twice. One time before drop happens (drop_finished = false) and one time after the drop is done (drop_finished = true), if there were no errors before.</p>

			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr><tr><th>14</th></tr><tr><th>15</th></tr><tr><th>16</th></tr><tr><th>17</th></tr><tr><th>18</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// User <span class="reserved">function</span></span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">function</span> myDrop (branchMoved, newParent, dropFinished) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">if</span> (!dropFinished) {</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">alert</span>(branchMoved.getId()+ <span class="string">" will be child of "</span></p></td></tr><tr><td><p style="padding-left:16ex;">+ newParent.getId());</p></td></tr><tr><td><p style="padding-left:8ex;">} <span class="reserved">else</span> {</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">alert</span>(branchMoved.getId()+ <span class="string">" is now child of "</span></p></td></tr><tr><td><p style="padding-left:16ex;">+ newParent.getId());</p></td></tr><tr><td><p style="padding-left:8ex;">}</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree (<span class="string">"idtree"</span>, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"generate"</span> : <span class="reserved">true</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onDrop"</span> : myDrop</p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			<h4>Notes</h4>
			<ul>
				<li>Keep ALT pressed for an "as sibling" drop</li>
				<li>Keep CONTROL pressed to make a "copydrag"</li>
			</ul>
			</div>

			<h4 class="new" onclick="shownext(this)">setOnDropAjax()</h4>

			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>func <em>(function)</em></th>
					<td>The user function to call</td></tr>
				<tr><th>link <em>(string)</em></th>

					<td>Link to the server page</td></tr>
			</table>
			<p>Called after a drag&drop. When the branch is dropped, it launch an Ajax request at the page  <strong>droplink</strong> and send the Ajax response to the user function. <strong>The medthod must return a boolean</strong>. You can make a "drop as sibling" if you keep the <strong>ALT</strong> key pressed. You can also do a "copydrag" if you maintain the <strong>CONTROL</strong> key pressed.</p>

			<p>This method is called twice. One time before drop happens (drop_finished = false) and one time after the drop is done (drop_finished = true), if there were no errors before.</p>
			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr><tr><th>14</th></tr><tr><th>15</th></tr><tr><th>16</th></tr><tr><th>17</th></tr><tr><th>18</th></tr><tr><th>19</th></tr><tr><th>20</th></tr><tr><th>21</th></tr><tr><th>22</th></tr><tr><th>23</th></tr><tr><th>24</th></tr><tr><th>25</th></tr><tr><th>26</th></tr><tr><th>27</th></tr><tr><th>28</th></tr><tr><th>29</th></tr><tr><th>30</th></tr><tr><th>31</th></tr><tr><th>32</th></tr><tr><th>33</th></tr><tr><th>34</th></tr><tr><th>35</th></tr><tr><th>36</th></tr><tr><th>37</th></tr><tr><th>38</th></tr><tr><th>39</th></tr><tr><th>40</th></tr><tr><th>41</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// User <span class="reserved">function</span></span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">function</span> myDrop(branchMoved,newParent,response,dropFinished){</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// Beware, the <span class="reserved">function</span> is called twice. Here, we</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// check before drop happends</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">if</span> (!dropFinished) {</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="comment">// The response is the responseText of XMLHttpRequest</span></p></td></tr><tr><td><p style="padding-left:12ex;"><span class="comment">// object</span></p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">alert</span>(response);</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="comment">// The text can be a JSON string, so you should</span></p></td></tr><tr><td><p style="padding-left:12ex;"><span class="comment">// evaluate it like that :</span></p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">var</span> obj = eval(<span class="string">""</span> + response + <span class="string">""</span>);</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="comment">// You have to put brackets <span class="reserved">if</span> you didn't put</span></p></td></tr><tr><td><p style="padding-left:12ex;"><span class="comment">// them in the server side</span></p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">alert</span>(obj.myProperty);</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">alert</span>(branchMoved.getId()+ <span class="string">" will be child of "</span> +</p></td></tr><tr><td><p style="padding-left:16ex;">newParent.getId() +</p></td></tr><tr><td><p style="padding-left:16ex;"><span class="string">" <span class="reserved">if</span> this <span class="reserved">function</span> returns <span class="reserved">true</span>"</span>);</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">return</span> <span class="reserved">true</span>;</p></td></tr><tr><td><p style="padding-left:8ex;">}</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree (<span class="string">"idtree"</span>, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"generate"</span> : <span class="reserved">true</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onDropAjax"</span> : [myDrop, <span class="string">"pageScript.php"</span>]</p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// PHP file sample</span></p></td></tr><tr><td><p style="padding-left:0ex;"><span class="php">&lt;?php</span></p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// Do some stuff</span></p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// ...</span></p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// And display a JSON string. Note that <span class="reserved">if</span> you <span class="reserved">return</span> an object</span></p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// you need to display it inside brackets</span></p></td></tr><tr><td><p style="padding-left:0ex;"><span class="php">?&gt;</span></p></td></tr><tr><td><p style="padding-left:0ex;">({</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="string">"myProperty"</span> : <span class="string">"myValue"</span>,</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="string">"other"</span> : [<span class="string">"this"</span>, <span class="string">"is"</span>, <span class="string">"an"</span>, <span class="string">"array"</span>]</p></td></tr><tr><td><p style="padding-left:0ex;">})</p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			<h4>Notes</h4>
			<ul>
				<li>Keep ALT pressed for an "as sibling" drop</li>
				<li>Keep CONTROL pressed to make a "copydrag"</li>
				<li>Vars sent to the script page <a href="#droplink">droplink</a> are sent in POST</li>

				<li>These vars are :
					<ul>
						<li>" drag " = JSON description of dragged branch</li>
						<li>" drop " = JSON description of dropped-on branch</li>
						<li>" drag_id " = dragged branch id</li>
						<li>" drop_id " = drop branch id</li>
						<li>" treedrag_id " = dragged branch's tree id</li>

						<li>" treedrop_id " = drop branch's tree id</li>
						<li>" sibling " = 0 if it's a drop "as child", 1 if it's an "as-sibling"</li>
					</ul>
				</li>
				<li>All other vars passed throught <a href="#droplink">droplink</a> are in POST. For example, if droplink = "page.php?spec=1", you'll get <em>spec</em> in POST.</li>

			</ul>
			</div>

			<h4 onclick="shownext(this)">setOnOpenPopulate()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>func <em>(function)</em></th>

					<td>The user function to call</td></tr>
				<tr><th>link <em>(string)</em></th>
					<td>Link to the server page</td></tr>
			</table>
			<p>Called after a branch is opened. When it's open, it launch an Ajax request at the page <strong>openlink</strong> and send the Ajax response to the user function. <strong>It must return a JSON string representing an array of one or more TafelTreeBranch</strong></p>

			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr><tr><th>14</th></tr><tr><th>15</th></tr><tr><th>16</th></tr><tr><th>17</th></tr><tr><th>18</th></tr><tr><th>19</th></tr><tr><th>20</th></tr><tr><th>21</th></tr><tr><th>22</th></tr><tr><th>23</th></tr><tr><th>24</th></tr><tr><th>25</th></tr><tr><th>26</th></tr><tr><th>27</th></tr><tr><th>28</th></tr><tr><th>29</th></tr><tr><th>30</th></tr><tr><th>31</th></tr><tr><th>32</th></tr><tr><th>33</th></tr><tr><th>34</th></tr><tr><th>35</th></tr><tr><th>36</th></tr><tr><th>37</th></tr><tr><th>38</th></tr><tr><th>39</th></tr><tr><th>40</th></tr><tr><th>41</th></tr><tr><th>42</th></tr><tr><th>43</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// User <span class="reserved">function</span></span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">function</span> myOpen (branch, response) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// The response is the responseText of XMLHttpRequest</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// object</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(response);</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// It MUST BE a JSON string which MUST BE the structure</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// of a TafelTreeBranch</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">var</span> childBranch = eval(response);</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(childBranch.id + <span class="string">"\n"</span> + childBranch.txt);</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">alert</span>(branch.getId() + <span class="string">" will be opened <span class="reserved">if</span> "</span> +</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="string">"this <span class="reserved">function</span> returns <span class="reserved">true</span>"</span>);</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">return</span> response;</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> tree = <span class="reserved">new</span> TafelTree (<span class="string">"idtree"</span>, {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"generate"</span> : <span class="reserved">true</span>,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"onOpenPopulate"</span> : [myOpen, <span class="string">"pageScript.php"</span>]</p></td></tr><tr><td><p style="padding-left:4ex;">});</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// PHP file sample</span></p></td></tr><tr><td><p style="padding-left:0ex;"><span class="php">&lt;?php</span></p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// Do some stuff</span></p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// ...</span></p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// Et on affiche une string JSON. A noter qu'on retourne</span></p></td></tr><tr><td><p style="padding-left:0ex;"><span class="comment">// systématiquement un TABLEAU</span></p></td></tr><tr><td><p style="padding-left:0ex;"><span class="php">?&gt;</span></p></td></tr><tr><td><p style="padding-left:0ex;">[</p></td></tr><tr><td><p style="padding-left:0ex;">{</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="string">"id"</span> : <span class="string">"child1"</span>,</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="string">"txt"</span> : <span class="string">"Texte 1"</span>,</p></td></tr><tr><td><p style="padding-left:0ex;"><span class="string">"items"</span> : [</p></td></tr><tr><td><p style="padding-left:4ex;">{</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"id"</span> : <span class="string">"child2"</span>,</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="string">"txt"</span> : <span class="string">"Texte 2"</span></p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">]</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">]</p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			<h4>Notes</h4>
			<ul>
				<li>Response MUST BE an JSON array ( <strong>[ ]</strong> ) representing one or more TafelTreeBranch</li>
				<li>JSON MUST BE a description of one or more TafelTreeBranch</li>
				<li>Vars sent to the script page <a href="#openlink">openlink</a> are sent in POST</li>

				<li>These vars are :
					<ul>
						<li>" branch " = JSON description of the branch opened</li>
						<li>" branch_id " = id of the branch opened</li>
						<li>" tree_id " = id of the branch's parent tree</li>
					</ul>
				</li>
				<li>All other vars passed throught <a href="#openlink">openlink</a> are in POST. For example, if openlink = "page.php?spec=1", you'll get <em>spec</em> in POST.</li>

			</ul>
			</div>

			<h4 onclick="shownext(this)">setOnEditAjax()</h4>
			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>func <em>(function)</em></th>

					<td>The user function to call</td></tr>
				<tr><th>link <em>(string)</em></th>
					<td>Link to the server page</td></tr>
			</table>
			<p>Called after the branch is edited. It launch an Ajax request at the page <strong>editlink</strong> and send the Ajax response to the user function. <strong>The method must return a string representing the new value of the branch</strong>.</p>

			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr><tr><th>14</th></tr><tr><th>15</th></tr><tr><th>16</th></tr><tr><th>17</th></tr><tr><th>18</th></tr><tr><th>19</th></tr><tr><th>20</th></tr><tr><th>21</th></tr><tr><th>22</th></tr><tr><th>23</th></tr><tr><th>24</th></tr><tr><th>25</th></tr><tr><th>26</th></tr><tr><th>27</th></tr><tr><th>28</th></tr><tr><th>29</th></tr><tr><th>30</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">function</span> myEditAjax (branch, response, oldValue) {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// To see the content of response, you can <span class="string">"<span class="reserved">alert</span>"</span> it or</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// put it in a div content like that :</span></p></td></tr><tr><td><p style="padding-left:4ex;">branch.tree.debug(response);</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Evaluate a JSON response (note that the JSON is</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// inside brackets). The response should contain, somehow,</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// the <span class="reserved">new</span> value of the branch</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// ({</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// <span class="string">"message"</span> : <span class="string">"Everything was fine on the server"</span>,</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// <span class="string">"newValue"</span> : <span class="string">"<span class="reserved">new</span> value"</span>,</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// <span class="string">"anyOtherParams"</span> : <span class="reserved">true</span></span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// })</span></p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// You can also just <span class="reserved">return</span> the <span class="reserved">new</span> value, <span class="reserved">if</span> you want.</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// For example :</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span> (response); <span class="comment">// show the <span class="reserved">new</span> text</span></p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Some tests</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">if</span> (resultsFromTest) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// OK, the branch will be edited and will have as</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// value what is returned by this <span class="reserved">function</span>;</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">return</span> theNewValue;</p></td></tr><tr><td><p style="padding-left:4ex;">} <span class="reserved">else</span> {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// Here, the branch won<span class="string">"t be edited and it"</span>ll keep</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// the oldValue</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">return</span> <span class="reserved">false</span>;</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			<h4>Notes</h4>
			<ul>
				<li>The Ajax response should contain the new value of the branch</li>
				<li>Vars sent to the script page <a href="#editlink">editlink</a> are sent in POST</li>
				<li>These vars are :
					<ul>

						<li>" branch " = JSON description of the branch</li>
						<li>" branch_id " = id of the branch</li>
						<li>" tree_id " = id of the branch's parent tree</li>
						<li>" new_value " = the new value</li>
						<li>" old_value " = the old value</li>
					</ul>

				</li>
				<li>All other vars passed throught <a href="#editlink">editlink</a> are in POST. For example, if editlink = "page.php?spec=1", you'll get <em>spec</em> in POST.</li>
			</ul>
			</div>

			<h4 class="new" onclick="shownext(this)">setOnErrorAjax()</h4>

			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr><th>func <em>(function)</em></th>
					<td>The user function to call</td></tr>
			</table>
			<p>Called after an error Ajax in functions drop, open or edit</p>

			<h4>Samples</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr><tr><th>14</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;"><span class="reserved">function</span> myErrorAjax (type, response, branch, droppedOn) {</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// Check error type. Can be drop, edit ou open</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">switch</span> (type) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">case</span> <span class="string">"drop"</span> :</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">break</span>;</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">case</span> <span class="string">"open"</span> :</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">break</span>;</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">case</span> <span class="string">"edit"</span> :</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">break</span>;</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">alert</span>(<span class="string">"Une erreur est survenue pendant l'édition"</span>);</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">break</span>;</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">}</p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h1>TafelTreeManager methods</h1>
			<h2>TafelTreeManager Keyboard events description</h2>
			<h4 class="new" onclick="shownext(this)">Events</h4>
			<div class="develop">
			<p>The follwing keyboard keys are managed :</p>

			<ul>
				<li>ARROW_LEFT</li>
				<li>ARROW_RIGHT</li>
				<li>ARROW_UP</li>
				<li>ARROW_DOWN</li>
				<li>HOME</li>

				<li>END</li>
				<li>F2 (editing)</li>
				<li>ENTER (stop editing)</li>
				<li>ESCAPE (unselect)</li>
				<li>DELETE</li>
				<li>CTRL + X (APPLE-KEY on mac Safari)</li>

				<li>CTRL + C (APPLE-KEY on mac Safari)</li>
				<li>CTRL + V (APPLE-KEY on mac Safari)</li>
			</ul>
			<p>It's possible to desactivate certain keys or adding your own. See setKey() function</p>
			</div>
			<h2>TafelTreeManager public methods</h2>
			<h4 class="new" onclick="shownext(this)">setKeys()</h4>

			<div class="develop">
			<h4>Arguments</h4>
			<table class="prop">
				<tr>
					<th>keys <em>(array)</em></th>
					<td>array containing the key code and the function for the key</td>
				</tr>

			</table>
			<p>Can manage on or more behaviour for one or more keyboard keys. The function is called just after the key is pressed. The user function has for arguments the tree where the key was pressed, the modifiers-key pressed (ctrl, alt, shit or meta), the key code and the Event object.</p>
			<h4>Exemple</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr><tr><th>5</th></tr><tr><th>6</th></tr><tr><th>7</th></tr><tr><th>8</th></tr><tr><th>9</th></tr><tr><th>10</th></tr><tr><th>11</th></tr><tr><th>12</th></tr><tr><th>13</th></tr><tr><th>14</th></tr><tr><th>15</th></tr><tr><th>16</th></tr><tr><th>17</th></tr><tr><th>18</th></tr><tr><th>19</th></tr><tr><th>20</th></tr><tr><th>21</th></tr><tr><th>22</th></tr><tr><th>23</th></tr><tr><th>24</th></tr><tr><th>25</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// <span class="reserved">function</span> definition</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">function</span> myOnDelete (tree, code, modifiers, ev) {</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// Do some stuff and <span class="reserved">return</span> <span class="reserved">true</span> <span class="reserved">if</span> you want</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// the process to continue. For DEL key, <span class="reserved">for</span> example,</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// there's already a build-in <span class="reserved">function</span>. If you</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// <span class="reserved">return</span> <span class="reserved">true</span>, the delete <span class="reserved">function</span> will be called.</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="comment">// If you <span class="reserved">return</span> <span class="reserved">false</span>, it will not be called...</span></p></td></tr><tr><td><p style="padding-left:8ex;"><span class="reserved">if</span> (okForDelete) {</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">return</span> <span class="reserved">true</span>;</p></td></tr><tr><td><p style="padding-left:8ex;">} <span class="reserved">else</span> {</p></td></tr><tr><td><p style="padding-left:12ex;"><span class="reserved">return</span> <span class="reserved">false</span>;</p></td></tr><tr><td><p style="padding-left:8ex;">}</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:0ex;">&nbsp;</p></td></tr><tr><td><p style="padding-left:4ex;"><span class="comment">// key definition</span></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">var</span> keys = [</p></td></tr><tr><td><p style="padding-left:4ex;">{</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"key"</span> : 46,</p></td></tr><tr><td><p style="padding-left:8ex;"><span class="string">"func"</span> : myOnDelete</p></td></tr><tr><td><p style="padding-left:4ex;">}</p></td></tr><tr><td><p style="padding-left:4ex;">];</p></td></tr><tr><td><p style="padding-left:4ex;">TafelTreeManager.setKeys(keys);</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			<h4>Notes</h4>
			<ul>
				<li>modifiers.ctrlKey = true if Ctrl is pressed</li>
				<li>modifiers.altKey = true if Alt is pressed</li>
				<li>modifiers.shiftKey = true if Shift is pressed</li>
				<li>modifiers.metaKey = true if "Pomme" (on mac Safari) is pressed</li>

			</ul>
			</div>

			<h4 class="new" onclick="shownext(this)">disableKeyboardEvents()</h4>
			<div class="develop">
			<p>Disable all keyboard events</p>
			<h4>Exemple</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;">TafelTreeManager.disableKeyboardEvents();</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 class="new" onclick="shownext(this)">disableKeyboardStructuralEvents()</h4>
			<div class="develop">
			<p>Disable all build-in structural functions., like DEL, COPY, PASTE, etc. So it's still possible to navigate with arrows. User functions are active too.</p>
			<h4>Exemple</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;">TafelTreeManager.disableKeyboardStructuralEvents();</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 class="new" onclick="shownext(this)">getCurrentTree()</h4>
			<div class="develop">
			<p>Returns the current tree. Null if no tree is selected.</p>
			<h4>Exemple</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;"><span class="reserved">alert</span>(TafelTreeManager.getCurrentTree());</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			<h4 class="new" onclick="shownext(this)">setCurrentTree()</h4>
			<div class="develop">
			<p>Set the current tree where all keyboard actions will be done.</p>
			<h4>Exemple</h4>
			<div class="code"><table><tr><td class="num"><table><tr><th>1</th></tr><tr><th>2</th></tr><tr><th>3</th></tr><tr><th>4</th></tr></table></td><td><table><tr><td><p style="padding-left:0ex;">&lt;script type=<span class="string">"text/javascript"</span>></p></td></tr><tr><td><p style="padding-left:4ex;">TafelTreeManager.setCurrentTree(myTree);</p></td></tr><tr><td><p style="padding-left:0ex;">&lt;/script></p></td></tr><tr><td>&nbsp;</td></tr></table></td></tr></table></div>

			</div>

			</div>

		</div>
	</div>
	<div class="bottom">
		<p>Treeview JS TafelTree</p>
		<p>2006-12-30, <a href="#" onClick="gereStyle()">Tafel</a>. Optimised for Mozilla Firefox</p>
	</div>

</div>

</body>
</html>
Return current item: TafelTree view javascript