About

ContextJS is a lightweight solution for contextual menus. Currently, there are two versions.

The first is to be used with Twitters Bootstrap (bootstrap.css specifically). If you do not use or want to use bootstrap.css, there is a standalone stylesheet to give the menu it's base styles.

Features

Linted: Valid JS
Can be used with or without Twitters Bootstrap.css
Event Based Links
Anchor Links
Headers
Dividers
Recursive Menus (infinite depth)
Vertical Space Detection (turns into a "dropup")
Horizontal Space Detection (Drops to the left instead of right)
Add/Delete menus Dynamically
Even works on Inline Links

Public API

Initializing

context.init({
    fadeSpeed: 100,
    filter: function ($obj){},
    above: 'auto',
    preventDoubleContext: true,
    compress: false
});

Paramater	Type	Default	Description
fadeSpeed	int	100	The speed in which the context menu fades in (in milliseconds)
filter	function	null	Function that each finished list element will pass through for extra modification.
above	string \|\| boolean	'auto'	If set to 'auto', menu will appear as a "dropup" if there is not enough room below it. Settings to true will make the menu a "popup" by default.
preventDoubleContext	boolean	true	If set to true, browser-based context menus will not work on contextjs menus.
compress	boolean	false	If set to true, context menus will have less padding, making them (hopefully) more unobtrusive

Updating Settings

context.settings({initSettings});

Paramater	Type	Default	Description
settings	object	null	The init settings can be placed in here to update context menus written to the DOM. Changing settings between attaching menus will give the menus their own options.

Attaching

context.attach('#download', [menuObjects]);

Paramater	Type	Default	Description
selector	string	null	The jQuery (or css) selector of the element you want to apply the context menu to
menuObjects	array	null	An array of objects that define the menus structure

Destroying

context.destroy('#download');

Paramater	Type	Default	Description
selector	string	null	The jQuery (or css) selector of the element you want to remove the context menu from

Menu Objects

Headers

{
	header: 'My Header Title'
}

Anchor Links

{
	text: 'My Link Title', 
	href: 'http://contextjs.com/', 
	target: '_blank'
}

Dividers

{
	divider: true
}

Event Based Actions

{
    text: 'Event Based Link',
    action: function(e){
    	e.preventDefault();
        alert('Do Something');
    }
}

Sub-Menus

{
    text: 'My Sub-menu',
    subMenu: [menuObjects]
}

Tracking Links with Google Analytics

{
	text: 'context.js', 
	href: 'http://contextjs.com/context.js', 
	target:'_blank', 
	action: function(e){
		_gaq.push(['_trackEvent', 'ContextJS Download', this.pathname, this.innerHTML]);
	}
}

Changelog

Version 1.0 (Initial Release)

Version 1.5

Added Initialize Options
Removal of Dropdown ID paramater
Added Event-based items
Added Headers
Added Recursive Menus
Vertical Space Detection

Version 2.0

Refined Vertical Space Detection
Added Horizontal Space Detection
Added an optional standalone CSS file for use without bootstrap
Added preventDoubleContext parameter in the init function
Added target parameter to links
Fixed event bubbling (multi-level dropdowns in the DOM)

Version 2.1

Added settings function
Added compressed code & styles
Cleaned up context.js code

Version 2.1.1

Fixed multiple menus becoming visible
Refined Support for IE7 & IE8

Notes

Stray trailing commas are disliked by IE. Make sure when creating your menu, you take that into account, elsewise, you will get the SCRIPT5007: Unable to get value of the property error.

Credits

Twitter Bootstrap

context.js