jQuery Context Menu Plugin

Overview

jQuery Context Menu is a context menu plugin for jQuery. It was designed to make implementing context menu functionality easy and requires minimal effort to configure.

Why reinvent the wheel? The goal of this plugin is to streamline the way actions are binded to menu items and to use 100% CSS for styling. Keyboard shortcuts were added for navigating the menu once it’s open, and there are five methods to allow you to control and clean-up context menus on the fly.

There is another context menu for jQuery written by Chris Domigan. These two projects are completely unrelated and no source code was shared from Chris’ project.

Features
Compatibility
Demo
Download
Usage
- Dependencies
- Creating
- Methods
- Styling
- Callback
To Do List
Licensing & Terms of Use

Features

Valid XHTML
Fully customizeable via CSS
Easy to configure and implement
Degrades gracefully
Keyboard shortcuts to maximize accessibility
Ability to enable/disable menu items on the fly
Ability to enable/disable entire menu on the fly

Compatibility

Updated for jQuery 1.4.x! This plugin requires jQuery 1.3 or above and has been tested to work in the following browsers:

Internet Explorer 6 & 7
Firefox 2 & 3
Safari 3
Chrome
Opera 9.5*

*Opera 9.5 has an option to allow scripts to detect right-clicks, but it is disabled by default. Furthermore, Opera still doesn’t allow JavaScript to disable the browser’s default context menu which causes a usability conflict.

Demo

View a live demonstration of the context menu plugin.

Download

Current version: jQuery Context Menu – Version 1.01 (10 March 2010)

This plugin is provided to you as-is, at absolutely no cost. If you would like to support its development, feel free to contribute any amount you prefer via PayPal. As always, you are welcome to contribute code for bug fixes and feature enhancements as well. Either way, thanks for supporting our efforts!

Usage

Dependencies

jQuery Context Menu requires jQuery 1.3 or above.

Creating

First, create a list in your HTML that will be the markup for your context menu:

<ul id="myMenu" class="contextMenu">
    <li class="edit">
        <a href="#edit">Edit</a>
    </li>
    <li class="cut separator">
        <a href="#cut">Cut</a>
    </li>
    <li class="copy">
        <a href="#copy">Copy</a>
    </li>
    <li class="paste">
        <a href="#paste">Paste</a>
    </li>
    <li class="delete">
        <a href="#delete">Delete</a>
    </li>
    <li class="quit separator">
        <a href="#quit">Quit</a>
    </li>
</ul>

Actions are specified in the href attribute, preceeded by a # symbol. When selected, this is what will be passed back to the action parameter in the callback. You can add class attributes to the list items to assist with styling, but they have no functional meaning. Thus, class names do not have to correspond with actions.

Once you have created the markup for the context menu, bind it to one or more elements using JavaScript:

$(document).ready( function() {

    $("#selector").contextMenu({
        menu: ''myMenu''
    },
        function(action, el, pos) {
        alert(
            ''Action: '' + action + ''\n\n'' +
            ''Element ID: '' + $(el).attr(''id'') + ''\n\n'' +
            ''X: '' + pos.x + ''  Y: '' + pos.y + '' (relative to element)\n\n'' +
            ''X: '' + pos.docX + ''  Y: '' + pos.docY+ '' (relative to document)''
            );
    });

});

Make sure you change #selector to the appropriate jQuery selector that matches the element(s) you want to bind the context menu to. The selector can be any valid jQuery selector.

Methods

There are five methods you can use to control and clean-up the context menu after it has been instantiated.

Method	Description
`disableContextMenu()`	Disables the context menu on all matching elements
`enableContextMenu()`	Re-enables the context menu on all matching elements
`disableContextMenuItems(”#option1,#option2,…”)`	Disables the specified options on all matching elements. If `null` is passed, all elements will be disabled.
`enableContextMenuItems(”#option1,#option2,…”)`	Enables the specified options on all matching elements. If `null` is passed, all elements will be enabled.
`destroyContextMenu()`	Unbinds the context menu from all matching elements

As an example, to disable the context menu on a div with an ID of myDiv the code would look like this:

$("#myDiv").disableContextMenu();

Styling

The context menu relies 100% on CSS for styling. To give your users an aesthetically pleasing experience, you should either use the included stylesheet or create your own. Refer to jquery.contextMenu.css to make any changes in the styles.

Callback

The callback function fires if and only if a user makes a valid selection from the context menu. Three arguments are passed which you can use to control what happens when a user makes a selection:

Parameter	Description
`action`	The action that corresponds to the menu item that was selected (I.E. the `href` attributes less the `#` symbol)
`el`	The element object that triggered the context menu
`pos.x`	Horizontal position of mouse cursor when menu was clicked (relative to the element)
`pos.y`	Vertical position of mouse cursor when menu was clicked (relative to the element)
`pos.docX`	Horizontal position of mouse cursor when menu was clicked (relative to the document)
`pos.docY`	Vertical position of mouse cursor when menu was clicked (relative to the document)

See the example above for starter code.

A Beautiful Site, LLC.