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
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
|
<?xml version="1.0" ?>
<!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>jQuery menu plugin demo page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jsmenu.nocache.js" ></script>
<script type="text/javascript">
// JsQuery will run this function after it is asynchronously loaded
onJsQueryLoad = function(){
var options = {minWidth: 120, arrowSrc: 'arrow_right.gif', copyClassAttr: true, onClick: function(e, menuItem){
alert('you clicked item "' + $(this).text() + '"');
}};
$('#menuone').menu(options);
var items = [ {src: 'test', url:'http://www.jquery.com'},
{src: ''}, // separator
{src: 'test2', subMenu: [ {src: 'sub 1'},
{src: 'sub 2', url: 'http://p.sohei.org', target: '_blank'},
{src: 'sub 3'}]}];
$('#menutwo').menu(options, items);
$('#menuthree').menu(options);
$('#menufive>img').menu(options, '#menufivelist');
//creating a menu without items
var menu = new $.Menu('#menufour', null, options);
//adding items to the menu
menu.addItems([
new $.MenuItem({src: 'test', url:'http://www.jquery.com'}, options),
new $.MenuItem({src: ''}) // separator
]);
var itemWithSubmenu = new $.MenuItem({src: 'test2'}, options);
//creating a menu with items (as child of itemWithSubmenu)
new $.Menu(itemWithSubmenu, [
new $.MenuItem({src: 'sub 1'}, options),
new $.MenuItem({src: 'sub 2', url: 'http://p.sohei.org', target: '_blank'}, options),
new $.MenuItem({src: 'sub 3'}, options)
], options);
//adding the submenu to the main menu
menu.addItem(itemWithSubmenu);
}
// If jsQuery or jQuery was already loaded we use the normal way
if (window.$) {
$(document).ready(onJsQueryLoad);
onJsQueryLoad = null;
}
-->
</script>
</head>
<body>
<div id="header">
<div class="title">jQuery Menu plugin demo</div>
<div class="link"><a href="http://p.sohei.org/jquery-plugins/menu">plugin page</a></div>
</div>
<div class="exa">
<h1>Available options:</h1>
options which affect the menu:
<ul>
<li><strong>showDelay</strong> - The number of milliseconds to wait before opening the menu after hovering over the target. Default value: 200</li>
<li><strong>hideDelay</strong> - The number of milliseconds to wait before closing the menu. Default value: 200</li>
<li><strong>hoverOpenDelay</strong> - The number of milliseconds to wait before opening the topmost-menu (root) (without clicking it!). Default value: 0 (disabled!)</li>
<li><strong>offsetTop</strong> - The number of pixels to offset the position of the topmost-menu (root) to the top. Default value: 0</li>
<li><strong>offsetLeft</strong> - The number of pixels to offset the position of the topmost-menu (root) to the left. Default value: 0</li>
<li><strong>minWidth</strong> - The minimal number of pixels of the menus width. Default value: 0</li></li>
<li><strong>onOpen</strong> - Callback function which is triggered when a menu is opened. Default value: null</li>
<li><strong>onClose</strong> - Callback function which is triggered when a menu is closed. Default value: null</li>
</ul>
options which affect the menuItems:
<ul>
<li><strong>onClick</strong> - Callback function which is triggered when a menuItem is clicked. The passed parameters are: the event object and the menuItem instance. Default value: null</li>
<li><strong>arrowSrc</strong> - URL of the image to be used as an arrow indicating a submenu. Default value: null (no arrow image!)</li>
</ul>
options which are only used, when building a menu from HTML markup:
<ul>
<li><strong>copyClassAttr</strong> - Copies the class attribute of the LI elements to the equivalent menuItems. Default value: false</li>
</ul>
</div>
<div class="exa">
<h1>Example one:</h1>
<ul>
<li>create a menubar from an unordered list</li>
<li>used on an unordered list, the plugin takes its direct <li>-children, which will be the root items (File, Edit...),
and searches each for an <ul>-child, which holds the menu-items (New window, Save, Print...).</li>
<li>empty <li>-elements are used as seperators</li>
</ul>
<div class="codeheader">JavaScript code:</div>
<pre name="code" class="JScript">
var options = {minWidth: 120, arrowSrc: 'arrow_right.gif', onClick: function(e, menuItem){
alert('you clicked item "' + $(this).text() + '"');
}};
$('#menuone').menu(options);
</pre>
<div class="codeheader">HTML markup:</div>
<pre name="code" class="html">
<!-- note: the plugin doesn't need the classes, they're only used for styling! -->
<ul id="menuone" class="menu">
<li class="menumain">File
<ul><li>New window</li>
<li></li> <!-- separator -->
<li>Save...</li>
<li>Print...</li>
<li></li> <!-- separator -->
<li>Exit</li>
</ul>
</li>
<li class="menumain">Edit
<ul><li>Undo</li>
<li>Redo</li>
<li></li> <!-- separator -->
<li>Cut</li>
<li>Copy</li>
<li>Paste<ul><li>All</li><li>Something</li></ul></li>
<li>Delete</li>
</ul>
</li>
<!-- ...and even more... -->
</ul>
</pre>
<div class="resultheader">Result:</div>
<div class="result" style="padding:0;">
<div style="border-bottom: 1px solid #000;background:#eee;">
<ul id="menuone" class="menu">
<li class="menumain">File
<ul><li>New window</li>
<li></li>
<li>Save...</li>
<li>Print...</li>
<li></li>
<li>Exit</li>
</ul>
</li>
<li class="menumain">Edit
<ul><li>Undo</li>
<li>Redo</li>
<li></li>
<li>Cut</li>
<li>Copy</li>
<li>Paste<ul><li>All</li><li>Something</li></ul></li>
<li>Delete</li>
</ul>
</li>
<li class="menumain">Bookmarks
<ul><li>Bookmark manager</li>
<li></li>
<li>some bookmark</li>
<li>another bookmark</li>
<li></li>
<li>Imported bookmarks
<ul><li>bookmark one</li>
<li>bookmark two</li>
<li>bookmark three</li>
</ul>
</li>
</ul>
</li>
<li class="menumain" style="float:right;">Help
<ul><li>Help index</li>
<li></li>
<li>About...
<ul>
<li>me</li>
<li>you</li>
<li>them</li>
</ul>
</li>
</ul>
</li>
</ul>
<div style="clear:both;"></div>
</div>
<p>..some content..</p>
<p>..some content..</p>
<p>..some content..</p>
</div>
</div>
<div class="exa">
<h1>Example two:</h1>
<ul>
<li>create a menu from javascript and open it when clicking on the element with the id "menutwo"</li>
<li>when a second parameter ist passed (items), the plugin will use it as menu content</li>
</ul>
<div class="codeheader">JavaScript code:</div>
<pre name="code" class="JScript">
var options = {minWidth: 120, arrowSrc: 'arrow_right.gif'};
var items = [ {src: 'test', url:'http://www.jquery.com'},
{src: ''}, /* separator */
{src: 'test2', subMenu: [ {src: 'sub 1'},
{src: 'sub 2', url: 'http://p.sohei.org', target: '_blank'},
{src: 'sub 3'}]}];
$('#menutwo').menu(options, items);
</pre>
<div class="codeheader">HTML markup:</div>
<pre name="code" class="html">
<p><span id="menutwo">Menu Button</span></p>
</pre>
<div class="resultheader">Result:</div>
<div class="result">
<p>..some content..</p>
<p><span id="menutwo">Menu Button</span></p>
<p>..some content..</p>
</div>
</div>
<div class="exa">
<h1>Example three:</h1>
<ul>
<li>same as example two, but without passing the items as parameter to the plugin</li>
<li>the plugin looks inside the elment for an unordered list, which holds the menu content</li>
</ul>
<div class="codeheader">JavaScript code:</div>
<pre name="code" class="JScript">
var options = {minWidth: 120, arrowSrc: 'arrow_right.gif'};
$('#menuthree').menu(options);
</pre>
<div class="codeheader">HTML markup:</div>
<pre name="code" class="html">
<div id="menuthree">Menu Button
<ul>
<li><a href="http://www.jquery.com">test</a></li>
<li></li> <!-- separator -->
<li>test2
<ul>
<li>sub 1</li>
<li><a href="http://p.sohei.org" target="_blank">sub 2</a></li>
<li>sub 3</li>
</ul>
</li>
</ul>
</div>
</pre>
<div class="resultheader">Result:</div>
<div class="result">
<p>..some content..</p>
<div id="menuthree">Menu Button
<ul>
<li><a href="http://www.jquery.com">test</a></li>
<li></li>
<li>test2
<ul>
<li>sub 1</li>
<li><a href="http://p.sohei.org" target="_blank">sub 2</a></li>
<li>sub 3</li>
</ul>
</li>
</ul>
</div>
<p>..some content..</p>
</div>
</div>
<div class="exa">
<h1>Example four:</h1>
<ul>
<li>same (result) as example two, but this time creating the menu by using the $.Menu and $.MenuItem classes and its methods</li>
</ul>
<div class="codeheader">JavaScript code:</div>
<pre name="code" class="JScript">
var options = {minWidth: 120, arrowSrc: 'arrow_right.gif'};
//creating a menu without items
var menu = new $.Menu('#menufour', null, options);
//adding items to the menu
menu.addItems([
new $.MenuItem({src: 'test', url:'http://www.jquery.com'}, options),
new $.MenuItem({src: ''}) /* separator */
]);
var itemWithSubmenu = new $.MenuItem({src: 'test2'}, options);
//creating a menu with items (as child of itemWithSubmenu)
new $.Menu(itemWithSubmenu, [
new $.MenuItem({src: 'sub 1'}, options),
new $.MenuItem({src: 'sub 2', url: 'http://p.sohei.org', target: '_blank'}, options),
new $.MenuItem({src: 'sub 3'}, options)
], options);
//adding the submenu to the main menu
menu.addItem(itemWithSubmenu);
</pre>
<div class="codeheader">HTML markup:</div>
<pre name="code" class="html">
<p><span id="menufour">Menu Button</span></p>
</pre>
<div class="resultheader">Result:</div>
<div class="result">
<p>..some content..</p>
<p><span id="menufour">Menu Button</span></p>
<p>..some content..</p>
</div>
</div>
<div class="exa">
<h1>Example five:</h1>
<ul>
<li>related to example two, the menu items can also be passed as a jquery selector (selecting an <ul>-element!)</li>
</ul>
<div class="codeheader">JavaScript code:</div>
<pre name="code" class="JScript">
var options = {minWidth: 120, arrowSrc: 'arrow_right.gif', copyClassAttr: true};
$('#menufive>img').menu(options, '#menufivelist');
</pre>
<div class="codeheader">HTML markup:</div>
<pre name="code" class="html">
<p id="menufive">Menu Button <img src="arrowdown.png" /> - Menu Button <img src="arrowdown.png" /> - Menu Button <img src="arrowdown.png" /></p>
<ul id="menufivelist" style="display:none;">
<li>one</li>
<li class="red">two</li>
<li class="blue">three</li>
<li>four
<ul>
<li>four.1
<ul>
<li>four.1.1</li>
<li>four.1.2</li>
<li>four.1.3</li>
</ul>
</li>
<li>four.2</li>
<li>four.3</li>
</ul>
</li>
</ul>
</pre>
<div class="resultheader">Result:</div>
<div class="result">
<p>..some content..</p>
<p id="menufive">Menu Button <img src="arrowdown.png" /> - Menu Button <img src="arrowdown.png" /> - Menu Button <img src="arrowdown.png" /></p>
<p>..some content..</p>
</div>
<ul id="menufivelist" style="display:none;">
<li>one</li>
<li class="red">two</li>
<li class="blue">three</li>
<li>four
<ul>
<li>four.1
<ul>
<li>four.1.1</li>
<li>four.1.2</li>
<li>four.1.3</li>
</ul>
</li>
<li>four.2</li>
<li>four.3</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
|
