javascript - jquery simplecontextmenu 插件的扩展功能

Question

我想使用一个 jquery 上下文菜单。

http://plugins.jquery.com/simplecontextmenu/

首次设置菜单时，菜单允许禁用项目:

var menuObj = tableRow.contextPopup({
    items: [
        {label:'Delete', icon:'delete.png', action:function() { alert('clicked') }, isEnabled:function() { return true;} }
    ]});

创建菜单后，我不知道如何“访问”菜单项。我想有条件地禁用/启用某些菜单状态。例如，如果选择了表格网格中的多行，我可能想禁用“编辑”菜单项。

最好是扩展插件的一些最佳实践方法，以便它对于需要动态更改启用状态的不同情况来说足够通用。

Answer 1

simplecontextmenu 每次调用 .contextPopup() 时都会创建菜单，以便您可以使用项目创建一个变量，并在需要时更改 .isEnabled

$(document).ready(function(){
    var itemsArray=[
            {
             label:'Some Item',    
             icon:'icons/shopping-basket.png', 
             action:function() { alert('clicked 1') } 
            },
            {
             label:'Blah Blah',     
             icon:'icons/book-open-list.png',  
             action:function() { alert('clicked 3') },
             isEnabled:function() { return false; } 
            },
    ];
    $('#mythingy').contextPopup({
      title: 'My Popup Menu',
      items: itemsArray
    });
    //you can change the values of the itemsArray  like this
    $("#disabled").click(function(){
        $.each(itemsArray,function(i,n){
           if(n!=null){
                n.isEnabled=function(){return false};
           }
        });
    });
});    

http://jsfiddle.net/5f97e/

或者您可以在插件代码中添加一行，如下所示

jQuery.fn.contextPopup = function(menuData) {
// Define default settings
var settings = {
    contextMenuClass: 'contextMenuPlugin',
    gutterLineClass: 'gutterLine',
    headerClass: 'header',
    seperatorClass: 'divider',
    title: '',
    items: []
};

// merge them
$.extend(settings, menuData);
this.settings=settings;//ADD THIS LINE TO EXPOSE THE PLUGIN SETTINGS    

这样你就可以获得这样的元素

var contextmenu= $('#mythingy').contextPopup({
      title: 'My Popup Menu',
      items: [
            {
             label:'Some Item',    
             icon:'icons/shopping-basket.png', 
             action:function() { alert('clicked 1') } 
            },
            {
             label:'Blah Blah',     
             icon:'icons/book-open-list.png',  
             action:function() { alert('clicked 3') },
             isEnabled:function() { return false; } 
            },
    ]
});//the var contextmenu gets the contextPopup
$("#disabled").click(function(){
    //contextmenu.settings get the contextPopup settings and you can change any value
    $.each(contextmenu.settings.items,function(i,n){
           if(n!=null){
                n.isEnabled=function(){return false};
           }
    });
});    

http://jsfiddle.net/5f97e/1/