-
Notifications
You must be signed in to change notification settings - Fork 5
/
behavior.htm
252 lines (249 loc) · 12.1 KB
/
behavior.htm
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
250
251
252
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Jeegoocontext, a jQuery contextmenu plugin</title>
<link href="style.css" rel="Stylesheet" type="text/css" />
<!-- Context menu default skin -->
<link href="jeegoocontext/skins/cm_default/style.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jeegoocontext/jquery.jeegoocontext-2.0.0.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
$('.context').jeegoocontext('menu', {
widthOverflowOffset: 0,
heightOverflowOffset: 1,
submenuLeftOffset: -4,
submenuTopOffset: -5,
onSelect: function(e, context){
if($(this).hasClass('disabled'))
{
if(confirm('These options are disabled. Do you want to enable these options?'))$(this).removeClass('disabled');
$(context).animate({
borderWidth: '0',
paddingLeft: '0',
paddingTop: '0',
paddingBottom: '0',
paddingRight: '0'
}, 200);
return true;
}
switch($(this).attr('id'))
{
case 'style_italic':
$(context).css('fontStyle', 'italic');
break;
case 'style_normal':
$(context).css('fontStyle', 'normal');
break;
case 'weight_bold':
$(context).css('fontWeight', 'bold');
break;
case 'weight_normal':
$(context).css('fontWeight', 'normal');
break;
case 'size_large':
$(context).css('fontSize', '1.5em');
break;
case 'size_normal':
$(context).css('fontSize', '1em');
break;
case 'red':
$(context).css('color', 'Red');
break;
case 'green':
$(context).css('color', 'Green');
break;
case 'blue':
$(context).css('color', 'Blue');
break;
case 'lh_normal':
$(context).css('lineHeight', 'normal');
break;
case 'lh_14':
$(context).css('lineHeight', '1.4em');
break;
case 'lh_16':
$(context).css('lineHeight', '1.6em');
break;
case 'lh_18':
$(context).css('lineHeight', '1.8em');
break;
case 'title_h1':
$(context).after('<h1 class="context">' + $(this).text() + '</h1>');
break;
case 'title_h2':
$(context).after('<h2 class="context">' + $(this).text() + '</h2>');
break;
case 'title_h3':
$(context).after('<h3 class="context">' + $(this).text() + '</h3>');
break;
case 'title_h4':
$(context).after('<h4 class="context">' + $(this).text() + '</h4>');
break;
case 'title_h5':
$(context).after('<h5 class="context">' + $(this).text() + '</h5>');
break;
case 'title_h6':
$(context).after('<h6 class="context">' + $(this).text() + '</h6>');
break;
case 'disable':
if(confirm('Are you sure?'))$(context).nojeegoocontext();
break;
case 'delete':
if(confirm('Are you sure?'))$(context).unbind().remove();
break;
default:
return false;
}
$(context).animate({
borderWidth: '0',
paddingLeft: '0',
paddingTop: '0',
paddingBottom: '0',
paddingRight: '0'
}, 200);
},
onHover: function(e, context){
if($(this).hasClass('disabled'))return false;
},
onShow: function(e, context){
$(this).find('.ok').remove();
if($(context).css('fontWeight').toString().toLowerCase() == 'bold')
{
$('#weight_normal').removeClass('icon').find('.ok').remove();
$('#weight_bold').addClass('icon').prepend('<span class="icon ok"></span>');
}
else
{
$('#weight_bold').removeClass('icon').find('.ok').remove();
$('#weight_normal').addClass('icon').prepend('<span class="icon ok"></span>');
}
$('.active').animate({
borderWidth: '0',
paddingLeft: '0',
paddingTop: '0',
paddingBottom: '15px',
paddingRight: '0',
marginBottom: '0'
}, 200);
$(context).animate({
borderWidth: '3px',
paddingLeft: '5px',
paddingTop: '5px',
paddingBottom: '5px',
paddingRight: '5px',
marginBottom: '15px'
}, 200);
},
onHide: function(e, context){
$(context).animate({
borderWidth: '0',
paddingLeft: '0',
paddingTop: '0',
paddingBottom: '15px',
paddingRight: '0',
marginBottom: '0'
}, 200);
}
});
});
//]]>
</script>
</head>
<body>
<div id="outer">
<div id="header">
<h1><span class="jg_red">J</span><span class="jg_green">ee</span><span class="jg_yellow">g</span><span class="jg_blue">oo</span>context, <span style="font-size:.7em">a jQuery contextmenu plugin</span></h1>
<h2>Copyright © 2009 - 2013 <a href="http://www.tweego.nl" target="_blank">TweeGo</a>: <a href="http://www.tweego.nl/jeegoocontext" target="_blank">http://www.tweego.nl/jeegoocontext</a></h2>
</div>
<div id="content">
<h2 class="context">Customized behavior via callbacks</h2>
<p>
<strong>
All areas on this page except for this one can be customized via the contextmenu.
New titles can be added to the document via the menu.
These titles are automatically bound to the menu.
</strong>
</p>
<p class="context">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elementum dui nec lectus tempor vel porttitor purus malesuada. Morbi id sapien magna, eu consequat mauris. Nunc placerat convallis gravida. Nam tincidunt blandit quam, at congue justo tristique et.
</p>
<h2 class="context">Duis</h2>
<p class="context">
Duis justo leo, consequat sed molestie et, mollis nec sapien. Suspendisse vel arcu tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus vestibulum fringilla enim, vel porta justo accumsan sed. Duis risus ipsum, vulputate et porttitor non, laoreet quis libero. Donec tincidunt felis ullamcorper purus faucibus ac viverra urna pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit eros, tempus vel sagittis ac, blandit vel magna. Suspendisse erat libero, fermentum eu condimentum sit amet, ornare ac ligula. Vivamus non vestibulum turpis.
</p>
<h2 class="context">Nullam</h2>
<p class="context">
Nullam et tincidunt quam. Vestibulum ut velit risus. Pellentesque sed diam eget nibh sodales ultrices nec eget metus. Vestibulum gravida ultrices metus sed laoreet. Aenean quis tempus enim. Suspendisse potenti. In rutrum quam quis sapien euismod consectetur. Aenean vel ante ac neque pulvinar blandit. Nam vulputate vulputate nisi, et sollicitudin orci pretium a. In tempor congue justo viverra sollicitudin. Etiam molestie, orci ut porttitor tincidunt, risus tortor fermentum nunc, scelerisque semper nisi diam at augue. Integer eu tellus risus. Aliquam vel facilisis ipsum. Nullam sit amet eros id elit facilisis congue at nec arcu.
</p>
<h2 class="context">Etiam</h2>
<p class="context">
Etiam viverra nibh diam, sed congue elit. Pellentesque purus erat, dictum ut consequat vel, facilisis ac enim. Aenean a accumsan quam. Vestibulum eget auctor augue. Vestibulum purus tortor, volutpat pulvinar pretium et, ornare in sapien. Cras eget nisl at lorem imperdiet aliquet non sit amet diam. Nulla eu aliquam dolor. Praesent non est ante. Vestibulum sed nibh in lectus euismod malesuada. Nulla dignissim, ante a tincidunt convallis, est tellus vulputate mauris, id rutrum tortor arcu et orci.
</p>
<br />
<a href="multiple.htm" style="float:right">Multiple contextmenus >></a>
<a href="advanced.htm"><< Advanced styling</a>
</div>
</div>
<!-- Contextmenu -->
<ul id="menu" class="jeegoocontext cm_default">
<li>
Font
<ul>
<li>
Font-style
<ul>
<li id="style_italic">Italic</li>
<li id="style_normal">Normal</li>
</ul>
</li>
<li>
Font-weight
<ul>
<li id="weight_bold">Bold</li>
<li id="weight_normal">Normal</li>
</ul>
</li>
<li>
Font-size
<ul>
<li id="size_large">Large</li>
<li id="size_normal">Normal</li>
</ul>
</li>
</ul>
</li>
<li>
Color
<ul>
<li id="red">Red</li>
<li id="green">Green</li>
<li id="blue">Blue</li>
</ul>
</li>
<li class="disabled">
Line-height
<ul>
<li id="lh_normal">normal</li>
<li id="lh_14">1.4em</li>
<li id="lh_16">1.6em</li>
<li id="lh_18">1.8em</li>
</ul>
</li>
<li>
Add title
<ul>
<li id="title_h1">Title H1</li>
<li id="title_h2">Title H2</li>
<li id="title_h3">Title H3</li>
<li id="title_h4">Title H4</li>
<li id="title_h5">Title H5</li>
<li id="title_h6">Title H6</li>
</ul>
</li>
<li class="separator"></li>
<li id="delete">Delete</li>
</ul>
</body>
</html>