Context button plugin

In an effort to create a cross-browser context menu for Saurus CMS editor's environment, we created an open source jQuery plugin. It works by attaching a menu to various anchors inside the document and appears on user's mouse hover event.

Demo

See the live demo or download the whole demo: www.saurus.info/public/context_button_plugin/context_plugin_demo.zip.

Download

The plugin is licensed under LGPL and you can freely download the unpacked version: www.saurus.info/public/context_button_plugin/jquery.contextMenu-1.1.zip or the minified version: www.saurus.info/public/context_button_plugin/jquery.contextMenu-1.1.min.zip

Usage

The basic usage is:

$(<ANCHOR_ELEMENTS>).contextMenu(<ARRAY_OF_ACTIONS>);

Setup

To setup the context menu, you first need to include the necessary JavaScript files:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.contextMenu-1.0.js"></script>

Then add all all your actions using the contextMenu.addAction() method. Argument for this method is an object consisting of the action's name, title and the function which is executed when the item in menu is clicked.

The argument structure:

{ name: '<ACTION_NAME>', title: '<ACTION_TITLE>', bind: <FUNCTION_TO_EXECUTE> }

Example which adds 3 different actions:

$.fn.contextMenu.addAction({name: 'edit', title: 'Edit', bind: editAction});
$.fn.contextMenu.addAction({name: 'delete', title: 'Delete', bind: deleteAction});
$.fn.contextMenu.addAction({name: 'publish', title: 'Publish', bind: publishAction});

And of course the action function must be defined, for example:

function editAction()
{
    alert('Edit action triggered!');
  
    // stop click event propagation
    return false;
} 

Next, tell the anchor elements which actions to use. There are two ways to do that. First is to create a "buttons" attribute inside the anchor element with the comma separated names of the actions:

<img src="anchor.png" width="13" height="13" id="topright" class="context_anchor" buttons="edit,publish,delete">

The second way is to pass array of action names as an argument when attaching the menu function:

$('.context_anchor').contextMenu(['edit', 'delete']);

These methods can be combined, in that case the actions listed in "buttons" attribute will be listed first.

Finally you need to attach the context menu functionality to the anchors:

$(document).ready(function ()
{
    // the h1 button will have edit and delete actions
    $('#h1_context').contextMenu(['edit', 'delete']);
   
    // the h2 button will have delete, edit and publish actions
    $('#h2_context').contextMenu(['edit', 'publish']);
   
    // all other buttons will have embedded actions
    $('.context_anchor').contextMenu();
}); 

Other settings

From 1.1 you can adjust the delay between the hover event and the appearance of the menu:

$.fn.contextMenu.settings.delayHoverEvent = <DELAY_MENU_BY_MS>;

By default this is 333 milliseconds.

Menu structure

For the look and feel of the menu use CSS. The created menu HTML structure is:

<ul class="context_plugin_dropdown" id="context_plugin_dropdown_<UNIQUE_ID>">
    <li class="context_plugin_item">
        <a class="<ACTION_NAME>" href="javascript:void();"></a>
    </li>
    <li class="context_plugin_item">
        <a class="<ACTION_NAME>" href="javascript:void();"></a>
    </li>
    <li class="context_plugin_item">
        <a class="<ACTION_NAME>" href="javascript:void();"></a>
    </li>
</ul> 

The context menu in Saurus CMS

In case you are develping for Saurus CMS, please refer to description how to customize v-shaped buttons.