Product Delivery
Targeted Sales
Collicitudin vel metus scelerisque ante commodo.
In Progress25% Completed
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>
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
}
})
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.
You can attach context menu to element only instead of whole card. Try clicking on this text and outside text to notice the difference.
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.
target
- is the equivalent of the data-target attribute. It identifies the html of the menu that will be displayed.
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 an e.preventDefault()
to cancel the browser event). context
- the DOM element where right click
urred.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
- DOM selector for dynamically added context elements.