Feature-rich Custom jQuery Context Menu Plugin - contextMenu

File Size: 2.49 MB
Views Total: 17241
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Feature-rich Custom jQuery Context Menu Plugin - contextMenu

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.

<link href="jquery.contextMenu.css" rel="stylesheet">

2. Create an element where you want to append the context menu to.

<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.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/jquery.ui.position.js"></script>
<script src="dist/jquery.contextMenu.js"></script>

4. Create your custom menu items and bind the context menu to the element 'demo'.

$.contextMenu({

  selector: '.demo', 

  items: { // menu items here

    "edit": { // with full options
      name: "Edit", 
      icon: "edit",
      isHtmlName: true, // use HTML in the name
      callback: function(itemKey, opt, e){ // callback
        alert("Clicked on " + itemKey + " on element " + opt.$trigger.id);
        return false;             
      },
      className: 'myCustomClass',
      disabled: function(key, opt){        
        // Disable this item if the menu was triggered on a div
        if(opt.$trigger.nodeName === 'div'){
          return true;
        }            
      },
      visible: function(key, opt){        
        // Hide this item if the menu was triggered on a div
        if(opt.$trigger.nodeName === 'div'){
          return false;
        }            
      },
      type: 'text', // or null, textarea, checkbox, radio, select, html
      events: { // event handlers
        keyup: function(e){
          alert(e.keyCode);
          alert(e.data.$trigger.attr("id"));
        }
      },
      accesskey: 'a',
      dataAttr: { // data attribute
        menuTitle: "My custom title"            
      },
      value: "default value", // for 'text' type
      options: {1: 'one', 2: 'two', 3: 'three'}, // for 'select' type
      selected: "2", // for 'select' type
      radio: 'radio', // for 'radio' type
      value: '2', // for 'radio' type
      selected: true, // for 'radio' type
      height: 200, // for 'textarea' type
    },

    "separator1": "-----", // separator
    "separator2": { "type": "cm_separator" },

    "cut": { // with sub menus
      name: "Cut", 
      {
        items: {
          mySubmenu: {
            name: "Command 1"
              callback: function(key, opt){ 
                alert("Clicked on " + key); 
              }
            }
          }
        }
    }
  }
  
});

5. Here's a full list of configuration options you can use to customize the context menu.

// selector of contextMenu trigger
selector: null,

// where to append the menu to
appendTo: null,

// method to trigger context menu ["right", "left", "hover"]
trigger: 'right',

// hide menu when mouse leaves trigger / menu elements
autoHide: false,

// ms to wait before showing a hover-triggered context menu
delay: 200,

// flag denoting if a second trigger should simply move (true) or rebuild (false) an open menu
// as long as the trigger happened on one of the trigger-element's child nodes
reposition: true,

// Flag denoting if a second trigger should close the menu, as long as
// the trigger happened on one of the trigger-element's child nodes.
// This overrides the reposition option.
hideOnSecondTrigger: false,

//ability to select submenu
selectableSubMenu: false,

// Default classname configuration to be able avoid conflicts in frameworks
classNames: {
  hover: 'context-menu-hover', // Item hover
  disabled: 'context-menu-disabled', // Item disabled
  visible: 'context-menu-visible', // Item visible
  notSelectable: 'context-menu-not-selectable', // Item not selectable

  icon: 'context-menu-icon',
  iconEdit: 'context-menu-icon-edit',
  iconCut: 'context-menu-icon-cut',
  iconCopy: 'context-menu-icon-copy',
  iconPaste: 'context-menu-icon-paste',
  iconDelete: 'context-menu-icon-delete',
  iconAdd: 'context-menu-icon-add',
  iconQuit: 'context-menu-icon-quit',
  iconLoadingClass: 'context-menu-icon-loading'
},

// offset to add to zIndex
zIndex: 1,

// show hide animation settings
animation: {
  duration: 50,
  show: 'slideDown',
  hide: 'slideUp'
},

