Subversion-Projekte lars-tiefland.cienc

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
9 lars 1
<!DOCTYPE html>
2
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
3
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
4
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
5
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
6
<head>
7
	<meta charset="utf-8">
8
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9
	<title>jsTree</title>
10
	<meta name="viewport" content="width=device-width" />
11
	<!--[if lt IE 9]><script src="./assets/html5.js"></script><![endif]-->
12
 
13
	<meta name="robots" content="index,follow" />
14
	<link rel="stylesheet" href="./assets/bootstrap/css/bootstrap.min.css" />
15
	<link rel="stylesheet" href="./assets/dist/themes/default/style.min.css" />
16
	<link rel="stylesheet" href="./assets/docs.css" />
17
	<!--[if lt IE 9]><script src="./assets/respond.js"></script><![endif]-->
18
 
19
	<link rel="icon" href="./assets/favicon.ico" type="image/x-icon" />
20
	<link rel="apple-touch-icon-precomposed" href="./assets/apple-touch-icon-precomposed.png" />
21
	<script>window.$q=[];window.$=window.jQuery=function(a){window.$q.push(a);};</script>
22
</head>
23
<body>
24
	<header id="head">
25
		<div class="container">
26
			<div class="row">
27
				<div class="col-md-3 col-sm-12">
28
					<h1 id="logo"><a href="http://jstree.com">jsTree - jQuery tree plugin</a></h1>
29
				</div>
30
				<div class="col-md-6 col-sm-8">
31
					<nav>
32
						<ul class="nav nav-pills" id="menu"><li><a href="/docs"><i class="glyphicon glyphicon-home"></i> Home</a></li><li><a href="/demo"><i class="glyphicon glyphicon-flash"></i> Demo</a></li><li><a href="/api"><i class="glyphicon glyphicon-cog"></i> API</a></li><li><a href="/plugins"><i class="glyphicon glyphicon-link"></i> Plugins</a></li></ul>
33
					</nav>
34
				</div>
35
				<div class="col-md-3 col-sm-4">
36
					<form role="search">
37
						<input type="text" id="srch" class="form-control" placeholder="API search" />
38
					</form>
39
				</div>
40
			</div>
41
		</div>
42
	</header>
43
	<div class="container" id="content">
44
		<!--.-->
45
		<div class="row page" id="docs">
46
			<div class="col-md-12" style="">
47
				<h3><i class="glyphicon glyphicon-leaf"></i> What is jsTree?</h3>
48
				<div class="row">
49
					<div class="col-md-8">
50
						<p>jsTree is <strong>jquery plugin</strong>, that provides <strong>interactive trees</strong>. It is absolutely <strong>free</strong>, <a href="https://github.com/vakata/jstree/">open source</a> and distributed under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT license</a>. jsTree is easily extendable, themable and configurable, it supports <strong>HTML &amp; JSON data sources and AJAX loading</strong>.</p>
51
						<p>jsTree functions properly in either box-model (content-box or border-box), can be loaded as an AMD module, and has a built in mobile theme for responsive design, that can easily be customized. It uses jQuery's event system, so binding callbacks on various events in the tree is familiar and easy.</p>
52
						<p>Just a few of the features worth noting:</p>
53
						<ul class="features list-unstyled list-inline">
54
							<li><i class="glyphicon glyphicon-ok"></i> drag &amp; drop support</li>
55
							<li><i class="glyphicon glyphicon-ok"></i> keyboard navigation</li>
56
							<li><i class="glyphicon glyphicon-ok"></i> inline edit, create and delete</li>
57
							<li><i class="glyphicon glyphicon-ok"></i> tri-state checkboxes</li>
58
							<li><i class="glyphicon glyphicon-ok"></i> fuzzy searching</li>
59
							<li><i class="glyphicon glyphicon-ok"></i> customizable node types</li>
60
						</ul>
61
						<p id="main-buttons">
62
							<img src="./assets/images/browsers.png" style="max-width:100%; max-height:36px;" alt="" /><br /><small>All modern browsers are supported, as well as IE8</small><br /><br />
63
							<a href="https://github.com/vakata/jstree/archive/master.zip" class="btn btn-success"><i class="glyphicon glyphicon-download"></i>&nbsp;&nbsp;Download</a>
64
							<a href="https://groups.google.com/forum/#!forum/jstree" class="btn btn-warning"><i class="glyphicon glyphicon-comment"></i>&nbsp;&nbsp;Discuss</a>
65
							<a href="https://github.com/vakata/jstree/issues?state=open" class="btn btn-danger"><i class="glyphicon glyphicon-exclamation-sign"></i>&nbsp;&nbsp;Report bugs</a>
66
							<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&amp;business=paypal@vakata.com&amp;currency_code=USD&amp;amount=&amp;return=http://jstree.com/donation&amp;item_name=Buy+me+a+coffee+for+jsTree" class="btn btn-primary"><i class="glyphicon glyphicon-thumbs-up"></i>&nbsp;&nbsp;&nbsp;Donate</a>
67
						</p>
68
					</div>
69
					<div class="col-md-4">
70
						<div id="jstree1" class="demo">
71
							<ul>
72
								<li>Root node 1
73
									<ul>
74
										<li data-jstree='{ "selected" : true }'><a href="#"><em>initially</em> <strong>selected</strong></a></li>
75
										<li data-jstree='{ "icon" : "http://jstree.com/tree-icon.png" }'>custom icon URL</li>
76
										<li data-jstree='{ "opened" : true }'>initially open
77
											<ul>
78
												<li>Another node</li>
79
											</ul>
80
										</li>
81
										<li data-jstree='{ "icon" : "glyphicon glyphicon-leaf" }'>Custom icon class (bootstrap)</li>
82
									</ul>
83
								</li>
84
								<li><a href="http://www.jstree.com">Root node 2</a></li>
85
							</ul>
86
						</div>
87
						<div id="jstree2" class="demo" style="margin-top:2em;"></div>
88
						<script>
89
						$(function () {
90
							$('#jstree1').jstree();
91
							$('#jstree2').jstree({'plugins':["wholerow","checkbox"], 'core' : {
92
								'data' : [
93
									{
94
										"text" : "Same but with checkboxes",
95
										"children" : [
96
											{ "text" : "initially selected", "state" : { "selected" : true } },
97
											{ "text" : "custom icon URL", "icon" : "http://jstree.com/tree-icon.png" },
98
											{ "text" : "initially open", "state" : { "opened" : true }, "children" : [ "Another node" ] },
99
											{ "text" : "custom icon class", "icon" : "glyphicon glyphicon-leaf" }
100
										]
101
									},
102
									"And wholerow selection"
103
								]
104
							}});
105
						});
106
						</script>
107
					</div>
108
				</div>
109
 
110
				<ul class="nav nav-tabs">
111
					<li class="active"><a href="/docs/overview" class="nava">Overview</a></li>
112
					<li><a href="/docs/config" class="nava">Configuration</a></li>
113
					<li><a href="/docs/html" class="nava">HTML data</a></li>
114
					<li><a href="/docs/json" class="nava">JSON data</a></li>
115
					<li><a href="/docs/events" class="nava">Events</a></li>
116
					<li><a href="/docs/interaction" class="nava">Interaction</a></li>
117
				</ul>
118
				<div class="tab-content">
119
					<!--...-->
120
					<div id="overview" class="tab-content-item">
121
				<div class="row">
122
					<div class="col-md-12">
123
						<h3><i class="glyphicon glyphicon-leaf"></i> Getting Started - everything at a glance</h3>
124
					</div>
125
				</div>
126
				<div class="row" style="margin-top:1em;">
127
					<div class="col-md-12">
128
						<ol class="spaced">
129
							<li>
130
								<h4 class="list-group-item-heading"><a href="https://github.com/vakata/jstree/archive/master.zip">Download jsTree</a></h4>
131
								<p class="list-group-item-text">All the files you need are in the <code>dist/</code> folder of the download.</p>
132
							</li>
133
							<li>
134
								<h4 class="list-group-item-heading">Include a jsTree theme</h4>
135
								<p class="list-group-item-text">Themes can be autloaded too, but it is best for performance to include the CSS file.</p>
136
								<pre style="margin-top:1em;"><code>&lt;link rel="stylesheet" href="<strong>dist/themes/default/style.min.css</strong>" /&gt;</code></pre>
137
							</li>
138
							<li>
139
								<h4 class="list-group-item-heading">Setup a container</h4>
140
								<p class="list-group-item-text">This is the element where you want the tree to appear, a <code>&lt;div&gt;</code> is enough. This example has a nested <code>&lt;ul&gt;</code> as there is no other data source configured (such as JSON).</p>
141
								<pre style="margin-top:1em;"><code>  &lt;div <strong>id="jstree_demo_div"</strong>&gt;&lt;/div&gt;</code></pre>
142
							</li>
143
							<li>
144
								<h4 class="list-group-item-heading">Include jQuery</h4>
145
								<p class="list-group-item-text">jsTree requires <strong>1.9.0 or greater</strong> in your webpage.</p>
146
								<pre style="margin-top:1em;"><code>&lt;script src="<strong>dist/libs/jquery.js</strong>"&gt;&lt;/script&gt;</code></pre>
147
							</li>
148
							<li>
149
								<h4 class="list-group-item-heading">Include jsTree</h4>
150
								<p class="list-group-item-text">For production include the minified version: <code>dist/jstree.min.js</code>, there is a development version too: <code>dist/jstree.js</code></p>
151
								<pre style="margin-top:1em;"><code>&lt;script src="<strong>dist/jstree.min.js</strong>"&gt;&lt;/script&gt;</code></pre>
152
							</li>
153
							<li>
154
								<h4 class="list-group-item-heading">Create an instance</h4>
155
								<p class="list-group-item-text">Once the DOM is ready you can start creating jstree instances.</p>
156
								<pre style="margin-top:1em;"><code>$(function () { <strong>$('#jstree_demo_div').jstree();</strong> });</code></pre>
157
							</li>
158
							<li>
159
								<h4 class="list-group-item-heading">Listen for events</h4>
160
								<p class="list-group-item-text">jsTree uses events to notify you when something changes while users (or you) interact with the tree. So binding to jstree events is as easy binding to a click. There is a <a href="/api/?q=.jstree%20Event">list of events</a> and what information they provide in the API documentation.</p>
161
								<pre style="margin-top:1em;"><code>$('#jstree_demo_div').on("changed.jstree", function (e, data) {
162
  console.log(data.selected);
163
});</code></pre>
164
							</li>
165
							<li>
166
								<h4 class="list-group-item-heading">Interact with your instances</h4>
167
								<p class="list-group-item-text">Once an instance is ready you can invoke methods on it. There is a <a href="/api/?q=(">list of available methods</a> in the API documentation. The three examples below do exactly the same thing</p>
168
								<pre style="margin-top: 1em;"><code>$('button').on('click', function () {
169
  <strong>$('#jstree').jstree(true).select_node('child_node_1');</strong>
170
  <strong>$('#jstree').jstree('select_node', 'child_node_1');</strong>
171
  <strong>$.jstree.reference('#jstree').select_node('child_node_1');</strong>
172
});</code></pre>
173
							</li>
174
						</ol>
175
					</div>
176
				</div>
177
				<div class="row">
178
					<div class="col-md-12">
179
						<p style="text-align:center;"><button class="btn btn-info" onclick="$(this).blur().parent().next().slideToggle(); return false;">show the complete code</button></p>
180
<pre style="padding:0px 20px; display:none;"><code>
181
&lt;!DOCTYPE html&gt;
182
&lt;html&gt;
183
&lt;head&gt;
184
  &lt;meta charset="utf-8"&gt;
185
  &lt;title&gt;jsTree test&lt;/title&gt;
186
  <span class="comment">&lt;!-- <strong>2</strong> load the theme CSS file --&gt;</span>
187
  &lt;link rel="stylesheet" href="<strong>dist/themes/default/style.min.css</strong>" /&gt;
188
&lt;/head&gt;
189
&lt;body&gt;
190
  <span class="comment">&lt;!-- <strong>3</strong> setup a container element --&gt;</span>
191
  &lt;div id="jstree"&gt;
192
    <span class="comment">&lt;!-- in this example the tree is populated from inline HTML --&gt;</span>
193
    &lt;ul&gt;
194
      &lt;li&gt;Root node 1
195
        &lt;ul&gt;
196
          &lt;li id="child_node_1"&gt;Child node 1&lt;/li&gt;
197
          &lt;li&gt;Child node 2&lt;/li&gt;
198
        &lt;/ul&gt;
199
      &lt;/li&gt;
200
      &lt;li&gt;Root node 2&lt;/li&gt;
201
    &lt;/ul&gt;
202
  &lt;/div&gt;
203
  &lt;button&gt;demo button&lt;/button&gt;
204
 
205
  <span class="comment">&lt;!-- <strong>4</strong> include the <a href="http://jquery.org">jQuery</a> library --&gt;</span>
206
  &lt;script src="<strong>dist/libs/jquery.js</strong>"&gt;&lt;/script&gt;
207
  <span class="comment">&lt;!-- <strong>5</strong> include the minified <a href="http://jstree.com">jstree</a> source --&gt;</span>
208
  &lt;script src="<strong>dist/jstree.min.js</strong>"&gt;&lt;/script&gt;
209
  &lt;script&gt;
210
  $(function () {
211
    <span class="comment">// <strong>6</strong> create an instance when the DOM is ready</span>
212
    <strong>$('#jstree').jstree();</strong>
213
    <span class="comment">// <strong>7</strong> bind to events triggered on the tree</span>
214
    <strong>$('#jstree').on("changed.jstree", function (e, data) {
215
      console.log(data.selected);
216
    });</strong>
217
    <span class="comment">// <strong>8</strong> interact with the tree - either way is OK</span>
218
    $('button').on('click', function () {
219
      <strong>$('#jstree').jstree(true).select_node('child_node_1');</strong>
220
      <strong>$('#jstree').jstree('select_node', 'child_node_1');</strong>
221
      <strong>$.jstree.reference('#jstree').select_node('child_node_1');</strong>
222
    });
223
  });
224
  &lt;/script&gt;
225
&lt;/body&gt;
226
&lt;/html&gt;
227
 </code></pre>
228
					</div>
229
				</div>
230
 
231
				</div><!--...--><div id="config" class="tab-content-item">
232
 
233
				<div class="row">
234
					<div class="col-md-12">
235
						<h3><i class="glyphicon glyphicon-leaf"></i> Configuring instances</h3>
236
					</div>
237
				</div>
238
				<div class="row">
239
					<div class="col-md-12">
240
					<p>Creating an instance as described in the overview does not modify any of the defaults:</p>
241
					<pre><code>$('#jstree').jstree();</code></pre>
242
					<p>You can change the defaults for all future instances:</p>
243
					<pre><code>$.jstree.defaults.core.theme.variant = "large";
244
$('#jstree').jstree();</code></pre>
245
					<p>But most of the time you will want to change the defaults only for the instance that is being created. This is achieved by passing in a config object when creating the instance:</p>
