### Context Menu

#### 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 an `e.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.

#### Events

#### onShow Event

`show.bs.context` - This event fires immediately when the menu is opened.

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

#### onShown Event

`shown.bs.context` - This event is fired when the dropdown has been made visible to the user.

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

#### onHide Event

`hide.bs.context` - This event is fired immediately when the hide instance method has been called.

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

#### onHidden Event

`hidden.bs.context` - This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).

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