Question

我想要使用jquery contextmen。

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

菜单允许在第一次设置菜单时禁用项目：

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

我无法弄清楚如何去＆＃34;创建菜单后的菜单项。我想有条件地禁用/启用某些菜单状态。例如，如果选择了表格网格中的多个行，我可能想要禁用＆＃34;编辑＆＃34;菜单项。

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

Answer 1

每次调用.contextPopup（）时，

simplecontextmenu都会创建菜单，这样您就可以创建包含项目的变量，并在需要时更改.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/

扩展jquery simplecontextmenu插件的功能

1 个答案: