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

在线实例

实例演示

使用方法

1. context.init({
2.     fadeSpeed: 100,
3.     filter: function ($obj){},
4.     above: ‘auto‘,
5.     preventDoubleContext: true,
6.     compress: false
7. });

Headers

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

Anchor Links

1. {
2. text: ‘My Link Title‘, 
3. href: ‘http://contextjs.com/‘, 
4. target: ‘_blank‘
5. }

Dividers

1. {
2. divider: true
3. }

Event Based Actions

1. {
2. text: ‘Event Based Link‘,
3. action: function(e){
4. e.preventDefault();
5. alert(‘Do Something‘);
6. }
7. }

Sub-Menus

1. {
2. text: ‘My Sub-menu‘,
3. subMenu: [menuObjects]
4. }

Tracking Links with Google Analytics

1. {
2. text: ‘context.js‘, 
3. href: ‘http://contextjs.com/context.js‘, 
4. target:‘_blank‘, 
5. action: function(e){
6. _gaq.push([‘_trackEvent‘, ‘ContextJS Download‘, this.pathname, this.innerHTML]);
7. }
8. }

参数详解

Updating Settings

1. context.settings({initSettings});

Attaching

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

Destroying

1. context.destroy(‘#download‘);

Context.js 右键菜单