Initialization
Using Data Attributes
Add data-toggle="context" to any element that needs a custom context menu and via CSS set position: relative to the element. Point data-target attribute to your custom context menu.
<div class="context" data-toggle="context" data-target="#context-menu">
...
</div>
<div id="context-menu">
<ul class="dropdown-menu" role="menu">
<li><a tabindex="-1" href="#">Action</a></li>
...
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
Using Javascript
Call the context menu via JavaScript:
$('.context').contextmenu({
target:'#context-menu',
before: function(e,context) {
// execute code before context menu if shown
},
onItem: function(context,e) {
// execute on menu item selection
}
})
Content Attachment
Attach To Card
This example demonstrate how to attach context menu to whole card. Add data-toggle="context" to the card and point data-target attribute to the menu.
Attach To Elements
You can attach context menu to element only instead of whole card. Try clicking on this text and outside text to notice the difference.
Exclude Elements
You can activate context menu within div but exclude elements like span, anchor, label, paragraphs, form components, buttons etc.. In this example we have excluded this span text. Try right click on text on red.
Options
Target
target - is the equivalent of the data-target attribute. It identifies the html of the menu that will be displayed.
Before
before - is a function that is called before the context menu is displayed. If this function returns false, the context menu will not be displayed. It is passed two parameters,
e- the original event. (You can do ane.preventDefault()to cancel the browser event).context- the DOM element where right click urred.
On Item
onItem - is a function that is called when a menu item is clicked. Useful when you want to execute a specific function when an item is clicked. It is passed two parameters,
context- the DOM element where right click occured.e- the click event of the menu item, $(e.target) is the item element.
Scopes
scopes - DOM selector for dynamically added context elements.