My favorites
▼
|
Sign in
dynatree
Dynatree is a JavaScript dynamic tree view plugin for jQuery with support for persistence, keyboard, checkboxes, drag'n'drop, and lazy loading.
Project Home
Downloads
Export to GitHub
READ-ONLY: This project has been
archived
. For more information see
this post
.
Search
Search within:
All issues
Open issues
New issues
Issues to verify
for
Advanced search
Search tips
Subscriptions
Issue
273
attachment: sample-contextmenu2.html
(8.3 KB)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Example</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<!-- jquery.contextmenu, A Beautiful Site (http://abeautifulsite.net/) -->
<!--
<script src="contextmenu/jquery.contextMenu-custom.js" type="text/javascript"></script>
<link href="contextmenu/jquery.contextMenu.css" rel="stylesheet" type="text/css" >
-->
<!-- medialize jQuery contextMenu (http://github.com/medialize/jQuery-contextMenu) -->
<!--
-->
<script src="jq.context/jquery.ui.position.js" type="text/javascript"></script>
<script src="jq.context/jquery.contextMenu.js" type="text/javascript"></script>
<link href="jq.context/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<script type="text/javascript">
// --- Implement Cut/Copy/Paste --------------------------------------------
var clipboardNode = null;
var pasteMode = null;
function copyPaste(action, node) {
switch( action ) {
case "cut":
case "copy":
clipboardNode = node;
pasteMode = action;
break;
case "paste":
if( !clipboardNode ) {
alert("Clipoard is empty.");
break;
}
if( pasteMode == "cut" ) {
// Cut mode: check for recursion and remove source
var isRecursive = false;
var cb = clipboardNode.toDict(true, function(dict){
// If one of the source nodes is the target, we must not move
if( dict.key == node.data.key )
isRecursive = true;
});
if( isRecursive ) {
alert("Cannot move a node to a sub node.");
return;
}
node.addChild(cb);
clipboardNode.remove();
} else {
// Copy mode: prevent duplicate keys:
var cb = clipboardNode.toDict(true, function(dict){
dict.title = "Copy of " + dict.title;
delete dict.key; // Remove key, so a new one will be created
});
node.addChild(cb);
}
clipboardNode = pasteMode = null;
break;
default:
alert("Unhandled clipboard action '" + action + "'");
}
};
// --- Init dynatree during startup ----------------------------------------
$(function(){
$("#tree").dynatree({
persist: true,
onActivate: function(node) {
$("#echoActivated").text(node.data.title + ", key=" + node.data.key);
},
/*
onClick: function(node, event) {
// Close menu on click
if( $(".contextMenu:visible").length > 0 ){
$(".contextMenu").hide();
// return false;
}
},
*/
onKeydown: function(node, event) {
// Eat keyboard events, when a menu is open
if( $(".contextMenu:visible").length > 0 )
return false;
switch( event.which ) {
// Open context menu on [Space] key (simulate right click)
case 32: // [Space]
$(node.span).contextMenu();
return false;
// Handle Ctrl-C, -X and -V
case 67:
if( event.ctrlKey ) { // Ctrl-C
copyPaste("copy", node);
return false;
}
break;
case 86:
if( event.ctrlKey ) { // Ctrl-V
copyPaste("paste", node);
return false;
}
break;
case 88:
if( event.ctrlKey ) { // Ctrl-X
copyPaste("cut", node);
return false;
}
break;
}
},
/*Load lazy content (to show that context menu will work for new items too)*/
onLazyRead: function(node){
node.appendAjax({
url: "sample-data2.json"
});
},
/* D'n'd, just to show it's compatible with a context menu.
See http://code.google.com/p/dynatree/issues/detail?id=174 */
dnd: {
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
onDragStart: function(node) {
return true;
},
onDragEnter: function(node, sourceNode) {
if(node.parent !== sourceNode.parent)
return false;
return ["before", "after"];
},
onDrop: function(node, sourceNode, hitMode, ui, draggable) {
sourceNode.move(node, hitMode);
}
}
}); // $.dynatree
/*
$(document).on('contextmenu.contextMenu', function(e){
alert("on contextmenu");
});
*/
// jQuery contextMenu blocks mouse events, so we have to catch them in order to
// activate the node on click
$(document).on('mousedown.contextMenu', function(e){
var node = $.ui.dynatree.getNode(e.target);
window.console && console.log("e: %o, node: %o", e, node);
node.activate();
});
$.contextMenu({
// bind menu to every dynatree node
selector: 'a.dynatree-title',
// called for every menu command
callback: function(cmd, options) {
var node = $.ui.dynatree.getNode(this);
window.console && console.log(cmd + " - " + node);
node.activate();
copyPaste(cmd, node);
},
items: {
"edit": {name: "Edit", icon: "edit"},
"cut": {name: "Cut", icon: "cut"},
"copy": {name: "Copy", icon: "copy"},
"paste": {name: "Paste", icon: "paste"},
"delete": {name: "Delete", icon: "delete"},
"sep1": "---------",
"quit": {name: "Quit", icon: "quit"}
}
}); // $.contextMenu()
}); // $(function){...}
</script>
</head>
<body class="example">
<h1>Example: Context Menu</h1>
<p class="description">
Implementation of a context menu. Right-click a node and see what happens.<br>
Also [space] key is supported to open the menu.<br>
<br>
This example also demonstrates, how to copy or move branches and how
to implement clipboard functionality.
<br>
A keyboard handler implements Cut, Copy, and Paste with <code>Ctrl-X</code>,
<code>Ctrl-C</code>, <code>Ctrl-V</code>.
</p>
<p class="description">
This sample uses the jQuery Context Menu Plugin by Rodney Rehm.
Visit <a href="http://medialize.github.com/jQuery-contextMenu/index.html">the project page at github</a> for usage and more information.
<br>
<b>NOTE:</b></br>
Please understand, that I am not able to support this plugin. There are many other context menus
out there :-)
</p>
<!-- Definition tree structure -->
<div id="tree">
<ul>
<li id="id1" title="Look, a tool tip!">item1 with key and tooltip
<li id="id2" class="activate">item2: activated on init
<li id="id3" class="folder">Folder with some children
<ul>
<li id="id3.1">Sub-item 3.1
<li id="id3.2">Sub-item 3.2
</ul>
<li id="id4" class="expanded">Document with some children (expanded on init)
<ul>
<li id="id4.1">Sub-item 4.1
<li id="id4.2">Sub-item 4.2
</ul>
<li id="id5" class="lazy folder">Lazy folder
</ul>
</div>
<div>Selected node: <span id="echoActivated">-</span></div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>
Powered by
Google Project Hosting