A Simple Good Looking Context Menu, for jQuery
Yes, there are loads of context menu plugins already. But they require a fair amount of work to make them look good.
This one is easy to use, small, and looks good.
Demo
Features
- Tiny library. Only dependency is jQuery.
- Simple API.
- Looks good out of the box, with no additional tweaking.
- Designed to look and behave like a standard Windows context menu.
- There's so little code, it should be easy to add your own custom features.
The menu looks like this:
Installation
Include the files jquery.contextmenu.css and jquery.contextmenu.js in your page <head>. You also need jQuery. It is recommended that you use the HTML 5 DOCTYPE to ensure rendering consistency.
<!DOCTYPE html> <html> <head> <script src="jquery-1.6.2.min.js"></script> <script src="jquery.contextmenu.js"></script> <link rel="stylesheet" href="jquery.contextmenu.css"> ... rest of your stuff ... You can get the files from here:
- https://github.com/joewalnes/jquery-simple-context-menu/raw/master/jquery.contextmenu.js
- https://github.com/joewalnes/jquery-simple-context-menu/raw/master/jquery.contextmenu.css
Usage
The plugin introduces a contextPopup() method to the jQuery object.
Assuming you have an element that you'd like to bind a context menu to:
<div id="mythingy">hello</div> You can wire up a context menu like this:
$('#mythingy').contextPopup({ title: 'My Popup Menu', items: [ {label:'Some Item', icon:'icons/shopping-basket.png', action:function() { alert('clicked 1') } }, {label:'Another Thing', icon:'icons/receipt-text.png', action:function() { alert('clicked 2') } }, null, /* null can be used to add a separator to the menu items */ {label:'Blah Blah', icon:'icons/book-open-list.png', action:function() { alert('clicked 3') }, isEnabled:function() { return false; } }, ]}); The 'isEnabled' function is optional. By default all items are enabled.
Icons
The icons should be 16x16 pixels. I recommend the Fugue icon set (shadowless).
kthxbye
-joe
