Windows Like Right Click Context Menu with jQuery

File Size: 25.5 KB
Views Total: 1961
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Windows Like Right Click Context Menu with jQuery

A lightweight jQuery context menu plugin that displays a Windows like popup menu with icons as you right click on a given container.

How to use it:

1. Load jQuery library together with the jquery.contextmenu.css and jquery.contextmenu.js in your Html page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.contextmenu.js"></script>
<link href="jquery.contextmenu.css" rel="stylesheet">

2. Call the plugin on where you wish to enable the context menu and create your own menu using items array. Icon needs to be 16x16px.

$('.something').contextPopup({
  title: 'Some title',
  items: [{
      label:'Item #1', 
      icon:'icon1.png', 
      action:function() { alert('hi'); }
    },{
      label:'Item #2', 
      icon:'icon2.png', 
      action:function() { alert('yo');
    },null, // divider {
      label:'Item #3', 
      icon:'icon3.png', 
      action:function() { alert('bye'); }, 
      isEnabled: function() { return false; }
    },
  ]
});

3. The default settings.

$('.something').contextPopup({
  contextMenuClass: 'contextMenuPlugin',
  linkClickerClass: 'contextMenuLink',
  gutterLineClass: 'gutterLine',
  headerClass: 'header',
  seperatorClass: 'divider',
  title: '',
  items: []
});

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