Context.js Right-click menu

Contextjs is a lightweight solution for contextual menus. Currently, there is, and versions.

The first is to being used with Twitters Bootstrap (Bootstrap.css specifically). If you don't use or want to use BOOTSTRAP.CSS, there are a standalone stylesheet to give the menu it ' s base styles.

Features

• Linted:valid JS
• Can is 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

Online example

Example Demo

How to use

2. Context. Init({
4. Fadespeed:
6. Filter: function ($obj) {},
8. Above: ' auto ',
10. Preventdoublecontext: true,
12. Compress: false
14. });

CopyHeaders

1. {
2. Header: ' My header Title '
3. }

CopyAnchor Links

1. {
2. Text: ' My Link Title ',
3. href: ' http://contextjs.com/',
4. Target: ' _blank '
5. }

CopyDividers

1. {
2. Divider: true
3. }

CopyEvent Based Actions

1. {
2. text:  ' event based link '
3. action:function (e
4. e.
5. alert ( ' do something '
6. }

CopySub-menus

1. {
2. Text: ' My sub-menu ',
3. submenu: [menuobjects]
4. }

CopyTracking Links with Google Analytics

2. {
4. Text: ' context.js ',
6. href: ' http://contextjs.com/context.js ',
8. Target:' _blank ',
10. Action: function(e) {
12. _gaq. Push([' _trackevent ', ' Contextjs Download ', this . Pathname, this . InnerHTML]);
14. }
16. }

CopyDetailed parameters

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 would pass through for extra modification.
Above	string | | Boolean	' Auto '	If set to ' auto ', menu would appear as a "dropup" if there is not enough the class below it. Settings to True would make the menu a "popup" by default.
Preventdoublecontext	Boolean	True	If set to True, browser-based context menus won't work on Contextjs menus.
Compress	Boolean	False	If set to true, context menus'll has less padding, making them (hopefully) more unobtrusive

Updating Settings

1. Context. Settings({initsettings});

Copy

paramater	Type	Default	Description
Settings	Object	Null	The init settings can is placed in this-update context menus written to the DOM. Changing settings between attaching me NUS'll give the menus their own options.

Attaching

1. Context. Attach(' #download ', [menuobjects]);

Copy

paramater	Type	Default	Description
Selector	String	Null	The JQuery (or CSS) selector of the element want to apply the context menu to
Menuobjects	Array	Null	An array of objects that define the menus structure

Destroying

1. Context. Destroy(' #download ');

Copy

paramater	Type	Default	Description
Selector	String	Null	The JQuery (or CSS) selector of the element want to remove the context menu from

Download

Context.js Right-click menu