CREATE-article# #
[previously]
- [2017-07-24][00:00] NEW task IN ?
- ] # 7379 - CREATE-article# # - right click context menu
- [00:00] NEW article IN
- ] # # - right click context menu
[currently]
- ] https://swisnl.github.io/jQuery-contextMenu/demo.html
[next]
- ] example 1 -
JS
$(function() { $.contextMenu({ selector: '.context-menu-one', callback: function(key, options) { var m = "clicked: " + key; window.console && console.log(m) || alert(m); }, 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: function(){ return'context-menu-icon context-menu-icon-quit'; }} } }); $('.context-menu-one').on('click', function(e){ console.log('clicked', this); }) });
HTML
<span class="context-menu-one btn btn-neutral">right click me</span>
example 2
$(function(){ $('#the-node').contextMenu({ selector: 'li', callback: function(key, options) { var m = "clicked: " + key + " on " + $(this).text(); window.console && console.log(m) || alert(m); }, 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: function($element, key, item){ return 'context-menu-icon context-menu-icon-quit'; }} } });
});
<ul id="the-node"><li><span class="context-menu-one btn btn-neutral">right click me 1</span></li><li><span class="context-menu-one btn btn-neutral">right click me 2</span></li><li>right click me 3</li><li>right click me 4</li></ul>