|
290 | 290 | <div class="rst-content">
|
291 | 291 | <div role="main" class="document">
|
292 | 292 | <a href="https://github.com/swisnl/jQuery-contextMenu" class="edit-on-github fa fa-github"> Fork on GitHub</a>
|
293 |
| - |
294 |
| - <h1 id="demo-custom-command">Demo: Custom command</h1> |
295 |
| -<!-- START doctoc generated TOC please keep comment here to allow auto update --> |
296 |
| -<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> |
297 |
| -<ul> |
298 |
| -<li><a href="#example-code">Example code</a></li> |
299 |
| -<li><a href="#example-html">Example HTML</a></li> |
300 |
| -</ul> |
301 |
| -<!-- END doctoc generated TOC please keep comment here to allow auto update --> |
302 |
| -<p><span class="context-menu-one btn btn-neutral">right click me</span></p> |
303 |
| -<h2 id="example-code">Example code</h2> |
304 |
| -<script type="text/javascript" class="showcase"> |
305 |
| -$(function(){ |
306 |
| - /************************************************** |
307 |
| - * Custom Command Handler |
308 |
| - **************************************************/ |
309 |
| - $.contextMenu.types.label = function(item, opt, root) { |
310 |
| - // this === item.$node |
311 |
| - |
312 |
| - $('<span>Label<ul>' |
313 |
| - + '<li class="label1" title="label 1">label 1' |
314 |
| - + '<li class="label2" title="label 2">label 2' |
315 |
| - + '<li class="label3" title="label 3">label 3' |
316 |
| - + '<li class="label4" title="label 4">label 4') |
317 |
| - .appendTo(this) |
318 |
| - .on('click', 'li', function() { |
319 |
| - // do some funky stuff |
320 |
| - console.log('Clicked on ' + $(this).text()); |
321 |
| - // hide the menu |
322 |
| - root.$menu.trigger('contextmenu:hide'); |
323 |
| - }); |
324 |
| - |
325 |
| - this.addClass('labels').on('contextmenu:focus', function(e) { |
326 |
| - // setup some awesome stuff |
327 |
| - }).on('contextmenu:blur', function(e) { |
328 |
| - // tear down whatever you did |
329 |
| - }).on('keydown', function(e) { |
330 |
| - // some funky key handling, maybe? |
331 |
| - }); |
332 |
| - }; |
333 |
| - |
334 |
| - /************************************************** |
335 |
| - * Context-Menu with custom command "label" |
336 |
| - **************************************************/ |
337 |
| - $.contextMenu({ |
338 |
| - selector: '.context-menu-one', |
339 |
| - callback: function(key, options) { |
340 |
| - var m = "clicked: " + key; |
341 |
| - window.console && console.log(m) || alert(m); |
342 |
| - }, |
343 |
| - items: { |
344 |
| - open: {name: "Open", callback: $.noop}, |
345 |
| - label: {type: "label", customName: "Label"}, |
346 |
| - edit: {name: "Edit", callback: $.noop} |
347 |
| - } |
348 |
| - }); |
349 |
| -}); |
350 |
| -</script> |
351 |
| -<h2 id="example-html">Example HTML</h2> |
352 |
| -<div style="display:none;" class="showcase" data-showcase-import=".context-menu-one"></div> |
353 |
| -<style type="text/css" class="showcase"> |
354 |
| - .labels > ul { |
355 |
| - margin: 0; |
356 |
| - padding: 0; |
357 |
| - list-style: none; |
358 |
| - display: block; |
359 |
| - float: none; |
360 |
| - } |
361 |
| - .labels > ul > li { |
362 |
| - display: inline-block; |
363 |
| - width: 20px; |
364 |
| - height: 20px; |
365 |
| - border: 1px solid #CCC; |
366 |
| - overflow: hidden; |
367 |
| - text-indent: -2000px; |
368 |
| - } |
369 |
| - .labels > ul > li.selected, |
370 |
| - .labels > ul > li:hover { border: 1px solid #000; } |
371 |
| - .labels > ul > li + li { margin-left: 5px; } |
372 |
| - .labels > ul > li.label1 { background: red; } |
373 |
| - .labels > ul > li.label2 { background: green; } |
374 |
| - .labels > ul > li.label3 { background: blue; } |
375 |
| - .labels > ul > li.label4 { background: yellow; } |
376 |
| -</style> |
377 | 293 | <h1 id="demo-custom-command">Demo: Custom command</h1>
|
378 | 294 | <!-- START doctoc generated TOC please keep comment here to allow auto update -->
|
379 | 295 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
|
|
0 commit comments