Easy SEO-friendly Context Menu jQuery Plugin - contextMenu.js
File Size: | 60 KB |
---|---|
Views Total: | 153 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A lightweight and flexible jQuery plugin that makes it easy to add context menus to any DOM element on your page.
All you have to do is to create a regular HTML unordered list that will appear when the user right-clicks on the element.
How to use it:
1. Download and load the jQuery contextMenu.js plugin's files in the document.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/jquery.contextmenu.js></script> <link href="/path/to/jquery.contextmenu.css" rel="stylesheet" />
2. Create an HTML list for the 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>
3. Append the context menu to the element you specify. That's it.
$("#target").contextMenu({ menu: 'myMenu' }, function(action, el, pos) { // onClick callback 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)' ); });
4. Add custom icons to the menu items.
.contextMenu li.edit a { background-image: url(edit.png); } /* ... */
5. Enable/disable the context menu.
$('#target').disableContextMenu(); $('#target').enableContextMenu();
6. Enable/disable a specific menu item.
$('#target').disableContextMenuItems('#cut,#copy'); $('#target').enableContextMenuItems('#cut,#copy');
This awesome jQuery plugin is developed by myspace-nu. For more Advanced Usages, please check the demo page or visit the official website.