我一直在使用这个插件的文档,看起来很有希望,但最后我无法找到我想要的东西。
http://medialize.github.com/jQuery-contextMenu/docs.html
这是我想要的例子,这是上下文菜单项的例子
$.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');
}
}
}
});
。如果我的div(context-menu-one
)内部有一些内容,例如<span class="test">x</span>
禁用或启用菜单。
所以在上面的情况下,如果我的div(context-menu-one
)跨越了类test
,其中textvalue x
禁用菜单项2
如何做到这一点?不必是代码,导致我的方向良好=如果可能的话,好的代码
修改
这是jsfiddle示例:
因为第一个context-menu-one
跨越了类x,应该禁用item2,但不能禁用其他
答案 0 :(得分:1)
您需要定义自己的事件,例如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;
}
}
答案 1 :(得分:0)
如果要禁用绑定到特定选择器的上下文菜单,可以执行以下操作:
$.contextMenu( 'destroy', '.context-menu-one' );
参见此处的示例: