contextMenu.js is a plugin to create windows like context menu with keyboard interaction, different type of inputs ,trigger events and much more.
Why contextMenu.js ?:
- Use as simple popup or as a context menu. With some twick can be used for multi purpose.
- Adjust position and size to fit in viewport.
- Keyboard interaction.
- Support different type of inputs (json, UL list) .
- Trigger Context menu with right-click, left-click,hover or any other mouse events.
- Css outside of javascript so you can edit the look of menu.
- Enable/disable options.
- Optional icons for commands.
- Lot of configurable options.
- Submenus
| Option | Default | Allowed | Description |
| triggerOn | click | click,hover, mousemove, dblclick and all mouse events | Event in which context menu is binded with a trigger. |
| displayAround | cursor | cursor , trigger (button) | Display context menu around cursor position or trigger position |
| mouseClick | left | left,right | which mouse button to trigger context menu if trigger event is mouse click or mouse up event. |
| verAdjust | 0 | Numeric value | Adjusting the vertical distance from its original pixel. |
| horAdjust | 0 | Numeric value | Adjusting the horizontal distance from its original pixel. |
| top | auto | auto,top position in px or % | Defines the exact top position relative to the containment where menu to be shown. |
| left | auto | auto,top position in px or % | Defines the exact left position relative to the containment where menu to be shown. |
| containment | window | window, any selector,jquery object, document object | Define the container inside which context menu will be contained. |
| winEventClose | true | true,false | If true close the context menu on window scroll and resize event. |
| sizeStyle | auto | auto, content | If auto, size of context menu depends on browser size and options you selected. If content size depends on content width and height. |
| position | auto | auto,left,right,top,bottom | Context menu adjust according to viewport. If other than auto is given it ill force contenxt menu to be on that position. It is considered only when displayAround is set to trigger. |
| Callback | Description |
| onOpen | This is called just before context menu opens. |
| afterOpen | This is called after context menu opens. |
| onClose | This is called just after context menu is closed. |
1. data : Which containg refrence to trigger and menu.
You can get trigger and menu using data.trigger and data.menu.
2. event : A event object which is binded with trigger to open context menu. Inside callback this refers to trigger element.
| Method | Description |
| menu | This mode is used to show context menu. Keyboard interaction and sub menus are activated in this mode. |
| popup | If you just want to display an popup window at your trigger point popup mode serve best. This will just show element defined in selector while adjusting it according to view port. |
| update | This mode is used to update the menu items (like enabling, disabling, icon change and function) and configuration option. |
| refresh | If new trigger with specific selector is added, this method is used to initialize context menu on those newly added elements. |
| destroy | Remove context menu instance for that trigger completely. |
| close | To manually close context menu. |
$('.trigger).contextMenu(method,selector,options)2. selector can be document object , jQuery object ,selector string or JSON object.
3. option, there are different options to change the behaviour of context menu. This parameter is optional where all options contain some default value. . If defined in menu mode you can provide input in two way.
1. By passing selector of ul list.
2. By passing a JSON containg menu defination.
1. UL List format
<ul class="contextMenu">
<li title="create button" onclick="doCreate()">
<img src="images/create.png" class="iw-mIcon" />Create</li>
<li title="update button" onclick="doUpdate()">
<img src="images/update.png" class="iw-mIcon" />Update
<ul>
<li onclick="doMerge()">Merge</li>
<li>Replace
<ul>
<li>Replace Top 100</li>
<li>Replace All</li>
</ul>
</li>
</ul>
</li>
<li onclick="doDelete()">
<img src="images/delete.png" class="iw-mIcon" />Delete
<ul>
<li>Soft Delete</li>
<li>Hard Delete</li>
</ul>
</li>
<li class="iw-mDisable">Disabled</li>
</ul>
1. To disable any option add "iw-mDisable" class in the option.
2. Submenu are ul list inside a option li.
3. Option icon have class "iw-mIcon".
JSON object format
var menu = [{
name: 'create',
img: 'images/create.png',
title: 'create button',
fun: function () {
say('i am add button')
}
}, {
name: 'update',
img: 'images/update.png',
title: 'update button',
fun: function () {
say('i am update button')
},
subMenu: [{
name: 'merge',
title: 'It will merge row',
fun: function () {
say('It will merge row')
}
}, {
name: 'replace',
subMenu: [{
name: 'replace top 100'
}, {
name: 'replace all'
}]
}]
}, {
name: 'delete',
img: 'images/create.png',
disable:true,
title: 'create button',
fun: function () {
say('i am add button')
},
submenu: [{
'name': 'soft delete',
}, {
'name': 'hard delete'
}]
}];
1. name : name of the option.
2. img :option icon image.
3. title : tiltes for the options.
4. disable : A boolean to tell weather that option is disabled or not. If true option is disabled.
5. fun :Function that will be executed on click of option.
6. submenu : A submenu defination which has all options available as we are giving for parent menu. Submenus can bgo to any level.
| Key | Operation |
| Up arrow | Go to previous option in menu. |
| Down arrow | Go to next option in menu. |
| Left arrow | Go to parent menu. |
| Right arrow | Go to sub(child) menu. |
| Page up | Go to first option. |
| Page down | Go to last option. |
| Esc key | Close context menu. |
| Enter Key | Trigger the function associated with option. |
Menus are closed in following actions of user.
1. On esc key press.
2. On clicking outside of window.
3. Window scroll or resize events(If winEventClose not set to false).
A menu configuration options and image icon, disabling, title and function can be changed dynamically. If you want to change the structure, you need to destroy menu and create again.
You also can't change the option name, as it its part of structure. To update a menu you can pass update json and configuration option.
Update JSON is similiar to input JSON but in this you need to only pass those key which you want to update. Ex.
var updateJson = [{ name: 'create', disable: 'true', }, { name: 'update', subMenu: [{ name: 'replace', disable: 'true', }] }];
$('.trigger').contextMenu('update', updateJson, { 'displayAround': 'trigger', 'containment': '#contaienr' });
You can also directly change on html dom.
If you know the selector of menu its great or else you can get menu object by.
var menu=$('.trigger').contextMenu('value','menu'); Now you can update it however you want.After that call update method( with configuration option, if you want to change it).
$('.trigger').contextMenu('update',updateJson,{
'displayAround':'trigger',
'containment':'#container'
});
Else if you are updating using update json add disable key with value of true(to disable) or false(to enable) in json. If you working on dynamic content you may require to add newly added element in trigger list.
You can refresh the trigger list using
$('.trigger').contextMenu('refresh');Note : Refresh method work only when contextMenu is already initialized to any one of element which belongs to that selector.
This method will destroy context menu binded with trigger element. To call destroy method.$('.trigger').contextMenu('destroy');value method return value associated with key passed as second argument.
ex :
$('.trigger').contextMenu('value',key);Here key are 'menu','menuId' and any configuration options.
Following classes are associated with context menu.| Class | Description |
| iw-contextMenu | All context menu get this class on initializing context menu |
| iw-cm-menu | This class is added on those which are activated in menu mode. |
| iw-mOverlay | This class is applied on overlay which come inside menu option when we disable that option |
| iw-mDisable | This class is added on menu options which are disabled. |
| iw-mSelected | This class is added on menu option which is currently focused. |
| iw-cm-arrow-right | If any menu option have submenu a arrow sign is added with this class to show it has submenu. |
| iw-mTrigger | This class is added on all triggers and also on menu option which have submenus. |
| iw-mIcon | This class is added on icon images used for menu options. |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent