themelock.com - Limitless - Responsive Web Application Kit by Eugene Kopyov

Plugin initialization Context menu initialization options

Using data attributes

Add data-toggle="context" to any element that needs a custom context menu. And point data-target attribute to your custom context menu.

<div data-toggle="context" data-target=".context-menu"></div>

<div class="context-menu">
	<ul class="dropdown-menu">
		<li><a href="#">Action</a></li>
		<li><a href="#">Another action</a></li>
		<li class="divider"></li>
		<li><a href="#">Something else here</a></li>
	</ul>
</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 Panel and content elements attachment

Panel attachment

Current example demonstrates context menu attached to the whole panel. Add data-toggle="context" to the panel and point data-target attribute to the menu.

Element attachment

Current example demonstrates context menu attached to some element only instead of full panel. Right click on current panel title to see it in action

Inline attachment

Also context menu can be attached to the link or any other content elements like headings, paragraphs, span's, lists, labels, form components, buttons, button groups etc.

Exclude elements

Current example demonstrates context menu attached to the panel content, excluding <code>...</code> phrase tag. Try to right click on the code block.

Table attachment

Example with context menu attached to the whole table.

#	Description	Date
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

Example with context menu attached to the table row. Attached to the first row.

#	Description	Date
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

Example with context menu attached to the table cell only. Attached to cells with links.

#	Description	Date
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

Example with context menu attached to the table content. Attached to action icons.

#	Description	Date
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 colors

Dropdown submenu

Context dropdown menu supports multi level menus as it uses default Bootstrap dropdown-menu markup. As well as left sub menu direction using pull-left helper class.

Dropdown options

Since context dropdown menu supports default Bootstrap dropdown-menu markup, any existing menu options can be used: disabled items, icons, borders, dividers etc.

Dynamic replacement

Current example demonstrates context menu, which contains an item, modified dynamically using before: function () {...} plugin function.

Name on selection

Current example demonstrates context menu with function that shows menu name on item selection using onItem: function () {...} plugin function.

States color

Context menus support custom colors for active and hover states. Just add one or both .element-hover-* or .element-active-* classes to the context menu.

Solid color

Besides custom state colors, context dropdown menu supports predefined and custom solid background colors. Just add .bg-* class to the existing context menu.

Plugin events Context dropdown menu events

onShow 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...
});

Extras - Context Menu