简体   繁体   中英

Extending functionality of jquery simplecontextmenu plugin

There's a jquery contextmenu I want to use.

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

The menu allows for items to be disabled when the menu is setup the first time:

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

I can't figure out how to "get to" the menus item after I create the menu. I'd like to conditionally disable/enable some menu states. For example, if multiple rows in a table grid are selected, I might want to disable an "edit" menu item.

Preferably, some best practice way of extending the plugin so it's generic enough for different situations where changing the enabled state on the fly is needed.

simplecontextmenu creates the menu every time you call .contextPopup() so you can create a variable with the items and change the .isEnabled when you need it

$(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/

or you can add one line to the plugin code like this

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    

so you can get the items like this

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/

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM