This time I will share jQuery Plugin and tutorial about Dynamic Customizable Context Menu Plugin – jQuery superContextMenu, hope it will help you in programming stack.
File Size: | 12.3 KB |
---|---|
Views Total: | 2416 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
The Super Context Menu plugin enables you to create a dynamic, customizable, multi-level context menu on any container element you specify.
Features:
- Dynamic rendering.
- Unlimited nesting.
- Custom click actions.
- Custom menu icons and labels.
How to use it:
1. Place jQuery library together with the jQuery superContextMenu plugin’s JavaScript and Stylesheet in the html file.
1 |
< link href = "/path/to/dist/context-menu.min.css" rel = "stylesheet" /> |
2 |
< script src = "/path/to/cdn/jquery.slim.min.js" ></ script > |
3 |
< script src = "/path/to/dist/context-menu.min.js" ></ script > |
2. Create your own menu items displayed in the context menu as follows:
01 |
var myMenu = [{ |
02 |
03 |
// Menu Icon. |
04 |
// This example uses Font Awesome Iconic Font. |
05 |
icon: 'fa fa-home' , |
06 |
07 |
// Menu Label |
08 |
label: 'Homepage' , |
09 |
10 |
// Callback |
11 |
action: function (option, contextMenuIndex, optionIndex) {}, |
12 |
13 |
// An array of submenu objects |
14 |
submenu: null , |
15 |
16 |
// is disabled? |
17 |
disabled: false //Disabled status of the option |
18 |
}, |
19 |
{ |
20 |
icon: 'fa fa-user' , |
21 |
label: 'Profile' , |
22 |
action: function (option, contextMenuIndex, optionIndex) {}, |
23 |
submenu: null , |
24 |
disabled: false |
25 |
}, |
26 |
{ |
27 |
icon: 'fa fa-envelope' , |
28 |
label: 'Contact' , |
29 |
action: function (option, contextMenuIndex, optionIndex) {}, |
30 |
submenu: null , |
31 |
disabled: false |
32 |
}, |
33 |
{ |
34 |
//Menu separator |
35 |
separator: true |
36 |
}, |
37 |
{ |
38 |
icon: 'fa fa-share' , |
39 |
label: 'Social Share' , |
40 |
action: function (option, contextMenuIndex, optionIndex) {}, |
41 |
submenu: [{ // sub menus |
42 |
icon: 'fa fa-facebook' , |
43 |
label: '<a href="https://www.jqueryscript.net/tags.php?/Facebook/">Facebook</a>' , |
44 |
action: function (option, contextMenuIndex, optionIndex) {}, |
45 |
submenu: null , |
46 |
disabled: false |
47 |
}, |
48 |
{ |
49 |
icon: 'fa fa-<a href="https://www.jqueryscript.net/tags.php?/twitter/">twitter</a>' , |
50 |
label: 'Twitter' , |
51 |
action: function (option, contextMenuIndex, optionIndex) {}, |
52 |
submenu: null , |
53 |
disabled: false |
54 |
}, |
55 |
{ |
56 |
icon: 'fa fa-google-plus' , |
57 |
label: 'Google Plus' , |
58 |
action: function (option, contextMenuIndex, optionIndex) {}, |
59 |
submenu: null , |
60 |
disabled: false |
61 |
}], |
62 |
disabled: false |
63 |
}, |
64 |
]; |
3. Attach the context menu to a specific container.
1 |
$( '.element' ).on( 'contextmenu' , function (e) { |
2 |
e.preventDefault(); |
3 |
superCm.createMenu(myMenu, e); |
4 |
}); |
4. More API methods.
01 |
// destroy the context menu |
02 |
superCm.destroyMenu() |
03 |
04 |
// check if is opened |
05 |
superCm.isOpen() |
06 |
07 |
// up<a href="https://www.jqueryscript.net/time-clock/">date</a> the context menu |
08 |
superCm.updateMenu(allowHorzReposition = true , allowVertReposition = true ) |
09 |
10 |
// update the context menu index |
11 |
superCm.updateMenuIndex(index, repositionX = true , repositionY = true ) |
12 |
13 |
// get options |
14 |
superCm.getMenuOptions(contextMenuIndex) |
15 |
16 |
// add an option |
17 |
superCm.addMenuOption(contextMenuIndex, option, [index]) |
18 |
19 |
// add options |
20 |
superCm.addMenuOptions(contextMenuIndex, options, [index]) |
21 |
22 |
// delete an option |
23 |
superCm.deleteMenuOption(contextMenuIndex, index) |
24 |
25 |
// set an option |
26 |
superCm.setMenuOption(contextMenuIndex, index, option) |
27 |
28 |
// set options |
29 |
superCm.setMenuOptions(contextMenuIndex, options) |
Changelog:
2021-03-02
- Update styling and parameter placement
2018-11-09
- add isOpen method
2018-05-26
- Fix MS Internet explorer 11 related issues
2018-05-22
- Add namespace to prevent accidental unbinding