I've been going trough documents of this plugin and it looked promising, but at the end I wasn't able to find out that what I was looking for.
http://medialize.github.com/jQuery-contextMenu/docs.html
Here is what I wanted trough example, this is example of context menu items
$.contextMenu({
selector: '.context-menu-one',
callback: function(key, options) {
var m = "clicked: " + key;
window.console && console.log(m) || alert(m);
},
items: {
"item1": {name: "Clickable", icon: "edit"},
"item2": {
name: "Disabled",
icon: "cut",
disabled: function(key, opt) {
// this references the trigger element
return !this.data('cutDisabled');
}
}
}
});
. If my div ( context-menu-one
) has some content inside like <span class="test">x</span>
disable or enable menu based on that.
So in the case above if my div( context-menu-one
) has span with class test
that has textvalue x
disable menu item2
How would one do that? doesn't have to be code, leading me to good direction = good code if possible at all
Edit:
Here is jsfiddle example :
So because first context-menu-one
has span with class x the item2 should be disabled, but not for other one
you need to define your own events like in this fiddle
html
<div class="context-menu-one box menu-1">
<strong>right click me</strong>
<span data-item="edit"></span>
</div>
javascript
events: {
show: function(opt) {
var m = opt.$menu;
$(this).find('span[data-item]').each(function(i, e) { //<-- this search for all span with data-item attribute
var p = $(e).data('item') + 'Disabled'; //<-- here i compose editDisabled
if (m.data(p) === true) m.data(p, 1); //<-- this is for mantain previuos disabling
else m.data(p, true);
});
m = null; //<-- this for breaking possible circular references/memory leaks
},
hide: function(opt) {
var m = opt.$menu;
$(this).find('span[data-item]').each(function(i, e) {
var p = $(e).data('item') + 'Disabled';
if (m.data(p) === 1) m.data(p, true); //<-- this reset the previuos disabling
else m.removeData(p);
});
m = null;
}
}
If you want to disable a context menu binded to an specific selector you can do something like this:
$.contextMenu( 'destroy', '.context-menu-one' );
See example here:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.