A lightweight jQuery plugin for creating Bootstrap powered context menus
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
libs
src
test
.gitignore
.jshintrc
.travis.yml
CNAME
CONTRIBUTING.md
Gruntfile.js
LICENSE-GPL-2.0
README.md
bower.json
contextify.jquery.json
package.json

README.md

jQuery Contextify - Lightweight Context Menu

A lightweight jQuery plugin for creating Bootstrap powered context menus.

CDNJS Build Status Dependency Status

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.8/jquery.contextify.min.js"></script>

or

<script src="//cdn.jsdelivr.net/jquery.contextify/1.0.8/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.8/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