Context Menu Plugin jQuery superContextMenu - Free Download Dynamic Customizable Context Menu Plugin - jQuery superContextMenu

Free Download Dynamic Customizable Context Menu Plugin – jQuery superContextMenu

Posted on

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.

Context Menu Plugin jQuery superContextMenu - Free Download Dynamic Customizable Context Menu Plugin - jQuery superContextMenu
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