Context.js 右键菜单


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

在线实例

实例演示

使用方法

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

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]);
	}
	}

参数详解

ParamaterTypeDefaultDescription
fadeSpeedint100The speed in which the context menu fades in (in milliseconds)
filterfunctionnullFunction that each finished list element will pass through for extra modification.
abovestring || 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.
preventDoubleContextbooleantrueIf set to true, browser-based context menus will not work on contextjs menus.
compressbooleanfalseIf set to true, context menus will have less padding, making them (hopefully) more unobtrusive


Updating Settings


context.settings({initSettings});


ParamaterTypeDefaultDescription
settingsobjectnullThe 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]);


ParamaterTypeDefaultDescription
selectorstringnullThe jQuery (or css) selector of the element you want to apply the context menu to
menuObjectsarraynullAn array of objects that define the menus structure


Destroying


context.destroy('#download');


ParamaterTypeDefaultDescription
selectorstringnullThe jQuery (or css) selector of the element you want to remove the context menu from

云盘内容


 jQuery插件大全打包

HTML5+CSS3+PHP+jQuery等示例
大小
170M(300+个文件)

注意:示例只是当前的内容,【下载】的是全部jQuery插件一起打包后的文件。

下载地址