246
					<pre><code>$('#jstree').jstree(<strong>{
247
  "plugins" : [ "wholerow", "checkbox" ]
248
}</strong>);</code></pre>
249
					<p>As seen in the previous example - there is one special key in the config object named <code>plugins</code>. It is an array of strings, which contain the names of the plugins you want active on that instance.</p>
250
					<p>All options that do not depend on a plugin are contained in a key of the config object named <code>core</code>, the options for each plugin are contained within a key with the same name as the plugin:</p>
251
					<pre><code>$('#jstree').jstree({
252
  <strong>"core"</strong> : {
253
    "theme" : {
254
      "variant" : "large"
255
    }
256
  },
257
  <strong>"checkbox"</strong> : {
258
    "keep_selected_style" : false
259
  },
260
  "plugins" : [ "wholerow", "checkbox" ]
261
});</code></pre>
262
 
263
					<p>You can have a look at all the <a href="/api/?q=$.jstree.defaults">options and their default values</a>. This list is what you can configure on each instance.<br />For example, by default the tree allows multiple selection as stated in <code>$.jstree.defaults.core.multiple</code>, to overwrite that make sure your config object contains <code>"core" : { "multiple" : false }</code>. If you have multiple overrides for the same key (like <code>"core"</code> here), group them:</p>
264
					<pre><code>$("#jstree").jstree({
265
  "core" : {
266
    "multiple" : false,
267
    "animation" : 0
268
  }
269
});</code></pre>
270
					</div>
271
				</div>
272
 
273
				</div><!--...--><div id="html" class="tab-content-item">
274
 
275
				<div class="row">
276
					<div class="col-md-12">
277
						<h3><i class="glyphicon glyphicon-leaf"></i> Populating a tree using HTML</h3>
278
					</div>
279
				</div>
280
				<h4>Basic markup</h4>
281
				<div class="row">
282
					<div class="col-md-4">
283
						<p>jsTree can turn a regular unordered list into a tree. The minimal required markup is a <code>&lt;ul&gt;</code> node with some nested <code>&lt;li&gt;</code> nodes with some text inside.</p>
284
						<p>You should have a container wrapping the <code>&lt;ul&gt;</code> and create the instance on that container. Like so:<br /><code>$('#html1').jstree();</code>.
285
					</div>
286
					<div class="col-md-4">
287
						<pre><code>&lt;div id="html1"&gt;
288
  &lt;ul&gt;
289
    &lt;li&gt;Root node 1&lt;/li&gt;
290
    &lt;li&gt;Root node 2&lt;/li&gt;
291
  &lt;/ul&gt;
292
&lt;/div&gt;</code></pre>
293
					</div>
294
					<div class="col-md-4">
295
						<div class="demo" id="using_html_1">
296
							<ul>
297
								<li>Root node 1</li>
298
								<li>Root node 2</li>
299
							</ul>
300
						</div>
301
					</div>
302
					<script>
303
					$(function () {
304
						$('#using_html_1').jstree();
305
					});
306
					</script>
307
				</div>
308
				<h4>Nodes with children</h4>
309
				<div class="row">
310
					<div class="col-md-4">
311
						<p>To create a node with child nodes simpy nest an <code>&lt;ul&gt;</code>.</p>
312
						<p>Internally jstree converts the text to a link, so if there already is a link in the markup jstree won't mind. Like <code>Child node 2</code>.<br />Clicking on the link however will not direct the user to a new page, to do that - intercept the <code>changed.jstree</code> event and act accordingly.</p>
313
						<p>Keep reading for the section on handling events.</p>
314
					</div>
315
					<div class="col-md-4">
316
						<pre><code>&lt;div id="html1"&gt;
317
  &lt;ul&gt;
318
    &lt;li&gt;Root node 1<strong>
319
      &lt;ul&gt;
320
        &lt;li&gt;Child node 1&lt;/li&gt;
321
        &lt;li&gt;&lt;a href="#"&gt;Child node 2&lt;/a&gt;&lt;/li&gt;
322
      &lt;/ul&gt;</strong>
323
    &lt;/li&gt;
324
  &lt;/ul&gt;
325
&lt;/div&gt;</code></pre>
326
					</div>
327
					<div class="col-md-4">
328
						<div id="using_html_2" class="demo">
329
							<ul>
330
								<li>Root node 1
331
									<ul>
332
										<li>Child node 1</li>
333
										<li><a href="#">Child node 2</a></li>
334
									</ul>
335
								</li>
336
							</ul>
337
						</div>
338
						<script>
339
						$(function () {
340
							$('#using_html_2').jstree();
341
						});
342
						</script>
343
					</div>
344
				</div>
345
				<h4>Setting initial state with classes</h4>
346
				<div class="row">
347
					<div class="col-md-4">
348
						<p>To make a node initially selected you can set the <code>jstree-clicked</code> class on the <code>&lt;a&gt;</code> element.</p>
349
						<p>Similarly you can set the <code>jstree-open</code> class on any <code>&lt;li&gt;</code> element to make it initially extended, so that its children are visible.</p>
350
						<p>It is a good idea to give your nodes <strong>unique</strong> IDs by adding the <code>id</code> attribute to any <code>&lt;li&gt;</code> element. This will be useful if you need to sync with a backend as you will get the ID back in any events jstree triggers.</p>
351
					</div>
352
					<div class="col-md-4">
353
						<pre><code>&hellip;
354
&lt;li <strong>class="jstree-open"</strong> <strong>id="node_1"</strong>&gt;Root&lt;/li&gt;
355
  &lt;ul&gt;
356
    &lt;li&gt;
357
      &lt;a href="#" <strong>class="jstree-clicked"</strong>&gt;Child&lt;/a&gt;
358
    &lt;/li&gt;
359
  &lt;/ul&gt;
360
&lt;/li&gt;
361
&hellip;</code></pre>
362
					</div>
363
					<div class="col-md-4">
364
						<div id="using_html_3" class="demo">
365
							<ul>
366
								<li class="jstree-open">Root
367
									<ul>
368
										<li><a href="#" class="jstree-clicked">Child</a></li>
369
									</ul>
370
								</li>
371
							</ul>
372
						</div>
373
						<script>
374
						$(function () {
375
							$('#using_html_3').jstree();
376
						});
377
						</script>
378
					</div>
379
				</div>
380
				<h4>Setting initial state with data attribute</h4>
381
				<div class="row">
382
					<div class="col-md-4">
383
						<p>You can also set the state on a node using a <code>data-jstree</code> attribute.</p>
384
						<p>You can use any combination of the following: <code>opened</code>, <code>selected</code>, <code>disabled</code>, <code>icon</code>.</p>
385
						<p>Specifying an address (anything containing a <code>/</code>) will display that image as the node icon. Using a string will apply that class to the <code>&lt;i&gt;</code> element that is used to represent the icon.<br />For example if you are using Twitter Bootstrap you can use <code>"icon" : "glyphicon glyphicon-leaf"</code> to display a leaf icon.</p>
386
					</div>
387
					<div class="col-md-4">
388
						<pre><code>&lt;li <strong>data-jstree='{"opened":true,"selected":true}'</strong>&gt;Root
389
  &lt;ul&gt;
390
    &lt;li <strong>data-jstree='{"disabled":true}'</strong>&gt;Child&lt;/li&gt;
391
    &lt;li <strong>data-jstree='{"icon":"http://jstree.com/tree.png"}'</strong>&gt;
392
      Child&lt;/li&gt;
393
    &lt;li <strong>data-jstree='{"icon":"glyphicon glyphicon-leaf"}'</strong>&gt;
394
      Child&lt;/li&gt;
395
  &lt;/ul&gt;
396
&lt;/li&gt;</code></pre>
397
					</div>
398
					<div class="col-md-4">
399
						<div id="using_html_4" class="demo">
400
							<ul>
401
								<li data-jstree='{"opened":true,"selected":true}'>Root
402
								  <ul>
403
								    <li data-jstree='{"disabled":true}'>Child</li>
404
								    <li data-jstree='{"icon":"http://jstree.com/tree.png"}'>
405
								      Child</li>
406
								    <li data-jstree='{"icon":"glyphicon glyphicon-leaf"}'>
407
								      Child</li>
408
								  </ul>
409
								</li>
410
							</ul>
411
						</div>
412
						<script>
413
						$(function () {
414
							$('#using_html_4').jstree();
415
						});
416
						</script>
417
					</div>
418
				</div>
419
				<h4>Loading with AJAX</h4>
420
				<div class="row">
421
					<div class="col-md-4">
422
						<p>You can also use AJAX to populate the tree with HTML your server returns. The format remains the same as the above, the only difference is that the HTML is not inside the container, but returned from the server.</p>
423
						<p>To take advantage of this option you need to use the <a href="/api/?f=$.jstree.defaults.core.data"><code>$.jstree.defaults.core.data</code></a> config option.</p>
424
						<p>Just use a standard jQuery-like AJAX config and jstree will automatically make an AJAX request populate the tree with the response.</p><p>Add a class of <code>jstree-closed</code> to any LI node you return and do not nest an UL node and jstree will make another AJAX call as soon as the user opens this node.</p>
425
						<p>In addition to the standard jQuery ajax options here you can supply functions for <code>data</code> and <code>url</code>, the functions will be run in the current instance's scope and a param will be passed indicating which node is being loaded, the return value of those functions will be used as URL and data respectively.</p>
426
					</div>
427
					<div class="col-md-4">
