jQuery Plugins › jQuery Menu Plugins › jQuery superContextMenu

Dynamic Customizable Context Menu Plugin - jQuery superContextMenu

File Size:	13.2 KB
Views Total:	2239
Last Update:	11/09/2018 06:24:00 UTC
Publish Date:	03/26/2018 05:26:46 UTC
Official Website:	Go to website
License:	MIT

Demo Download

How to start using jQuery?

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.

<link href="dist/context-menu.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="dist/context-menu.min.js"></script>

2. Create your own menu items displayed in the context menu as follows:

var myMenu = [{

    // Menu Icon. 
    // This example uses Font Awesome Iconic Font.
    icon: 'fa fa-home',   

    // Menu Label
    label: 'Homepage', 

    // Callback
    action: function(option, contextMenuIndex, optionIndex) {}, 

    // An array of submenu objects
    submenu: null,

    // is disabled?
    disabled: false   //Disabled status of the option
},
  {
    icon: 'fa fa-user', 
    label: 'Profile',  
    action: function(option, contextMenuIndex, optionIndex) {}, 
    submenu: null, 
    disabled: false 
  },
  {
    icon: 'fa fa-envelope', 
    label: 'Contact', 
    action: function(option, contextMenuIndex, optionIndex) {},
    submenu: null,  
    disabled: false  
  },
  {
    //Menu separator
    separator: true   
  },
  {
    icon: 'fa fa-share', 
    label: 'Social Share', 
    action: function(option, contextMenuIndex, optionIndex) {},
    submenu: [{ // sub menus
      icon: 'fa fa-facebook',  
      label: 'Facebook',  
      action: function(option, contextMenuIndex, optionIndex) {}, 
      submenu: null,  
      disabled: false  
    },
    {
      icon: 'fa fa-twitter',  
      label: 'Twitter', 
      action: function(option, contextMenuIndex, optionIndex) {}, 
      submenu: null,  
      disabled: false  
    },
    {
      icon: 'fa fa-google-plus',
      label: 'Google Plus',  
      action: function(option, contextMenuIndex, optionIndex) {}, 
      submenu: null,  
      disabled: false  
    }], 
    disabled: false
  },
];

3. Attach the context menu to a specific container.

$('.element').on('contextmenu', function(e) {
  e.preventDefault();
  superCm.createMenu(myMenu, e);
});

4. More API methods.

// destroy the context menu
superCm.destroyMenu()

// update the context menu
superCm.updateMenu(allowHorzReposition = true, allowVertReposition = true)

// get options
superCm.getMenuOptions(contextMenuIndex)

// add an option
superCm.addMenuOption(contextMenuIndex, option, [index])

// add options
superCm.addMenuOptions(contextMenuIndex, options, [index])

// delete an option
superCm.deleteMenuOption(contextMenuIndex, index)

// set an option
superCm.setMenuOption(contextMenuIndex, index, option)

// set options
superCm.setMenuOptions(contextMenuIndex, options)