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.

Demo | Download

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:

<script type="text/javascript">

    $(document).ready(function() {       
        //Bind a right click menu to each table row
        $("#customerTable tbody tr").contextMenu({ menu: 'myMenu' }, 
            function(action, el, pos) { contextMenuWork(action, el, pos); });
        
        //Bind a left click menu to the last cell in each row.
        $("#customerTable tbody tr td:last-child").contextMenu({ menu: 'myMenu', leftButton: true }, 
            function(action, el, pos) { contextMenuWork(action, el.parent("tr"), pos); });

        //Setup the context menu on ready
        ResetContextMenu();
        
        //Check all checkboxes in first column when the checkbox in the head is clicked
        $("#customerTable thead th:first-child input:checkbox").click(function() {
            var checked_status = this.checked;
            $("#customerTable tbody td:first-child input:checkbox").each(function() {
                this.checked = checked_status;
            });
            
            ResetContextMenu();
        });

        //Each time on of the checkboxes is checked reset the menu as necessary
        $("#customerTable tbody td:first-child input:checkbox").click(function() {
            ResetContextMenu();
        });

    });

    function ResetContextMenu() {
        if ($("#customerTable td:first-child :checked").length > 0) {
            $("#myMenu").enableContextMenuItems('#deleteSelected');
        }
        else {
            $("#myMenu").disableContextMenuItems('#deleteSelected');
        }
    }    

    function contextMenuWork(action, el, pos) {
       //Code in download
    }                                 
</script>

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?

Share this post: