Enabling and Disabling Menu Items in jQuery contextMenu.js Plugin Demo

I have been using the jQuery contextMenu.js plugin that I found and wrote about for a couple of weeks now and have been really happy with the way it has cleaned up my interface. I have gone from having what seemed like buttons everywhere to them all grouped nicely on a context menu that is available whenever a table row is right clicked or a single icon at the end of each row is left clicked (you need my modified version of the plugin included in the download to enable left clicking).

So, I went from something like this or worse:

to:

As you can see from the images above, I don’t like to have buttons that work on selected items enabled unless of course an item has been selected. I wrote about disabling/enabling the button in the first image quite some time back. Now that I am using the context menu though, I had to do the same thing with it.

Luckily, the plugin’s author provided five methods to “control and clean-up the context menu after it has been instantiated.”

• disableContextMenu() – Disables the context menu
• enableContextMenu() – Re-enables the context menu
• disableContextMenuItems(‘#option1,#option2,….’) – Disables the specified items
• enableContextMenuItems(‘#option1,#option2,….’) – Enables the specified items
• destroyContextMenu() – Unbinds the context menu.

For what I wanted to do, I just needed the disableContextMenuItems() and enableContextMenuItems() methods in my ResetContextMenu() function.

jQuery:

Interesting jQuery Selectors Used:

• :last-child – Matches all elements that are the last child of their parent.
• :first-child – Matches all elements that are the first child of their parent.
• :checked – Matches all elements that are checked.

Like I said above, I’m really happy with how well this is cleaning up my interface as many users are not interested in working with the data, but instead just viewing it so why dirty up the interface with a bunch of buttons? As always, please checkout the demo and let me know in the comments what could be improved. Do you like the lightning icon? Do you know of another icon that would make more sense?