# j-ContextMenu

> If the value isn't defined then the component uses name as value.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: en
Content-SHA256: 955e3a56eee2f17f84285a1096e6dee94784e5884f6771a37ccc016f7c95079b
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- supports 3 orientations `left`, `center` and `right`
- singleton
- works with Bootstrap Grid System
- works with touches


__Methods__:

Method: `component.show(orientation, targetElement, [items], clickCallback, [offsetX], [offsetY])`
- `orientation {String}` can be `left`, `center` or `right`
- `targetElement {Selector/jQuery/Element}` a target where the component will be visible
- `items {Array}` optional and must have this structure: `[{ name: String, value: String, icon: String }]` otherwise will be items read from the target's `data-options` attribute.
- `callback(selectedValue) {Function}` is triggered when the user clicks on the item
- `offsetX {Number}` optional can change offset X
- `offsetY {Number}` optional can change offset Y

Method: `component.hide()`

__Attributes__:
`targetElement` can contain `data-options="Name 1|fa-building|Value 1;Name 2|fa-github|Value 2;"` attribut with all items of the context menu.

If the `value` isn't defined then the component uses `name` as `value`.

__Global events__:

```javascript
ON('contextmenu', function(visible, component, target) {
    console.log('ContextMenu is', visible ? 'visible' : 'hidden');
});
```

Use it with `<ui-component name="contextmenu">`. When the component is not loaded yet, jComponent downloads it on first use from the address in `DEF.fallback` (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

```html example.html
<style>
	body { background-color: #F0F0F0; }
</style>

<ui-component name="contextmenu"></ui-component>

<div class="container">
	<a href="javascript:void(0)">Edit</a>
</div>

<script>
	$(document).on('click', 'a', function() {
		SETTER('contextmenu/show', 'left', this, [{ name: 'Print', icon: 'ti-print', value: 'print' }, { name: 'Copy', icon: 'ti-copy', value: 'copy' }, { name: 'Remove', icon: 'ti-times-circle', value: 'remove' }], function(item) {
			console.log('CLICK', item);
		});
	});
</script>
```