jQuery contextMenu disable items based on div content

Question

I've been going trough documents of this plugin and it looked promising, but at the end I wasn't able to find out that what I was looking for.

http://medialize.github.com/jQuery-contextMenu/docs.html

Here is what I wanted trough example, this is example of context menu items

 $.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'); 
                }
            }
        }
    });

. If my div (context-menu-one) has some content inside like <span class="test">x</span> disable or enable menu based on that.

So in the case above if my div(context-menu-one) has span with class test that has textvalue x disable menu item2

How would one do that? doesn't have to be code, leading me to good direction = good code if possible at all

Edit:

Here is jsfiddle example :

http://jsfiddle.net/XZEUN/2/

So because first context-menu-one has span with class x the item2 should be disabled, but not for other one

Sure that's a perfect suggestion here it is jsfiddle.net/XZEUN thank you — Gandalf StormCrow
– Gandalf StormCrow, Commented Oct 12, 2012 at 16:05
@castillo.io thanks for your response. I guess the I just modified the updated link to make a question a bit more easier to understand. I don't want to add close button, x is just example value of span. Based on that value I would like to disable the particular menu item — Gandalf StormCrow
– Gandalf StormCrow, Commented Oct 12, 2012 at 16:10
Thanks, I think I know you want now. Please see my answer below. Hope that helps. — castillo.io
– castillo.io, Commented Oct 12, 2012 at 16:16

score 1 · Accepted Answer · 2012-10-12 16:42:57Z

you need to define your own events like in this 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;
    }
}

castillo.io · Accepted Answer · 2012-10-12 16:16:13Z

0

If you want to disable a context menu binded to an specific selector you can do something like this:

$.contextMenu( 'destroy', '.context-menu-one' );

See example here:

http://jsfiddle.net/ATyjn/

answered Oct 12, 2012 at 16:16

castillo.io

9427 silver badges9 bronze badges

Collectives™ on Stack Overflow

jQuery contextMenu disable items based on div content

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related