Right or Left Click Context Menu Using jQuery Demo

In my seemingly never ending quest to find the coolest jQuery plugins I came across the jQuery Context Menu Plugin by Cory S.N. LaViska. As you have probably figured out, I use a lot of ASP.NET ListViews so I generally tryout the plugins I find using a simple ListView which in this case basically translates to a standard html table.

According to Cory’s site, the plugin:

features easy implementation, keyboard shortcuts, CSS styling, and control methods.

I would say he definitely delivers on all four. One thing I wanted to be able to do though that I didn’t find baked in was to call the menu with a left click instead of the plugin’s standard right click so I could cater to the user who might not know about right clicking. This was easy enough to change though with just a few lines in the plugin to include an override to look for a left click.

Be sure to checkout Cory’s plugin page for detailed usage and more examples.

Screenshot of End Product:

Features:

• Menu will appear whenever one of the table rows is right clicked.
• Menu will appear whenever one of the cells containing a lightning icon is left clicked.

HTML Markup for the Menu:

Changes to Plugin to Allow Left Clicking:

I added “if (o.leftButton == undefined) o.leftButton = false;” to the defaults section of the plugin and then where it checks for which button was clicked I changed the code from “if(evt.button==2) {” to “if (evt.button == 2 || o.leftButton == true) {.” Then when I setup the menu in the ready function I overrode the default by setting leftButton: true.

jQuery On My Page:

Be sure to checkout the demo and download for the complete code and refer to Cory’s plugin for additional usage details. Let me know in the comments what you think, what I messed up and what could be improved.