jQuery plugin that shows a custom context menu when right clicking something. Super simple implementation.
The best way to try it out is to try a demo is to go here or download the source and open test.html.
For questions, either follow me on twitter or post an issue here.
// context_menu_id becomes the id of the context menu, context_menu_items contains the items to be shown in the menu, and options is a set of options for this menu
$(selector for elements that will launch the menu).contextMenu( context_menu_id, context_menu_items, options );
A complete example:
$("selector").contextMenu('context-menu-1', {
'Context Menu Item 1': {
click: function(element){ // element is the jquery obj clicked on when context menu launched
alert('Menu item 1 clicked');
element.css({backgroundColor: 'pink'}); // just as example the clicked items backgorund is changed
},
klass: "custom-class1" // a custom css class for this menu item (usable for styling)
},
'Second menu item': {
click: function(element){ alert('second clicked'); },
klass: "custom-class2"
},
{
disable_native_context_menu: true,
showMenu: function() { alert("Showing menu"); },
hideMenu: function() { alert("Hiding menu"); }
}
});
All context menus gets the class 'context-menu', so it´s quite easy to keep a consistent look over multiple menus. The look is all up to you and the structure of a menu looks like this:
<ul id="contextMenu" class="context-menu">
<li class="custom-class1"><a href="#">Context Menu Item 1</a></li>
<li class="custom-class2"><a href="#">Second menu item</a></li>
</ul>
Style it however you want with CSS, it does not come with any predefined styles so thats completely up to you.
In the example above, when a user clicks on the first context menu item, the original element that launched the context menu is passed in as the only argument for the click callback. Thus, we can make the clicked element green by doing this:
clickFirstItem = function(element){
element.css({color: "green"});
}
$(".targets").contextMenu({
'Context Menu Item 1': {
click: clickFirstItem,
klass: "menu-item-1"
}
});
Simple, yet powerful.
Version 1.3 Added callbacks showMenu and hideMenu to allow the caller to perform actions when the menu is shown and hidden (such as custom styling of the menu target)
Version 1.2 Added an option to disable the browsers native context menu no matter where you click: $('selector').contextMenu('context-menu-name', actions, { disable_native_context_menu: true })
Jonas Arnklint https://github.com/arnklint
Evan Worley https://github.com/evanworley
Copyright (c) 2010 Jonas Arnklint, released under the MIT license.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.