This time I will share jQuery Plugin and tutorial about Feature-rich Custom jQuery Context Menu Plugin – contextMenu, hope it will help you in programming stack.
| File Size: | 2.49 MB |
|---|---|
| Views Total: | 13429 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
contextMenu is a feature-rich and high performance jQuery plugin for replacing the default browser’s right-click menu with a custom one.
Features:
- Allows to append the context menu to any element.
- Multilevel context menus.
- Custom icons: Font Awesome Icons, etc.
- Callback function which will be fired on click.
- Custom menu type: text, textarea, checkbox, radio, select, html
- Keyboard interaction.
- Custom trigger events, not only right click.
- Auto adjusts position and size to fit in viewport.
- Dynamic menu creation.
- Custom animations.
Basic usage:
1. Include the jQuery contextMenu’s CSS file in the head section of the html document.
1 |
<link href="jquery.contextMenu.css" rel="stylesheet"> |
2. Create an element where you want to append the context menu to.
1 |
<span class="demo">Right Click Me</span> |
3. Include jQuery library, jQuery UI Position (OPTIONAL) and the jQuery contextMenu plugin’s JavaScript at the bottom of the html document.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="dist/jquery.ui.position.js"></script> |
3 |
<script src="dist/jquery.contextMenu.js"></script> |
4. Create your custom menu items and bind the context menu to the element ‘demo’.
01 |
$.contextMenu({ |
02 |
03 |
selector: '.demo', |
04 |
05 |
items: { // menu items here |
06 |
07 |
"edit": { // with full options |
08 |
name: "Edit", |
09 |
icon: "edit", |
10 |
isHtmlName: true, // use HTML in the name |
11 |
callback: function(itemKey, opt, e){ // callback |
12 |
alert("Clicked on " + itemKey + " on element " + opt.$trigger.id); |
13 |
return false; |
14 |
}, |
15 |
className: 'myCustomClass', |
16 |
disabled: function(key, opt){ |
17 |
// Disable this item if the menu was triggered on a div |
18 |
if(opt.$trigger.nodeName === 'div'){ |
19 |
return true; |
20 |
} |
21 |
}, |
22 |
visible: function(key, opt){ |
23 |
// Hide this item if the menu was triggered on a div |
24 |
if(opt.$trigger.nodeName === 'div'){ |
25 |
return false; |
26 |
} |
27 |
}, |
28 |
type: 'text', // or null, textarea, checkbox, radio, select, html |
29 |
events: { // event handlers |
30 |
keyup: function(e){ |
31 |
alert(e.keyCode); |
32 |
alert(e.data.$trigger.attr("id")); |
33 |
} |
34 |
}, |
35 |
accesskey: 'a', |
36 |
dataAttr: { // data attribute |
37 |
menuTitle: "My custom title" |
38 |
}, |
39 |
value: "default value", // for 'text' type |
40 |
options: {1: 'one', 2: 'two', 3: 'three'}, // for 'select' type |
41 |
selected: "2", // for 'select' type |
42 |
radio: 'radio', // for 'radio' type |
43 |
value: '2', // for 'radio' type |
44 |
selected: true, // for 'radio' type |
45 |
height: 200, // for 'textarea' type |
46 |
}, |
47 |
48 |
"separator1": "-----", // separator |
49 |
"separator2": { "type": "cm_separator" }, |
50 |
51 |
"cut": { // with sub menus |
52 |
name: "Cut", |
53 |
{ |
54 |
items: { |
55 |
mySubmenu: { |
56 |
name: "Command 1" |
57 |
callback: function(key, opt){ |
58 |
alert("Clicked on " + key); |
59 |
} |
60 |
} |
61 |
} |
62 |
} |
63 |
} |
64 |
} |
65 |
|
66 |
}); |
5. Here’s a full list of configuration options you can use to customize the context menu.
01 |
// selector of contextMenu trigger |
02 |
selector: null, |
03 |
04 |
// where to append the menu to |
05 |
appendTo: null, |
06 |
07 |
// method to trigger context menu ["right", "left", "hover"] |
08 |
trigger: 'right', |
09 |
10 |
// hide menu when mouse leaves trigger / menu elements |
11 |
autoHide: false, |
12 |
13 |
// ms to wait before showing a hover-triggered context menu |
14 |
delay: 200, |
15 |
16 |
// flag denoting if a second trigger should simply move (true) or rebuild (false) an open menu |
17 |
// as long as the trigger happened on one of the trigger-element's child nodes |
18 |
reposition: true, |
19 |
20 |
// Flag denoting if a second trigger should close the menu, as long as |
21 |
// the trigger happened on one of the trigger-element's child nodes. |
22 |
// This overrides the reposition option. |
23 |
hideOnSecondTrigger: false, |
24 |
25 |
//ability to select submenu |
26 |
selectableSubMenu: false, |
27 |
28 |
// Default classname configuration to be able avoid conflicts in frameworks |
29 |
classNames: { |
30 |
hover: 'context-menu-hover', // Item hover |
31 |
disabled: 'context-menu-disabled', // Item disabled |
32 |
visible: 'context-menu-visible', // Item visible |
33 |
notSelectable: 'context-menu-not-selectable', // Item not
|
