Custom Right-Click (Context) Menu Plugin With jQuery - contextMenu
File Size: | 8.66 KB |
---|---|
Views Total: | 15798 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
The jQuery contextMenu plugin that allows you to bind a dynamic right-click context menu with custom actions to any DOM elements. A great alternative to the native browser context menu.
How to use it:
1. Include the jQuery contextMenu plugin's files on the webpage which has jQuery library included.
<link rel="stylesheet" href="contextMenu.min.css"> <script src="//code.jquery.com/jquery.min.js"></script> <script src="contextMenu.min.js"></script>
2. Define your own menu items and action functions in the JavaScript as this:
var data = [ [{ text: "Cut (ctrl+x)", action: function () { console.log("Cut"); } }, { text: "Copy(ctrl+c)" }, { text: "Paste(ctrl+v)", action: function () { console.log("Paste"); } }], [{ text: "Bold (ctrl+b)" }, { text: "Underline(ctrl+u)" }] ];
3. Bind the context menu to a specific container.
$("#container").contextMenu(data);
4. Possible plugin options and callback functions.
$("#container").contextMenu(data,{ // menu name name: "", // x/y offsets in pixels offsetX: 15, offsetY: 5, // callbacks beforeShow: $.noop, afterShow: $.noop });
This awesome jQuery plugin is developed by daves2009. For more Advanced Usages, please check the demo page or visit the official website.