Extendiendo la funcionalidad del complemento jquery simplecontextmenu

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.

preguntado el 04 de junio de 14 a las 22:06

1 Respuestas

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/

Respondido el 04 de junio de 14 a las 23:06

Cool. I used the second example. It seems like making the property available is cleaner. Just out of curiosity, does the accepted answer here (stackoverflow.com/questions/9371159/…) seem like the "correct" way to do it? - Hal50000

it is more or less the same and according to http://learn.jquery.com/plugins/advanced-plugin-concepts/ you can do it like this jQuery.fn.contextPopup.settings - Abraham Uribe

One benefit I think, if I understand the namespace issue correctly, is that you don't have to worry about this changing meaning. You can use $.fn.contextPopup.myProperty = <value> more freely within the plugin without keeping track of this referencias. - Hal50000

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.