428
						<pre><code>$('#tree').jstree({
429
'core' : {
430
  'data' : {
431
    'url' : 'ajax_nodes.html',
432
    'data' : function (node) {
433
      'url' : 'ajax_nodes.html',
434
      'data' : function (node) {
435
        return { 'id' : node.id };
436
      }
437
    }
438
  }
439
});
440
 
441
// Example response:
442
&lt;ul&gt;
443
&lt;li&gt;Node 1&lt;/li&gt;
444
&lt;li class="jstree-closed"&gt;Node 2&lt;/li&gt;
445
&lt;/ul&gt;</code></pre>
446
					</div>
447
					<div class="col-md-4">
448
						<div id="using_html_5" class="demo"></div>
449
						<script>
450
						$(function () {
451
							$('#using_html_5').jstree({
452
								'core' : {
453
									'data' : {
454
										'url' : './assets/ajax_nodes.html',
455
										'data' : function (node) {
456
											return { 'id' : node.id };
457
										}
458
									}
459
								}
460
							});
461
						});
462
						</script>
463
					</div>
464
				</div>
465
 
466
				</div><!--...--><div id="json" class="tab-content-item">
467
 
468
				<div class="row">
469
					<div class="col-md-12">
470
						<h3><i class="glyphicon glyphicon-leaf"></i> Populating the tree using JSON</h3>
471
					</div>
472
				</div>
473
				<h4>The format</h4>
474
				<div class="row">
475
					<div class="col-md-6">
476
						<p>jsTree needs a specific format to work with JSON. In the standard syntax no fields are required - pass only what you need. Keep in mind you will be able to access any additional properties you specify - jsTree won't touch them and you will be able to use them later on.</p>
477
						<p>To change the icon of the node use the <code>icon</code> property. Specifying a string containing a <code>/</code> will display that image as the node icon. Using any other string will apply that class to the <code>&lt;i&gt;</code> element that is used to represent the icon. You can use boolean <code>false</code> to make jsTree render the node with no icon.</p>
478
						<p>You can set the state on a node using the <code>state</code> property. Use any combination of the following: <code>opened</code>, <code>selected</code>, <code>disabled</code>.</p>
479
						<p>Both <code>li_attr</code> and <code>a_attr</code> are passed directly to jQuery's attr function.</p>
480
						<p>When using AJAX set <code>children</code> to boolean <code>true</code> and jsTree will render the node as closed and make an additional request for that node when the user opens it.</p>
481
						<p>Any nested children should either be objects following the same format, or plain strings (in which case the string is used for the node's text and everything else is autogenerated).</p>
482
					</div>
483
					<div class="col-md-6">
484
						<pre><code><span class="comment">// Expected format of the node (there are no required fields)</span>
485
{
486
  id          : "string" <span class="comment">// will be autogenerated if omitted</span>
487
  text        : "string" <span class="comment">// node text</span>
488
  icon        : "string" <span class="comment">// string for custom</span>
489
  state       : {
490
    opened    : boolean  <span class="comment">// is the node open</span>
491
    disabled  : boolean  <span class="comment">// is the node disabled</span>
492
    selected  : boolean  <span class="comment">// is the node selected</span>
493
  },
494
  children    : []  <span class="comment">// array of strings or objects</span>
495
  li_attr     : {}  <span class="comment">// attributes for the generated LI node</span>
496
  a_attr      : {}  <span class="comment">// attributes for the generated A node</span>
497
}</code></pre>
498
					</div>
499
				</div>
500
				<h4>Alternative JSON format</h4>
501
				<div class="row">
502
					<div class="col-md-6">
503
						<p>If you do not want to use the nested <code>children</code> approach, you can use the alternative syntax where each node object has two required fields: <code>id</code> &amp; <code>parent</code> and no <code>children</code> property (everything else remains the same).</p>
504
						<p>jsTree will automatically build the hierarchy. To indicate a node should be a root node set its <code>parent</code> property to <code>"#"</code>.</p>
505
						<p>This should be used mainly when you render the whole tree at once and is useful when data is stored in a database using adjacency.</p>
506
					</div>
507
					<div class="col-md-6">
508
						<pre><code><span class="comment">// Alternative format of the node (id &amp; parent are required)</span>
509
{
510
  <strong>id          : "string"</strong> <span class="comment">// required</span>
511
  <strong>parent      : "string"</strong> <span class="comment">// required</span>
512
  text        : "string" <span class="comment">// node text</span>
513
  icon        : "string" <span class="comment">// string for custom</span>
514
  state       : {
515
    opened    : boolean  <span class="comment">// is the node open</span>
516
    disabled  : boolean  <span class="comment">// is the node disabled</span>
517
    selected  : boolean  <span class="comment">// is the node selected</span>
518
  },
519
  li_attr     : {}  <span class="comment">// attributes for the generated LI node</span>
520
  a_attr      : {}  <span class="comment">// attributes for the generated A node</span>
521
}</code></pre>
522
					</div>
523
				</div>
524
				<h4>Using JSON</h4>
525
				<div class="row">
526
					<div class="col-md-4">
527
						<p>To populate the tree with a JSON object you need to use the <a href="/api/?f=$.jstree.defaults.core.data"><code>$.jstree.defaults.core.data</code></a> config option.</p>
528
						<p>The expected format is an array of nodes, where each node should be an object as described above or a simple string (in which case the string is used for the node's text property and everything else is autogenerated). Any nested nodes are supplied in the same manner in the <code>children</code> property of their parent.</p>
529
					</div>
530
					<div class="col-md-4">
531
						<pre><code>$('#using_json').jstree({ 'core' : {
532
    'data' : [
533
       'Simple root node',
534
       {
535
         'text' : 'Root node 2',
536
         'state' : {
537
           'opened' : true,
538
           'selected' : true
539
         },
540
         'children' : [
541
           { 'text' : 'Child 1' },
542
           'Child 2'
543
         ]
544
      }
545
    ]
546
} });</code></pre>
547
					</div>
548
					<div class="col-md-4">
549
						<div id="using_json" class="demo">
550
						</div>
551
						<script>
552
						$(function () {
553
							$('#using_json').jstree({ 'core' : {
554
							    'data' : [
555
							       'Simple root node',
556
							       {
557
							         'text' : 'Root node 2',
558
							         'state' : {
559
							           'opened' : true, 'selected' : true
560
							         },
561
							         'children' : [
562
							           { 'text' : 'Child 1' },
563
							           'Child 2'
564
							         ]
565
							      }
566
							    ]
567
							} });
568
						});</script>
569
					</div>
570
				</div>
571
				<h4>Using the alternative JSON format</h4>
572
				<div class="row">
573
					<div class="col-md-8">
574
						<pre><code>$('#using_json_2').jstree({ 'core' : {
575
    'data' : [
576
       { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
577
       { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
578
       { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
579
       { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
580
    ]
581
} });</code></pre>
582
					</div>
583
					<div class="col-md-4">
584
						<div id="using_json_2" class="demo">
585
						</div>
586
						<script>
587
						$(function () {
588
							$('#using_json_2').jstree({ 'core' : {
589
							    'data' : [
590
							       { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
591
							       { "id" : "ajson2", "parent" : "#", "text" : "Root node 2", "state" : { "opened" : true } },
592
							       { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
593
							       { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" }
594
							    ]
595
							} });
596
						});</script>
597
					</div>
598
				</div>
599
				<h4>Using AJAX</h4>
600
				<div class="row">
601
					<div class="col-md-4">
602
						<p>You can also use AJAX to populate the tree with JSON your server returns. The format remains the same as the above, the only difference is that the JSON is not inside the config object, but returned from the server.</p>
603
						<p>To take advantage of this option you need to use the <a href="/api/?f=$.jstree.defaults.core.data"><code>$.jstree.defaults.core.data</code></a> config option.</p>
604
						<p>Just use a standard jQuery-like AJAX config and jstree will automatically make an AJAX request populate the tree with the response.</p>
605
						<p>In addition to the standard jQuery ajax options here you can supply functions for <code>data</code> and <code>url</code>, the functions will be run in the current instance's scope and a param will be passed indicating which node is being loaded, the return value of those functions will be used as URL and data respectively.</p>
606
						<p>If you do not return correct json headers from the server, at least set the <code>dataType</code> jQuery AJAX option to <code>"json"</code>.</p>
607
					</div>
608
					<div class="col-md-4">
609
						<pre><code>
610
$('#tree').jstree({
611
'core' : {
612
  'data' : {
613
    'url' : function (node) {
614
      return node.id === '#' ?
615
        'ajax_roots.json' :
616
        'ajax_children.json';
617
    },
618
    'data' : function (node) {
619
      return { 'id' : node.id };
620
    }
621
  }
622
});
623
						</code></pre>
624
					</div>
625
					<div class="col-md-4">
626
						<div id="using_json_3" class="demo"></div>
627
						<script>
628
						$(function () {
629
							$('#using_json_3').jstree({
630
								'core' : {
631
									'data' : {
632
									    'url' : function (node) {
633
									      return node.id === '#' ? './assets/ajax_roots.json' : './assets/ajax_children.json';
634
									    },
635
									    'data' : function (node) {
636
									      return { 'id' : node.id };
637
									    }
638
									}
639
								}
640
							});
641
						});
642
						</script>
643
					</div>
644
				</div>
645
				<h4>Using a function</h4>
646
				<div class="row">
647
					<div class="col-md-4">
648
						<p>You can supply a function too. That function will receive two arguments - the node being loaded and a callback function to call with the children for that node once you are ready.</p>
649
					</div>
650
					<div class="col-md-4">
651
						<pre><code>
652
$('#tree').jstree({
653
    'core' : {
654
        'data' : function (obj, cb) {
655
            cb.call(this,
656
              ['Root 1', 'Root 2']);
657
        }
658
    }});
659
						</code></pre>
660
					</div>
661
					<div class="col-md-4">
662
						<div id="using_json_4" class="demo"></div>
663
						<script>
664
						$(function () {
665
							$('#using_json_4').jstree({
666
							    'core' : {
667
							        'data' : function (obj, callback) {
668
							            callback.call(this, ['Root 1', 'Root 2']);
669
							        }
670
							    }});
671
						});
672
						</script>
673
					</div>
674
				</div>
675
 
676
				</div><!--...--><div id="events" class="tab-content-item">
677
 
678
				<div class="row">
679
					<div class="col-md-12">
680
						<h3><i class="glyphicon glyphicon-leaf"></i> Listening for events</h3>
681
					</div>
682
				</div>
683
				<div class="row">
684
					<div class="col-md-12">
685
						<p>jsTree triggers various events on the container. You can review <a href="/api/?q=.jstree%20Event">the list of all events</a> to know what to listen for.</p>
686
						<p>To get more information about the event inspect its <code>data</code> argument.</p>
687
						<p>In most cases where a node is involved you will get the whole node object passed in. If you get an ID string somewhere and want to inspect the node just use <a href="/api/?f=get_node">.get_node()</a>.</p>
688
					</div>
689
				</div>
690
				<div class="row">
691
					<div class="col-md-8">
692
						<pre><code>
693
$('#jstree')
694
  <span class="comment">// listen for event</span>
695
  <strong>.on('changed.jstree',</strong> function (e, <strong>data</strong>) {
696
    var i, j, r = [];
697
    for(i = 0, j = data.selected.length; i &lt; j; i++) {
698
      r.push(data.instance.get_node(data.selected[i]).text);
699
    }
700
    $('#event_result').html('Selected: ' + r.join(', '));
701
  })
702
  <span class="comment">// create the instance</span>
703
  .jstree();
704
						</code></pre>
705
					</div>
706
					<div class="col-md-4">
707
						<div id="using_events" class="demo">
708
							<ul>
709
								<li id="r1" class="jstree-open" data-jstree='{"selected":true}'>Root 1
710
									<ul>
711
										<li id="n1">Child 1</li>
712
										<li id="n2">Child 2</li>
713
									</ul>
714
								</li>
715
								<li id="r2" class="jstree-open">Root 2
716
									<ul>
717
										<li id="n3">Child 3</li>
718
										<li id="n4">Child 4</li>
719
									</ul>
720
								</li>
721
							</ul>
722
						</div>
723
						<div id="event_result" style="margin-top:2em; text-align:center;">&nbsp;</div>
724
						<script>
725
						$(function () {
726
							$('#using_events')
727
								.on('changed.jstree', function (e, data) {
728
									var i, j, r = [];
729
									for(i = 0, j = data.selected.length; i < j; i++) {
730
										r.push(data.instance.get_node(data.selected[i]).text);
731
									}
732
									$('#event_result').html('Selected:<br /> ' + r.join(', '));
733
								})
734
								.jstree();
735
						});
736
						</script>
737
					</div>
738
				</div>
739
 
740
				</div><!--...--><div id="interaction" class="tab-content-item">
741
 
742
				<div class="row">
743
					<div class="col-md-12">
744
						<h3><i class="glyphicon glyphicon-leaf"></i> Invoking methods on an instance</h3>
745
					</div>
746
				</div>
747
				<div class="row">
748
					<div class="col-md-12">
749
						<div class="alert alert-warning">Please keep in mind that by default all modifications to the tree are prevented (create, rename, move, delete). To enable them set <a href="/api/?q=check_callback&amp;f=$.jstree.defaults.core.check_callback">core.check_callback</a> to <code>true</code></div>
750
					</div>
751
				</div>
752
				<div class="row">
753
					<div class="col-md-4">
754
						<p>To invoke a method on an instance you must obtain a reference of the instance and invoke the method. The example shows how to obtain a reference and invoke a method.</p>
755
						<p>Check the API for <a href="/api/?q=(">a list of available methods</a>.
756
					</div>
757
					<div class="col-md-4">
758
						<pre><code>
759
<span class="comment">// 3 ways of doing the same thing</span>
760
$('#jstree').jstree(true)
761
  .select_node('mn1');
762
$('#jstree')
763
  .jstree('select_node', 'mn2');
764
$.jstree.reference('#jstree')
765
  .select_node('mn3');
766
						</code></pre>
767
					</div>
768
					<div class="col-md-4">
769
						<div style="text-align:center; margin-bottom:1em;">
770
							<button class="btn btn-info" onclick="$('#using_methods').jstree(true).select_node('mn1');">select 1</button>
771
							<button class="btn btn-info" onclick="$('#using_methods').jstree('select_node', 'mn2');">select 2</button>
772
							<button class="btn btn-info" onclick="$.jstree.reference('#using_methods').select_node('mn3');">select 3</button>
773
						</div>
774
						<div id="using_methods" class="demo">
775
							<ul>
776
								<li id="mn1">Node 1</li>
777
								<li id="mn2">Node 2</li>
778
								<li id="mn3">Node 3</li>
779
							</ul>
780
						</div>
781
						<script>
782
						$(function () {
783
							$('#using_methods').jstree();
784
						});
785
						</script>
786
					</div>
787
				</div>
788
 
789
				</div><!--...--></div>
790
 
791
			</div>
792
		</div>
793
		<!--..-->
794
		<div class="row page" id="demo">
795
			<div class="col-md-12">
796
				<div class="row">
797
					<div class="col-md-4 col-sm-8 col-xs-8">
798
						<button type="button" class="btn btn-success btn-sm" onclick="demo_create();"><i class="glyphicon glyphicon-asterisk"></i> Create</button>
799
						<button type="button" class="btn btn-warning btn-sm" onclick="demo_rename();"><i class="glyphicon glyphicon-pencil"></i> Rename</button>
800
						<button type="button" class="btn btn-danger btn-sm" onclick="demo_delete();"><i class="glyphicon glyphicon-remove"></i> Delete</button>
801
					</div>
802
					<div class="col-md-2 col-sm-4 col-xs-4" style="text-align:right;">
803
						<input type="text" value="" style="box-shadow:inset 0 0 4px #eee; width:120px; margin:0; padding:6px 12px; border-radius:4px; border:1px solid silver; font-size:1.1em;" id="demo_q" placeholder="Search" />
804
					</div>
805
				</div>
806
				<div class="row">
807
					<div class="col-md-6">
808
						<div id="jstree_demo" class="demo" style="margin-top:1em; min-height:400px;"></div>
809
						<script>
810
						function demo_create() {
811
							var ref = $('#jstree_demo').jstree(true),
812
								sel = ref.get_selected();
813
							if(!sel.length) { return false; }
814
							sel = sel[0];
815
							sel = ref.create_node(sel, {"type":"file"});
816
							if(sel) {
817
								ref.edit(sel);
818
							}
819
						};
820
						function demo_rename() {
821
							var ref = $('#jstree_demo').jstree(true),
822
								sel = ref.get_selected();
823
							if(!sel.length) { return false; }
824
							sel = sel[0];
825
							ref.edit(sel);
826
						};
827
						function demo_delete() {
828
							var ref = $('#jstree_demo').jstree(true),
829
								sel = ref.get_selected();
830
							if(!sel.length) { return false; }
831
							ref.delete_node(sel);
832
						};
833
						$(function () {
834
							var to = false;
835
							$('#demo_q').keyup(function () {
836
								if(to) { clearTimeout(to); }
837
								to = setTimeout(function () {
838
									var v = $('#demo_q').val();
839
									$('#jstree_demo').jstree(true).search(v);
840
								}, 250);
841
							});
842
 
843
							$('#jstree_demo')
844
								.jstree({
845
									"core" : {
846
										"animation" : 0,
847
										"check_callback" : true,
848
										"themes" : { "stripes" : true },
849
										'data' : {
850
											'url' : function (node) {
851
												return node.id === '#' ? './assets/ajax_demo_roots.json' : './assets/ajax_demo_children.json';
852
											},
853
											'data' : function (node) {
854
												return { 'id' : node.id };
855
											}
856
										}
857
									},
858
									"types" : {
859
										"#" : { "max_children" : 1, "max_depth" : 4, "valid_children" : ["root"] },
860
										"root" : { "icon" : "./assets/images/tree_icon.png", "valid_children" : ["default"] },
861
										"default" : { "valid_children" : ["default","file"] },
862
										"file" : { "icon" : "glyphicon glyphicon-file", "valid_children" : [] }
863
									},
864
									"plugins" : [ "contextmenu", "dnd", "search", "state", "types", "wholerow" ]
865
								});
866
						});
867
						</script>
868
					</div>
869
					<div class="col-md-6">
870
						<pre style="margin-top:1em;"><code>$('#jstree_demo').jstree({
871
  "core" : {
872
    "animation" : 0,
873
    "check_callback" : true,
874
    "themes" : { "stripes" : true },
875
    'data' : {
876
      'url' : function (node) {
877
        return node.id === '#' ?
878
          'ajax_demo_roots.json' : 'ajax_demo_children.json';
879
      },
880
      'data' : function (node) {
881
        return { 'id' : node.id };
882
      }
883
    }
884
  },
885
  "types" : {
886
    "#" : {
887
      "max_children" : 1,
888
      "max_depth" : 4,
889
      "valid_children" : ["root"]
890
    },
891
    "root" : {
892
      "icon" : "./assets/images/tree_icon.png",
893
      "valid_children" : ["default"]
894
    },
895
    "default" : {
896
      "valid_children" : ["default","file"]
897
    },
898
    "file" : {
899
      "icon" : "glyphicon glyphicon-file",
900
      "valid_children" : []
901
    }
902
  },
903
  "plugins" : [
904
    "contextmenu", "dnd", "search",
905
    "state", "types", "wholerow"
906
  ]
907
});</code></pre>
908
					</div>
909
				</div>
910
				<div class="row" style="display:none;">
911
					<div class="col-md-12">
912
						<p style="text-align:center; margin-top:2em;"><a href="http://jsfiddle.net/vakata/3khw3/">This demo is available as a jsFiddle &raquo;</a></p>
913
					</div>
914
				</div>
915
			</div>
916
		</div>
917
		<!--..-->
918
		<div class="row page" id="api">
919
			<div class="col-md-12">
920
				<div id="api_inner" style="">
921
					<div id="no_res" style="text-align:center; display:none;"><h4 style="font-size:1.1em; font-weight:bold;">Sorry, no results found.</h4><button class="btn btn-link" onclick="$('#srch').val('').keyup();">clear this search</button></div>
922
					<div id="cl_src" style="text-align:center; display:none;"><h4 style="font-size:1.1em; font-weight:bold;">This is a filtered view.</h4><button class="btn btn-link" onclick="$('#srch').val('').keyup();">clear this search</button></div>
923
				</div>
924
			</div>
925
		</div>
926
		<!--..-->
927
		<div class="row page" id="plugins">
928
			<div class="col-md-12">
929
				<div class="row">
930
					<div class="col-md-12">
931
						<h4>Plugins?</h4>
932
						<p>jsTree has some functionality moved out of the core so you can only use it when you need it. To enable a plugin use the <code>plugins</code> <a href="/api/?f=$.jstree.defaults.plugins">config option</a> and add that plugin's name to the array.</p>
933
						<p>For example enabling all the plugins can be done this way:<br/><code>"plugins" : [ "checkbox", "contextmenu", "dnd", "search", "sort", "state", "types", "unique", "wholerow" ]</code></p>
934
						<p>Here is a quick overview for each one.</p>
935
					</div>
936
				</div>
937
 
938
				<h3><i class="glyphicon glyphicon-leaf"></i>&nbsp;Checkbox plugin</h3>
939
				<div class="row" style="margin-top:3em;">
940
					<div class="col-md-4">
941
						<p>This plugin renders checkbox icons in front of each node, making multiple selection much easier. <br>It also supports tri-state behavior, meaning that if a node has a few of its children checked it will be rendered as undetermined, and state will be propagated up.</p>
942
						<p><em>Undetermined state is automatically calculated, but if you are using AJAX and loading on demand and want to render a node as underemined pass <code>"undetermined" : true</code> in its state.</em></p>
943
						<p>You can find all the <a href="/api/?q=$.jstree.defaults.checkbox">checkbox plugin config options</a> in the API.</p>
944
					</div>
945
					<div class="col-md-4">
946
<pre><code>$(function () {
947
  $("#plugins1").jstree({
948
    "checkbox" : {
949
      "keep_selected_style" : false
950
    },
951
    "plugins" : [ "checkbox" ]
952
  });
953
});</code></pre>
954
					</div>
955
					<div class="col-md-4">
956
						<div id="plugins1" class="demo plugin-demo">
957
							<ul>
958
								<li data-jstree='{"opened":true}'>Root node
959
									<ul>
960
										<li>Child node 1</li>
961
										<li>Child node 2</li>
962
									</ul>
963
								</li>
964
							</ul>
965
						</div>
966
						<script>
967
						$(function () {
968
							$("#plugins1").jstree({
969
								"checkbox" : {
970
									"keep_selected_style" : false
971
								},
972
								"plugins" : [ "checkbox" ]
973
							});
974
						});
975
						</script>
976
					</div>
977
				</div>
978
 
979
				<h3><i class="glyphicon glyphicon-leaf"></i>&nbsp;Contextmenu plugin</h3>
980
				<div class="row">
981
					<div class="col-md-4">
982
						<p>This plugin makes it possible to right click nodes and shows a list of configurable actions in a menu.</p>
983
						<p>You can find all the <a href="/api/?q=$.jstree.defaults.contextmenu">contextmenu plugin config options</a> in the API.</p>
984
					</div>
985
					<div class="col-md-4">
986
<pre><code>$(function () {
987
  $("#plugins2").jstree({
988
     "core" : {
989
       // so that create works
990
       "check_callback" : true
991
     },
992
    "plugins" : [ "contextmenu" ]
993
  });
994
});</code></pre>
995
					</div>
996
					<div class="col-md-4">
997
						<div id="plugins2" class="demo plugin-demo">
998
							<ul>
999
								<li data-jstree='{"opened":true}'>Root node
1000
									<ul>
1001
										<li>Context click me</li>
1002
									</ul>
1003
								</li>
1004
							</ul>
1005
						</div>
1006
						<script>
1007
						$(function () {
1008
							$("#plugins2")
1009
								.jstree({
1010
									"core" : {
1011
										"check_callback" : true
1012
									},
1013
									"plugins" : [ "contextmenu" ]
1014
								});
1015
						});
1016
						</script>
1017
					</div>
1018
				</div>
1019
 
1020
				<h3><i class="glyphicon glyphicon-leaf"></i>&nbsp;Drag &amp; drop plugin</h3>
1021
				<div class="row">
1022
					<div class="col-md-4">
1023
						<p>This plugin makes it possible to drag and drop tree nodes and rearrange the tree.</p>
1024
						<p>You can find all the <a href="/api/?q=$.jstree.defaults.dnd">dnd plugin config options</a> in the API.</p>
1025
					</div>
1026
					<div class="col-md-4">
1027
<pre><code>$(function () {
1028
  $("#plugins3").jstree({
1029
    "core" : {
1030
      "check_callback" : true
1031
    },
1032
    "plugins" : [ "dnd" ]
1033
  });
1034
});</code></pre>
1035
					</div>
1036
					<div class="col-md-4">
1037
						<div id="plugins3" class="demo plugin-demo">
1038
							<ul>
1039
								<li data-jstree='{"opened":true}'>Root node
1040
									<ul>
1041
										<li>Child node 1</li>
1042
										<li>Child node 2</li>
1043
									</ul>
1044
								</li>
1045
								<li>Root node 2</li>
1046
							</ul>
1047
						</div>
1048
						<script>
1049
						$(function () {
1050
							$("#plugins3").jstree({
1051
								"core" : {
1052
									"check_callback" : true
1053
								},
1054
								"plugins" : [ "dnd" ]
1055
							});
1056
						});
1057
						</script>
1058
					</div>
1059
				</div>
1060
 
1061
				<h3><i class="glyphicon glyphicon-leaf"></i>&nbsp;Search plugin</h3>
1062
				<div class="row">
1063
					<div class="col-md-4">
1064
						<p>This plugin adds the possibility to <a href="/api/?f=search(">search for items</a> in the tree and even to show only matching nodes.</p>
1065
						<p>You can find all the <a href="/api/?q=$.jstree.defaults.search">search plugin config options</a> in the API.</p>
1066
					</div>
1067
					<div class="col-md-4">
1068
<pre><code>$(function () {
1069
  $("#plugins4").jstree({
1070
    "plugins" : [ "search" ]
1071
  });
1072
  var to = false;
1073
  $('#plugins4_q').keyup(function () {
1074
    if(to) { clearTimeout(to); }
1075
    to = setTimeout(function () {
1076
      var v = $('#plugins4_q').val();
1077
      $('#plugins4').jstree(true).search(v);
1078
    }, 250);
1079
  });
1080
});</code></pre>
1081
					</div>
1082
					<div class="col-md-4">
1083
						<input type="text" id="plugins4_q" value="" class="input" style="margin:0em auto 1em auto; display:block; padding:4px; border-radius:4px; border:1px solid silver;" />
1084
						<div id="plugins4" class="demo plugin-demo">
1085
							<ul>
1086
								<li data-jstree='{"opened":true}'>Root node
1087
									<ul>
1088
										<li>Child node 1</li>
1089
										<li>Child node 2</li>
1090
									</ul>
1091
								</li>
1092
								<li>Root node 2</li>
1093
							</ul>
1094
						</div>
1095
						<script>
1096
						$(function () {
1097
							$("#plugins4").jstree({
1098
								"plugins" : [ "search" ]
1099
							});
1100
							var to = false;
1101
							$('#plugins4_q').keyup(function () {
1102
								if(to) { clearTimeout(to); }
1103
								to = setTimeout(function () {
1104
									var v = $('#plugins4_q').val();
1105
									$('#plugins4').jstree(true).search(v);
1106
								}, 250);
1107
							});
1108
						});
1109
						</script>
1110
					</div>
1111
				</div>
1112
 
1113
				<h3><i class="glyphicon glyphicon-leaf"></i>&nbsp;Sort plugin</h3>
1114
				<div class="row">
1115
					<div class="col-md-4">
1116
						<p>This plugin automatically arranges all sibling nodes according to a <a href="/api/?f=$.jstree.defaults.sort">comparison config option function</a>, which defaults to alphabetical order.</p>
1117
					</div>
1118
					<div class="col-md-4">
1119
<pre><code>$(function () {
1120
  $("#plugins5").jstree({
1121
    "plugins" : [ "sort" ]
1122
  });
1123
});</code></pre>
1124
					</div>
1125
					<div class="col-md-4">
1126
						<div id="plugins5" class="demo plugin-demo">
1127
							<ul>
1128
								<li data-jstree='{"opened":true}'>Root node
1129
									<ul>
1130
										<li>2</li>
1131
										<li>1</li>
1132
										<li>3</li>
1133
										<li>0</li>
1134
									</ul>
1135
								</li>
1136
								<li>Root node 2</li>
1137
							</ul>
1138
						</div>
1139
						<script>
1140
						$(function () {
1141
							$("#plugins5").jstree({
1142
								"plugins" : [ "sort" ]
1143
							});
1144
						});
1145
						</script>
1146
					</div>
1147
				</div>
1148
 
1149
				<h3><i class="glyphicon glyphicon-leaf"></i>&nbsp;State plugin</h3>
1150
				<div class="row">
1151
					<div class="col-md-4">
1152
						<p>This plugin saves all opened and selected nodes in the user's browser, so when returning to the same tree the previous state will be restored.</p>
1153
						<p>You can find all the <a href="/api/?q=$.jstree.defaults.state">state plugin config options</a> in the API. Make a selection and refresh this page to see the change persisted.</p>
1154
					</div>
1155
					<div class="col-md-4">
1156
<pre><code>$(function () {
1157
  $("#plugins6").jstree({
1158
    "state" : { "key" : "demo2" },
1159
    "plugins" : [ "state" ]
1160
  });
1161
});</code></pre>
1162
					</div>
1163
					<div class="col-md-4">
1164
						<div id="plugins6" class="demo plugin-demo">
1165
							<ul>
1166
								<li data-jstree='{"opened":true}'>Root node
1167
									<ul>
1168
										<li>A</li>
1169
										<li>few</li>
1170
										<li>more</li>
1171
										<li>nodes</li>
1172
									</ul>
1173
								</li>
1174
								<li>Root node 2</li>
1175
							</ul>
1176
						</div>
1177
						<script>
1178
						$(function () {
1179
							$("#plugins6").jstree({
1180
								"state" : { "key" : "demo2" },
1181
								"plugins" : [ "state" ]
1182
							});
1183
						});
1184
						</script>
1185
					</div>
1186
				</div>
1187
 
1188
				<h3><i class="glyphicon glyphicon-leaf"></i>&nbsp;Types plugin</h3>
1189
				<div class="row">
1190
					<div class="col-md-4">
1191
						<p>This plugin makes it possible to add predefined types for groups of nodes, which means to easily control nesting rules and icon for each group.</p>
1192
						<p>To set a node's type you can use <code>set_type</code> or supply a <code>type</code> property with the node's data.</p>
1193
						<p>You can find all the <a href="/api/?f=$.jstree.defaults.types">types plugin config options &amp; functions</a> in the API.</p>
1194
					</div>
1195
					<div class="col-md-4">
1196
<pre><code>$(function () {
1197
  $("#plugins7").jstree({
1198
    "types" : {
1199
      "default" : {
1200
        "icon" : "glyphicon glyphicon-flash"
1201
      },
1202
      "demo" : {
1203
        "icon" : "glyphicon glyphicon-ok"
1204
      }
1205
    },
1206
    "plugins" : [ "types" ]
1207
  });
1208
});</code></pre>
1209
					</div>
1210
					<div class="col-md-4">
1211
						<div id="plugins7" class="demo plugin-demo">
1212
							<ul>
1213
								<li data-jstree='{"opened":true, "type":"demo"}'>Root node
1214
									<ul>
1215
										<li>Node</li>
1216
									</ul>
1217
								</li>
1218
								<li>Root node 2</li>
1219
							</ul>
1220
						</div>
1221
						<script>
1222
						$(function () {
1223
							$("#plugins7").jstree({
1224
								"types" : {
1225
									"default" : {
1226
										"icon" : "glyphicon glyphicon-flash"
1227
									},
1228
									"demo" : {
1229
										"icon" : "glyphicon glyphicon-ok"
1230
									}
1231
								},
1232
								"plugins" : [ "types" ]
1233
							});
1234
						});
1235
						</script>
1236
					</div>
1237
				</div>
1238
 
1239
				<h3><i class="glyphicon glyphicon-leaf"></i>&nbsp;Unique plugin</h3>
1240
				<div class="row">
1241
					<div class="col-md-4">
1242
						<p>Enforces that no nodes with the same name can coexist as siblings. This plugin has no options, it just prevents renaming and moving nodes to a parent, which already contains a node with the same name.</p>
1243
					</div>
1244
					<div class="col-md-4">
1245
<pre><code>$(function () {
1246
  $("#plugins8").jstree({
1247
    "core" : {
1248
      "check_callback" : true
1249
    },
1250
    "plugins" : [ "unique", "dnd" ]
1251
  });
1252
});</code></pre>
1253
					</div>
1254
					<div class="col-md-4">
1255
						<div id="plugins8" class="demo plugin-demo">
1256
							<ul>
1257
								<li data-jstree='{"opened":true}'>Root node
1258
									<ul>
1259
										<li>Node</li>
1260
									</ul>
1261
								</li>
1262
								<li>Root node 2
1263
									<ul>
1264
										<li>Node</li>
1265
									</ul>
1266
								</li>
1267
							</ul>
1268
						</div>
1269
						<script>
1270
						$(function () {
1271
							$("#plugins8").jstree({
1272
								"core" : {
1273
									"check_callback" : true
1274
								},
1275
								"plugins" : [ "unique", "dnd" ]
1276
							});
1277
						});
1278
						</script>
1279
					</div>
1280
				</div>
1281
 
1282
				<h3><i class="glyphicon glyphicon-leaf"></i>&nbsp;Wholerow plugin</h3>
1283
				<div class="row">
1284
					<div class="col-md-4">
1285
						<p>Makes each node appear block level which makes selection easier. May cause slow down for large trees in old browsers.</p>
1286
					</div>
1287
					<div class="col-md-4">
1288
<pre><code>$(function () {
1289
  $("#plugins9").jstree({
1290
    "plugins" : [ "wholerow" ]
1291
  });
1292
});</code></pre>
1293
					</div>
1294
					<div class="col-md-4">
1295
						<div id="plugins9" class="demo plugin-demo">
1296
							<ul>
1297
								<li data-jstree='{"opened":true}'>Root node
1298
									<ul>
1299
										<li data-jstree='{"selected":true}'>Node</li>
1300
									</ul>
1301
								</li>
1302
								<li>Root node 2</li>
1303
							</ul>
1304
						</div>
1305
						<script>
1306
						$(function () {
1307
							$("#plugins9").jstree({
1308
								"plugins" : [ "wholerow" ]
1309
							});
1310
						});
1311
						</script>
1312
					</div>
1313
				</div>
1314
			</div>
1315
		</div>
1316
		<!--.-->
1317
	</div>
1318
	<a class="hidden-xs hidden-sm" href="https://github.com/vakata/jstree"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_green_007200.png" alt="Fork me on GitHub"></a>
1319
	<script src="./assets/jquery-1.10.2.min.js"></script>
1320
	<script src="./assets/jquery.address-1.6.js"></script>
1321
	<script src="./assets/vakata.js"></script>
1322
	<script src="./assets/dist/jstree.min.js"></script>
1323
	<script src="./assets/docs.js"></script>
1324
	<script>$.each($q,function(i,f){$(f)});$q=null;</script>
1325
</body>
1326
</html>