// events
events: {
  preShow: $.noop,
  show: $.noop,
  hide: $.noop,
  activated: $.noop
},

// default callback
callback: null,

// list of contextMenu items
items: {}

6. API methods.

// disable/enable a menu trigger
$(".trigger").contextMenu(false);
$(".trigger").contextMenu(true);

// show/hide the menu
$(".trigger").contextMenu();
$(".trigger").contextMenu({x: 123, y: 123});
$(".trigger").contextMenu("hide");

// destroy the menu
$.contextMenu('destroy', selector);
$.contextMenu('destroy');

7. Event handlers.

  • contextmenu: Trigger context menu to be shown for a trigger object.
  • prevcommand: Select / highlight the previous possible command
  • nextcommand: Select / highlight the next possible command
  • contextmenu:hide: Hide the menu
  • contextmenu:focus: React to a command item being focused
  • contextmenu:blur: Available on each context menu item.
  • keydown: Available on each context menu item.

Changelog:

v2.9.2 (2020-05-13)

  • Fix reflow when adding click layer to page

v2.9.1 (2020-05-07)

  • Fix error when closing the menu by clicking on the page without any element under that click point. 

v2.9.0 (2019-10-14)

  • Added dataAttr option to add arbitrary data attributes to menu items.

v2.8.1 (2019-10-05)

  • Added FontAwesome fab class to known classes.

v2.8.0 (2019-01-17)

  • Added support for events.preShow so you can enable default browser menu if needed

v2.7.1 (2018-10-03)

  • Fixed Font-awesome 5 icons not always visible in submenu
  • Fixed A context menu appears outside the screen Under certain conditions

v2.7.0 (2018-07-12)

  • Added support for Font Awesome 5

v2.6.5 (2018-07-10)

  • Add getting started to the documentation.
  • Fix typo in documentation which breaks the callback demo.

v2.6.4 (2018-03-17)

  • Bugs fixed.

v2.6.3 (2018-01-27)

  • Revert sauce launcer to fix sauce labs tests
  • Add options argument to events.activates.
  • Add `box-sizing: content-box;` to scss to fix bootstrap.

v2.6.2 (2017-10-31)

  • Ability to define touchstart as trigger.
  • Extra event activated that triggers after the menu is activated.
  • Flag denoting if a second trigger should close the menu.
  • Added update call to update visibility, disabled, icon and form value stats for items. 
  • Fix for out of bounds problem on window edges.
  • Broke build script after 2.5.0 which ment no updates to dist folder.

v2.6.0 (2017-09-09)

  • Fixed Dev dependency ended up in normal dependencies.

v2.5.0 (2017-07-16)

  • Callback function now supplies original event
  • Ability to define touchstart as trigger

v2.4.5 (2017-05-06)

  • ContextMenu appears with wrong position 
  • Check if given selected value is a 0, if it is a zero so return it as is
  • Events are never trigger when opening a contextMenu right after the other 
  • Accesskey jQuery Modal Dialog not working
  • Fix submenu hover not always staying active if hovering over a submenu item

v2.4.4 (2017-03-15)

  • Fixed: trigger is sometimes called on undefined objects because of typecheck on null. 

v2.4.3 (2017-02-28)

  • Changed the inline style causes a Content Security Policy violation if style-src 'unsafe-inline' is not defined in the policy. 
  • Added SauceLabs tests for common browsers.

v2.4.2 (2017-01-02)

  • Fixed: Focus not set on content editable element when right clicking the second time
  • Fixed: selectableSubMenu broke disabling click menu

v2.4.1 (2016-12-10)

  • Quick fix for error in visible check
  • Added Selectable Sub Menus
  • Fixed The contextmenu shows even if all items are set to visible:false

2016-10-26

  • v2.3.1

2016-06-18

  • Small fix for hover color of input item.

2016-05-25

  • added more options

This awesome jQuery plugin is developed by swisnl. For more Advanced Usages, please check the demo page or visit the official website.