1 |
5703
|
leinfelder
|
<!DOCTYPE html
|
2 |
|
|
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
3 |
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
4 |
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
5 |
|
|
<head>
|
6 |
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
7 |
|
|
<title>jsTree v.1.0 - CRRM documentation</title>
|
8 |
|
|
<script type="text/javascript" src="../_lib/jquery.js"></script>
|
9 |
|
|
<script type="text/javascript" src="../_lib/jquery.cookie.js"></script>
|
10 |
|
|
<script type="text/javascript" src="../_lib/jquery.hotkeys.js"></script>
|
11 |
|
|
<script type="text/javascript" src="../jquery.jstree.js"></script>
|
12 |
|
|
|
13 |
|
|
<link type="text/css" rel="stylesheet" href="syntax/!style.css"/>
|
14 |
|
|
<link type="text/css" rel="stylesheet" href="!style.css"/>
|
15 |
|
|
<script type="text/javascript" src="syntax/!script.js"></script>
|
16 |
|
|
</head>
|
17 |
|
|
<body>
|
18 |
|
|
<div id="container">
|
19 |
|
|
|
20 |
|
|
<h1>jsTree v.1.0 - CRRM plugin</h1>
|
21 |
|
|
<h2>Description</h2>
|
22 |
|
|
<div id="description">
|
23 |
|
|
<p>The <code>CRRM</code> plugin handles creating, renaming, removing and moving nodes by the user.</p>
|
24 |
|
|
</div>
|
25 |
|
|
|
26 |
|
|
<h2 id="configuration">Configuration</h2>
|
27 |
|
|
<div class="panel configuration">
|
28 |
|
|
<h3>input_width_limit</h3>
|
29 |
|
|
<p class="meta">A number. Default is <code>200</code>.</p>
|
30 |
|
|
<p>When renaming (or creating) nodes the input for the text will autosize - this number sets the maximum size for the input.</p>
|
31 |
|
|
|
32 |
|
|
<h3>move</h3>
|
33 |
|
|
<p class="meta">An object, containing various settings - see below for more.</p>
|
34 |
|
|
|
35 |
|
|
<h3>move.always_copy</h3>
|
36 |
|
|
<p class="meta"><code>true</code>, <code>false</code> or <code>"multitree"</code>. Default is <code>false</code>.</p>
|
37 |
|
|
<p>Defines how moves are handled - if set to <code>true</code> every move will be forced to a copy (leaving the original node in place). If set to <code>"multitree"</code> only moves between trees will be forced to a copy.</p>
|
38 |
|
|
|
39 |
|
|
<h3>move.open_onmove</h3>
|
40 |
|
|
<p class="meta">A Boolean. Default is <code>true</code>.</p>
|
41 |
|
|
<p>If set to true, when moving a node to a new, closed parent, the parent node will be opened when the move completes.</p>
|
42 |
|
|
|
43 |
|
|
<h3>move.default_position</h3>
|
44 |
|
|
<p class="meta">A string or a number. Default is <code>"last"</code>.</p>
|
45 |
|
|
<p>The default position to move to if no position is specified. This can be a zero based index to position the element at a specific point among the new parent's current children. You can also use one of these strings: <code>"before"</code>, <code>"after"</code>, <code>"inside"</code>, <code>"first"</code>, <code>"last"</code>.</p>
|
46 |
|
|
|
47 |
|
|
<h3>move.check_move</h3>
|
48 |
|
|
<p class="meta">A function. Default is <code>function (m) { return true; }</code>.</p>
|
49 |
|
|
<p>The callback function enabling you to prevent some moves - just return <code>false</code>. The <code>m</code> parameter is the move object generated by jstree. The object follows the structure described in <a href="core.html#_get_move">._get_move</a>.</p>
|
50 |
|
|
|
51 |
|
|
</div>
|
52 |
|
|
|
53 |
|
|
<h2 id="demos">Demos</h2>
|
54 |
|
|
<div class="panel">
|
55 |
|
|
|
56 |
|
|
<h3>Creating nodes</h3>
|
57 |
|
|
<input type="button" class="button" value="create_1" id="create_1" style="float:left;" />
|
58 |
|
|
<input type="button" class="button" value="create_2" id="create_2" style="float:left;" />
|
59 |
|
|
<input type="button" class="button" value="create_3" id="create_3" style="" />
|
60 |
|
|
<div id="demo1" class="demo">
|
61 |
|
|
<ul>
|
62 |
|
|
<li id="phtml_1">
|
63 |
|
|
<a href="#">Root node 1</a>
|
64 |
|
|
<ul>
|
65 |
|
|
<li id="phtml_2">
|
66 |
|
|
<a href="#">Child node 1</a>
|
67 |
|
|
</li>
|
68 |
|
|
<li id="phtml_3">
|
69 |
|
|
<a href="#">Child node 2</a>
|
70 |
|
|
</li>
|
71 |
|
|
</ul>
|
72 |
|
|
</li>
|
73 |
|
|
<li id="phtml_4">
|
74 |
|
|
<a href="#">Root node 2</a>
|
75 |
|
|
</li>
|
76 |
|
|
</ul>
|
77 |
|
|
</div>
|
78 |
|
|
<script type="text/javascript" class="source">
|
79 |
|
|
$(function () {
|
80 |
|
|
$("#create_1").click(function () {
|
81 |
|
|
$("#demo1").jstree("create");
|
82 |
|
|
});
|
83 |
|
|
$("#create_2").click(function () {
|
84 |
|
|
$("#demo1").jstree("create","#phtml_1","first","Enter a new name");
|
85 |
|
|
});
|
86 |
|
|
$("#create_3").click(function () {
|
87 |
|
|
$("#demo1").jstree("create",-1,false,"No rename",false,true);
|
88 |
|
|
});
|
89 |
|
|
$("#demo1").jstree({
|
90 |
|
|
"ui" : {
|
91 |
|
|
"initially_select" : [ "phtml_2" ]
|
92 |
|
|
},
|
93 |
|
|
"core" : { "initially_open" : [ "phtml_1" ] },
|
94 |
|
|
"plugins" : [ "themes", "html_data", "ui", "crrm" ]
|
95 |
|
|
});
|
96 |
|
|
});
|
97 |
|
|
</script>
|
98 |
|
|
|
99 |
|
|
<h3>Removing nodes</h3>
|
100 |
|
|
<input type="button" class="button" value="remove_1" id="remove_1" style="float:left;" />
|
101 |
|
|
<input type="button" class="button" value="remove_2" id="remove_2" style="" />
|
102 |
|
|
<div id="demo2" class="demo">
|
103 |
|
|
<ul>
|
104 |
|
|
<li id="rhtml_1">
|
105 |
|
|
<a href="#">Root node 1</a>
|
106 |
|
|
<ul>
|
107 |
|
|
<li id="rhtml_2">
|
108 |
|
|
<a href="#">Child node 1</a>
|
109 |
|
|
</li>
|
110 |
|
|
<li id="rhtml_3">
|
111 |
|
|
<a href="#">Child node 2</a>
|
112 |
|
|
</li>
|
113 |
|
|
</ul>
|
114 |
|
|
</li>
|
115 |
|
|
<li id="rhtml_4">
|
116 |
|
|
<a href="#">Root node 2</a>
|
117 |
|
|
</li>
|
118 |
|
|
</ul>
|
119 |
|
|
</div>
|
120 |
|
|
<script type="text/javascript" class="source">
|
121 |
|
|
$(function () {
|
122 |
|
|
$("#remove_1").click(function () {
|
123 |
|
|
$("#demo2").jstree("remove");
|
124 |
|
|
});
|
125 |
|
|
$("#remove_2").click(function () {
|
126 |
|
|
$("#demo2").jstree("remove","#rhtml_1");
|
127 |
|
|
});
|
128 |
|
|
$("#demo2").jstree({
|
129 |
|
|
"ui" : {
|
130 |
|
|
"initially_select" : [ "rhtml_2" ]
|
131 |
|
|
},
|
132 |
|
|
"core" : { "initially_open" : [ "rhtml_1" ] },
|
133 |
|
|
"plugins" : [ "themes", "html_data", "ui", "crrm" ]
|
134 |
|
|
});
|
135 |
|
|
});
|
136 |
|
|
</script>
|
137 |
|
|
|
138 |
|
|
<h3>Renaming nodes</h3>
|
139 |
|
|
<input type="button" class="button" value="rename_1" id="rename_1" style="float:left;" />
|
140 |
|
|
<input type="button" class="button" value="rename_2" id="rename_2" style="" />
|
141 |
|
|
<div id="demo3" class="demo">
|
142 |
|
|
<ul>
|
143 |
|
|
<li id="shtml_1">
|
144 |
|
|
<a href="#">Root node 1</a>
|
145 |
|
|
<ul>
|
146 |
|
|
<li id="shtml_2">
|
147 |
|
|
<a href="#">Child node 1</a>
|
148 |
|
|
</li>
|
149 |
|
|
<li id="shtml_3">
|
150 |
|
|
<a href="#">Child node 2</a>
|
151 |
|
|
</li>
|
152 |
|
|
</ul>
|
153 |
|
|
</li>
|
154 |
|
|
<li id="shtml_4">
|
155 |
|
|
<a href="#">Root node 2</a>
|
156 |
|
|
</li>
|
157 |
|
|
</ul>
|
158 |
|
|
</div>
|
159 |
|
|
<script type="text/javascript" class="source">
|
160 |
|
|
$(function () {
|
161 |
|
|
$("#rename_1").click(function () {
|
162 |
|
|
$("#demo3").jstree("rename");
|
163 |
|
|
});
|
164 |
|
|
$("#rename_2").click(function () {
|
165 |
|
|
$("#demo3").jstree("rename","#shtml_1");
|
166 |
|
|
});
|
167 |
|
|
$("#demo3").jstree({
|
168 |
|
|
"ui" : {
|
169 |
|
|
"initially_select" : [ "shtml_2" ]
|
170 |
|
|
},
|
171 |
|
|
"core" : { "initially_open" : [ "shtml_1" ] },
|
172 |
|
|
"plugins" : [ "themes", "html_data", "ui", "crrm" ]
|
173 |
|
|
});
|
174 |
|
|
});
|
175 |
|
|
</script>
|
176 |
|
|
|
177 |
|
|
<h3>Moving nodes</h3>
|
178 |
|
|
<p><strong>move_1</strong> uses the default position - <code>"first"</code></p>
|
179 |
|
|
<p><strong>move_2</strong> specifies a position - <code>"before"</code> - meaning that the node specified as a first argument will come above the node specified as the second argument</p>
|
180 |
|
|
<p><strong>move_3</strong> will never work, because of the specified <code>check_move</code> function which prevents the first root node from being moved</p>
|
181 |
|
|
<input type="button" class="button" value="move_1" id="move_1" style="float:left;" />
|
182 |
|
|
<input type="button" class="button" value="move_2" id="move_2" style="float:left;" />
|
183 |
|
|
<input type="button" class="button" value="move_3" id="move_3" style="" />
|
184 |
|
|
<div id="demo4" class="demo">
|
185 |
|
|
<ul>
|
186 |
|
|
<li id="thtml_1">
|
187 |
|
|
<a href="#">Root node 1</a>
|
188 |
|
|
<ul>
|
189 |
|
|
<li id="thtml_2">
|
190 |
|
|
<a href="#">Child node 1</a>
|
191 |
|
|
</li>
|
192 |
|
|
<li id="thtml_3">
|
193 |
|
|
<a href="#">Child node 2</a>
|
194 |
|
|
</li>
|
195 |
|
|
</ul>
|
196 |
|
|
</li>
|
197 |
|
|
<li id="thtml_4">
|
198 |
|
|
<a href="#">Root node 2</a>
|
199 |
|
|
</li>
|
200 |
|
|
</ul>
|
201 |
|
|
</div>
|
202 |
|
|
<script type="text/javascript" class="source">
|
203 |
|
|
$(function () {
|
204 |
|
|
$("#move_1").click(function () {
|
205 |
|
|
$("#demo4").jstree("move_node","#thtml_4","#thtml_1");
|
206 |
|
|
});
|
207 |
|
|
$("#move_2").click(function () {
|
208 |
|
|
$("#demo4").jstree("move_node","#thtml_4","#thtml_1", "before");
|
209 |
|
|
});
|
210 |
|
|
$("#move_3").click(function () {
|
211 |
|
|
$("#demo4").jstree("move_node","#thtml_1","#thtml_4");
|
212 |
|
|
});
|
213 |
|
|
$("#demo4").jstree({
|
214 |
|
|
"crrm" : {
|
215 |
|
|
"move" : {
|
216 |
|
|
"default_position" : "first",
|
217 |
|
|
"check_move" : function (m) { return (m.o[0].id === "thtml_1") ? false : true; }
|
218 |
|
|
}
|
219 |
|
|
},
|
220 |
|
|
"ui" : {
|
221 |
|
|
"initially_select" : [ "thtml_2" ]
|
222 |
|
|
},
|
223 |
|
|
"core" : { "initially_open" : [ "thtml_1" ] },
|
224 |
|
|
"plugins" : [ "themes", "html_data", "ui", "crrm" ]
|
225 |
|
|
});
|
226 |
|
|
});
|
227 |
|
|
</script>
|
228 |
|
|
|
229 |
|
|
</div>
|
230 |
|
|
|
231 |
|
|
<h2 id="api">API</h2>
|
232 |
|
|
<div class="panel api">
|
233 |
|
|
|
234 |
|
|
<h3 id="_show_input">._show_input ( node , callback )</h3>
|
235 |
|
|
<p>Renders an input field in a node. Used only internally.</p>
|
236 |
|
|
|
237 |
|
|
<h3 id="rename">.rename ( node )</h3>
|
238 |
|
|
<p>Sets a node in rename mode and when the user has entered changes, an event is triggered.</p>
|
239 |
|
|
<ul class="arguments">
|
240 |
|
|
<li>
|
241 |
|
|
<code class="tp">mixed</code> <strong>node</strong>
|
242 |
|
|
<p>This can be a DOM node, jQuery node or selector pointing to an element within the tree. If you use the UI plugin - pass <code>null</code> to use the currently selected item.</p>
|
243 |
|
|
</li>
|
244 |
|
|
</ul>
|
245 |
|
|
|
246 |
|
|
<h3 id="create">.create ( node , position , js , callback , skip_rename )</h3>
|
247 |
|
|
<p>Creates a new node. Triggers an event.</p>
|
248 |
|
|
<ul class="arguments">
|
249 |
|
|
<li>
|
250 |
|
|
<code class="tp">mixed</code> <strong>node</strong>
|
251 |
|
|
<p>This can be a DOM node, jQuery node or selector pointing to the element you want to create in (or next to). If you use the UI plugin - pass <code>null</code> to use the currently selected item.</p>
|
252 |
|
|
</li>
|
253 |
|
|
<li>
|
254 |
|
|
<code class="tp">mixed</code> <strong>position</strong>
|
255 |
|
|
<p>The position of the newly created node. This can be a zero based index to position the element at a specific point among the current children. You can also pass in one of those strings: <code>"before"</code>, <code>"after"</code>, <code>"inside"</code>, <code>"first"</code>, <code>"last"</code>.</p>
|
256 |
|
|
</li>
|
257 |
|
|
<li>
|
258 |
|
|
<code class="tp">object</code> <strong>js</strong>
|
259 |
|
|
<p>The data for the newly created node. Consists of three keys:</p><p style="margin-left:25px;"><code class="tp">attr</code> - an object of attributes (same used for <code>jQuery.attr()</code>. You can omit this key;<br /><code class="tp">state</code> - a string - either <code>"open"</code> or <code>"closed"</code>, for a leaf node - omit this key;<br /><code class="tp">data</code> - a string or an object - if a string is passed it is used for the title of the node, if an object is passed there are two keys you can specify: <code>attr</code> and <code>title</code>;</p>
|
260 |
|
|
</li>
|
261 |
|
|
<li>
|
262 |
|
|
<code class="tp">function</code> <strong>callback</strong>
|
263 |
|
|
<p>A function to be executed once the node is created. You'd be better off waiting for the event.</p>
|
264 |
|
|
</li>
|
265 |
|
|
<li>
|
266 |
|
|
<code class="tp">bool</code> <strong>skip_rename</strong>
|
267 |
|
|
<p>Skips the user input step. The node is created with the data you have supplied.</p>
|
268 |
|
|
</li>
|
269 |
|
|
</ul>
|
270 |
|
|
|
271 |
|
|
<h3 id="remove">.remove ( node )</h3>
|
272 |
|
|
<p>Removes a node. Triggers an event.</p>
|
273 |
|
|
<ul class="arguments">
|
274 |
|
|
<li>
|
275 |
|
|
<code class="tp">mixed</code> <strong>node</strong>
|
276 |
|
|
<p>This can be a DOM node, jQuery node or selector pointing to an element within the tree. If you use the UI plugin - pass <code>null</code> to use the currently selected items.</p>
|
277 |
|
|
</li>
|
278 |
|
|
</ul>
|
279 |
|
|
|
280 |
|
|
<div style="height:1px; visibility:hidden; overflow:hidden;"><span id="check_move"> </span></div>
|
281 |
|
|
<h3 id="move_node">.check_move ( ), .move_node ( )</h3>
|
282 |
|
|
<p>Both functions are overwritten from the <a href="core.html#check_move">core</a> in order to implement the new functionality.</p>
|
283 |
|
|
|
284 |
|
|
<h3 id="cut">.cut ( node )</h3>
|
285 |
|
|
<p>Cuts a node (prepares it for pasting).</p>
|
286 |
|
|
<ul class="arguments">
|
287 |
|
|
<li>
|
288 |
|
|
<code class="tp">mixed</code> <strong>node</strong>
|
289 |
|
|
<p>This can be a DOM node, jQuery node or selector pointing to an element within the tree. If you use the UI plugin - pass <code>null</code> to use the currently selected item.</p>
|
290 |
|
|
</li>
|
291 |
|
|
</ul>
|
292 |
|
|
|
293 |
|
|
<h3 id="copy">.copy ( node )</h3>
|
294 |
|
|
<p>Copies a node (prepares it for pasting).</p>
|
295 |
|
|
<ul class="arguments">
|
296 |
|
|
<li>
|
297 |
|
|
<code class="tp">mixed</code> <strong>node</strong>
|
298 |
|
|
<p>This can be a DOM node, jQuery node or selector pointing to an element within the tree. If you use the UI plugin - pass <code>null</code> to use the currently selected item.</p>
|
299 |
|
|
</li>
|
300 |
|
|
</ul>
|
301 |
|
|
|
302 |
|
|
<h3 id="paste">.paste ( node )</h3>
|
303 |
|
|
<p>Pastes copied or cut nodes inside a node.</p>
|
304 |
|
|
<ul class="arguments">
|
305 |
|
|
<li>
|
306 |
|
|
<code class="tp">mixed</code> <strong>node</strong>
|
307 |
|
|
<p>This can be a DOM node, jQuery node or selector pointing to an element within the tree. If you use the UI plugin - pass <code>null</code> to use the currently selected item.</p>
|
308 |
|
|
</li>
|
309 |
|
|
</ul>
|
310 |
|
|
|
311 |
|
|
</div>
|
312 |
|
|
|
313 |
|
|
</div>
|
314 |
|
|
</body>
|
315 |
|
|
</html>
|