jquery-contextify
v1.0.8
Published
A lightweight jQuery plugin for creating Bootstrap powered context menus.
Downloads
9
Readme
jQuery Contextify - Lightweight Context Menu
A lightweight jQuery plugin for creating Bootstrap powered context menus.
Setup
Load from CDN
The easiest way to get up and running is to load jQuery Contextify using a CDN. Make sure jQuery is loaded first though.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-contextify/1.0.7/jquery.contextify.min.js"></script>
or
<script src="//cdn.jsdelivr.net/jquery.contextify/1.0.7/jquery.contextify.min.js"></script>
Install with Bower
Use the following command to install jQuery Contextify using bower.
$ bower install jquery-contextify
Or simply add jquery-contextify
to your project's bower.json
.
"dependencies": {
"jquery-contextify": "latest"
}
Download
You can also just download the latest package.
- Download latest version
- or
curl -O https://raw.github.com/abeMedia/jquery-contextify/master/dist/jquery.contextify.js
Usage
jQuery Contextify needs to be activated via JavaScript.
$('.foo').contextify(options);
The menu items are passed as an array in options.items
. See the following example for creating a basic context menu.
<a class="foo" href="#" data-name="John">Click me</a>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-contextify/1.0.7/jquery.contextify.min.js"></script>
<script>
var options = {items:[
{header: 'Options'},
{text: 'First Link', href: '#'},
{text: 'Second Link', onclick: function(e) {
alert('Hello ' + e.data.name);
}},
{divider: true},
{text: 'Stuff', href: '#'}
]}
$('.foo').contextify(options);
</script>
This will initiate jQuery Contextify on the .foo
elements with the menu items specified in options.items
.
Options
| Name | Type | Default | Description |
|-----------|------|---------|-------------|
| items
| array | [] | An array of menu item objects. |
| action
| string | contextmenu
| The action on which to display the context menu (can be contextmenu
, click
or mouseover
). |
| menuId
| string | contextify-menu
| The id
attribute of the context menu. |
| menuClass
| string | dropdown-menu
| The class
attribute of the context menu. |
| headerClass
| string | dropdown-header
| The class
attribute of menu headers. |
| dividerClass
| string | divider
| The class
attribute of menu dividers. |
Copyright
© 2014-2016 Adam Bouqdib - http://abemedia.co.uk