Plugin initialization
Context menu initialization optionsUsing data attributes
Add data-toggle="context"to any element that needs a custom context menu. And point data-targetattribute to your custom context menu.
<div data-toggle="context" data-target=".context-menu"></div><div class="context-menu"> <div class="dropdown-menu"> <a href="#" class="dropdown-item">Action</a> <a href="#" class="dropdown-item">Another action</a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">Something else here</a> </div></div>Using Javascript
Also content menu can be initialized via JavaScript call. In this case data attributes are not required, target can be set in plugin configuration.
$('.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 }, scopes: 'tbody >tr'})Content attachment
Card and content elements attachmentCard attachment
data-toggle="context"to the card and point data-targetattribute to the menu.
Element attachment
card titleto see it in action
Inline attachment
Exclude elements
<code>...</code>phrase tag. Try to right click on the code block.
Table attachment
| # | Description | Date | Actions |
|---|---|---|---|
| 1 | Cozy sphinx waves quart jug of bad milk. | July 13, 2014 | |
| 2 | Few quips galvanized the mock jury box. | July 14, 2014 | |
| 3 | Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph. | July 15, 2014 |
Row attachment
| # | Description | Date | Actions |
|---|---|---|---|
| 1 | Cozy sphinx waves quart jug of bad milk. | July 13, 2014 | |
| 2 | Few quips galvanized the mock jury box. | July 14, 2014 | |
| 3 | Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph. | July 15, 2014 |
Cell attachment
| # | Description | Date | Actions |
|---|---|---|---|
| 1 | Cozy sphinx waves quart jug of bad milk. | July 13, 2014 | |
| 2 | Few quips galvanized the mock jury box. | July 14, 2014 | |
| 3 | Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph. | July 15, 2014 |
Table content attachment
| # | Description | Date | Actions |
|---|---|---|---|
| 1 | Cozy sphinx waves quart jug of bad milk. | July 13, 2014 | |
| 2 | Few quips galvanized the mock jury box. | July 14, 2014 | |
| 3 | Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph. | July 15, 2014 |
Context menu options
Dropdown menu options and colorsDropdown submenu
Dropdown options
dropdown-menumarkup, any existing menu options can be used: disabled items, icons, borders, dividers etc.
Dynamic replacement
before: function () {...}plugin function.
Name on selection
onItem: function () {...}plugin function.
Menu sizing
Solid color
.bg-*class to the existing context menu.
Plugin events
Context dropdown menu eventsonShow event
Current example demonstrates context menu with show.bs.contextevent. This event fires immediately when the context dropdown menu is opened.
$('#myMenu').on('show.bs.context',function () { // do something...});onShown event
Current example demonstrates context menu with shown.bs.contextevent. This event is fired when the dropdown has been made visible to the user.
$('#myMenu').on('shown.bs.context',function () { // do something...});onHide event
Current example demonstrates context menu with hide.bs.contextevent. This event is fired immediately when the hide instance method has been called.
$('#myMenu').on('hide.bs.context',function () { // do something...});onHidden event
Current example demonstrates context menu with hidden.bs.contextevent. This event is fired when the dropdown has finished being hidden from the user.
$('#myMenu').on('hidden.bs.context',function () { // do something...});