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.

Demo | Download

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:

<!-- Right Click Menu -->
<ul id="myMenu" class="contextMenu">
    <li class="insert"><a href="#insert">Add New</a></li>        
    <li class="edit"><a href="#edit">Edit</a></li>                    
    <li class="delete"><a href="#delete">Delete</a></li>            
</ul>

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:

$(document).ready(function() {
    //Tie a menu to the right click of each row of the table with a class of customerRow
    $(".customerRow").contextMenu({ menu: 'myMenu' }, 
        function(action, el, pos) { contextMenuWork(action, el, pos); });

    //Tie a menu the left click of each td with the class of openmenu !Important - requires modified
    //jquery.contextMenu.js that allows for leftButton: true
    $(".openmenu").contextMenu({ menu: 'myMenu', leftButton: true }, 
        function(action, el, pos) { contextMenuWork(action, el.parent("tr"), pos); });

    });

    function contextMenuWork(action, el, pos) {

        switch (action) {
            case "delete":
                {
                    //Popup Delete Confirmation - included in demo and in download
                    break;
                }
            case "insert":
                {
                    //Popup Insert Dialog- included in demo and in download
                    break;
                }

            case "edit":
                {
                    //Popup Edit Dialog
                    break;
                }
        }

   }
});    

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.

[dzone]