#### Extras - Context Menu

Statistics Invoices Schedule

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

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

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

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

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

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

# | 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 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.context`event. 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.context`event. 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.context`event. 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.context`event. This event is fired when the dropdown has finished being hidden from the user.

    $('#myMenu').on('hidden.bs.context',function () {
    	// do something...
    });