几款jQuery右键菜单插件介绍

在网页中使用自定义右键菜单，实现上皆为使用javascript禁用浏览器默认的右键菜单，然后在网页中响应鼠标右键事件，弹出自定义的菜单。

类似右键菜单的组件网上很多。一般而言，改变浏览器的默认菜单应当慎用，这会使多数用户感到不习惯。但是在企业Web应用中，用户的使用环境更加可控，在这种应用中使用自定义右键菜单会更加适合。

以下列举几款比较成熟的jQuery右键菜单插件，我们将逐一介绍，请读者自行比较，并根据自己的需求选择。

1.VERY SIMPLE CONTEXT MENU

-Intekhab A Rizvi

Project Page: http://intekhabrizvi.wordpress.com/2010/01/28/jquery-very-simple-contextmenu-plugin/

jQuery Very Simple ContextMenu Plugin

使用：

1.在插件主页下载所需文件。

2.在你的html文件中包含jquery库，vscontext.jquery.js，css/vscontext.css。

<script src="jquery.js" type="text/javascript"><!--mce:0--></script>

<script src="vscontext.jquery.js" type="text/javascript"><!--mce:1--></script>

3.在html中创建要响应右键菜单的元素。

<div id="item">右键点我</div>

4.创建菜单项目。

<li>的class有seprator的，会在该项下面有一条分割线。

<div class="vs-context-menu">

<ul>

    <li class="cut seprator"><a id="menu_1" href="javascript:cut();">剪切</a></li>

    <li class="copy"><a id="menu_2" href="javascript:copy();">复制</a></li>

    <li class="paste seprator"><a id="menu_3" href="javascript:paste();">粘贴</a></li>

    <li class="edit"><a id="menu_4" href="javascript:edit();">编辑</a></li>

    <li class="delete"><a id="menu_5" href="javascript:del();">删除</a></li>

</ul>

</div>

菜单项的图标要在css文件里设置相应<li>的背景。

.vs-context-menu li.cut a { background-image: url(icons/cut.png); }

.vs-context-menu li.copy a { background-image: url(icons/copy.png); }

.vs-context-menu li.paste a { background-image: url(icons/paste.png); }

.vs-context-menu li.edit a { background-image: url(icons/edit.png); }

.vs-context-menu li.delete a { background-image: url(icons/delete.png); }

5.初始化菜单，添加菜单事件。

<script type="text/javascript"><!--mce:2--></script>

2.CONTEXT MENU-Cory S.N. LaViska

Project Page: http://abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin/

jQuery Context Menu Plugin

使用：见插件官方网站。

Methods:

disableContextMenu()	禁用匹配元素上的右键菜单。
enableContextMenu()	启用匹配元素上的右键菜单。
disableContextMenuItems(”#option1,#option2,…”)	禁用匹配的菜单项，如果参数为null，禁用所有项。
enableContextMenuItems(”#option1,#option2,…”)	期用匹配的菜单项，如果参数为null，禁用所有项。
destroyContextMenu()	解除元素与右键菜单的绑定。

Callback:

action	选中的菜单项所对应的动作。
el	触发菜单的元素
pos.x	菜单点击时，鼠标位置相对于触发元素的水平位移。
pos.y	菜单点击时，鼠标位置相对于触发元素的垂直位移。
pos.docX	菜单点击时，鼠标位置相对于页面的水平位移。
pos.docY	菜单点击时，鼠标位置相对于页面的垂直位移。

3.JEEGOOCONTEXT

-Erik van den Berg

Project Page: http://www.planitworks.nl/jeegoocontext/

JEEGOOCONTEXT

菜单可以通过以下两种方法初始化：

$('selector').jeegoocontext('menu_id');

$('selector').jeegoocontext('menu_id', 'options');

“selector”为菜单组建要绑定的内容，可以是任何jQuery选择器。

“menu_id”为菜单ID(没有 “#”)。

“options”为对象，可以配置属性和回调函数。

所有菜单内容都可以从菜单解绑，只需调用：

$ ('context').nojeegoocontext();

​Options properties:​

livequery	Boolean	undefined	Menu	如为true, 菜单内容通过livequery生成并动态加载。
hoverClass	String	‘hover’	Menu	这个CSS类在鼠标悬停在菜单项或其直接子项时被设置。
activeClass	String	‘active’	Global	这个CSS类设置给当前活动的菜单 (右键点击会弹出菜单的区域)。 这个变量是全局的，在使用多个菜单时只需要设置一次。如果重复设置，其值为最后提供的。
menuClass	String	‘jeegoocontext’	Global	所有的菜单都必须包含这个CSS类。这个变量是全局的，在使用多个菜单时只需要设置一次。如果重复设置，其值为最后提供的。
autoAddSubmenuArrows	Boolean	true	Menu	如为true，则自动为有子项的菜单项添加指示箭头。
submenuClass	String	‘submenu’	Menu	如果autoAddSubmenuArrows为true, 这个类设置给菜单项中包含小箭头的<span>元素。
separatorClass	String	‘separator’	Menu	当某个菜单项含有此类，则在按键盘上下键切换菜单项时，该菜单项被跳过。
fadeIn	Number	200	Menu	菜单和子级菜单淡入的时间，单位为毫秒。
delay	Number	300	Menu	鼠标移出父菜单项时，其子菜单隐藏的延迟时间，单位为毫秒。
keyDelay	Number	100	Menu	上下键切换菜单项的延迟时间，单位为毫秒。
widthOverflowOffset	Number	0	Menu	可以在宽度溢出时使用。例如设置为20时，菜单和子菜单的右部总是离窗口右边界有20px的间距。
heightOverflowOffset	Number	0	Menu	可以在高度溢出时使用。例如设置为20时，菜单和子菜单的底部总是离窗口下边界有20px的间距。
submenuLeftOffset	Number	0	Menu	子菜单相对于父菜单的水平位移。如为-3，每个子菜单左部将有3px与父菜单重叠。
submenuTopOffset	Number	0	Menu	子菜单相对于父菜单的垂直位移。如为-3，每个子菜单将比其父菜单项高出3px。当然，在高度溢出的情况下，此值被忽略。
operaEvent	String	‘dblclick’	Menu	在Opera的9.5以前老版本中浏览器右键菜单时是禁止重写的，这个事件用来定义在Opera中如何打开菜单。
event	String	undefined	Menu	此项被设置时，定义的事件将用来取代右键打开菜单。优先于operaEvent属性。例如，设置为’click’将使用左键打开菜单。

​Options callbacks​

可设置以下4个回调：

onShowonHoveronSelectonHide

每个回调接收两个参数：e 和 context，e为该事件的来源元素，context为菜单弹出所在的区域。利用这些回调函数，可以用return false的方法取消菜单事件的默认行为。

onShow	menu	Right-click on bound context.	隐藏页面上所有菜单。在页面上删除所有处于active的菜单及菜单项的active类。为当前点击的内容添加active类。淡入菜单。
onHover	menu-item	Mouseover on menu-item.	定位并淡入子级菜单。
onSelect	menu-item	Click on menu-item.	删除当前处于active的菜单或菜单项的active类。隐藏菜单。
onHide	menu	Click on document.	在页面上删除所有处于active的菜单及菜单项的active类。隐藏菜单。

4.JQUERY CONTEXT MENU SCRIPT

-Dynamic Drive

Project Page: http://www.dynamicdrive.com/dynamicindex1/contextmenu.htm

jQuery Context Menu script

这也是一个简单的右键菜单，菜单内容同样用<ul>和<li>嵌套构造多级菜单。使用方法参看插件页面。

5.CONTEXT MENU-Chris Domigan

Project Page: http://www.trendskitchens.co.nz/jquery/contextmenu/

ContextMenu plugin

这也是一个名为Context Menu的插件。

使用：

参数：

menu_id

通过引用菜单的ID，你可以在多个元素上绑定相同的菜单。如：

$("table td").contextMenu("myMenu")

将会把ID为”myMenu”的菜单绑定到所有的表格单元格上。

​settings​

settings支持以下属性：

bindings	包含”id”:function对的对象。提供的函数为点击时的动作。触发菜单的元素作为第一个参数传递给该句柄。
menuStyle	包含styleName:value对的对象，定义菜单容器ul的样式。
itemStyle	包含styleName:value对的对象，定义菜单项li的样式。
itemHoverStyle	包含styleName:value对的对象，定义菜单项li的悬停样式。
shadow	布尔值，默认为true。菜单是否显示阴影。
eventPosX	允许你定义菜单弹出的位置，默认为pageX。IE6下需设置为clientX。
eventPosY	允许你定义菜单弹出的位置，默认为pageX。IE6下需设置为clientY。
onContextMenu(event)	在菜单显示前调用。如果返回false，将不显示菜单。
onShowMenu(event, menu)	在菜单显示前调用。它将传递一个reference给菜单元素，并允许你在菜单显示之前手动修改输出，你可以在菜单显示给用户之前，显示或隐藏参数或其他任何东西。该函数必须返回menu

另外的，你可以调用：

$.contextMenu.defaults(settings)

为所有菜单定义一个默认样式。

6.JQUERY CONTEXTMENU PLUGIN-Matt Kruse

Project Page: http://www.javascripttoolbox.com/lib/contextmenu/index.php

这又是一个名叫ContextMenu的右键菜单插件。这个插件非常强大，作者写有一套Javascript Toolbox。

jQuery ContextMenu Plugin

使用：

$(function() {

    $(".context").contextMenu([menu], {options});

});

菜单数组结构：

[

  // Key = Option Content, Value = function to execute when option is clicked

  { 'Option Content' : function(menuItemClicked,menuObject) { } } ,

  // A constant to represent a separator item

  $.contextMenu.separator,

  // A more complex option with each option declared explicitly

  // Key = Option Content, Value = Object defining properties

  { 'Advanced Option' :

    {

      // 所有的属性都是可选的

      // The function to be executed when the option is clicked.

      // Arguments passed to this function are:

      //   menuItemClicked - A reference to the DIV containing the option clicked

      //   menuObject - A reference to the contextMenu object

      // Return false to not close the menu when the option is clicked.

      //   Return anything else (or nothing) for normal behavior

      onclick: function(menuItemClicked,menuObject) { },

      // An additional class name to apply to the option

      className: 'name',

      // The class name to apply to the option when it is hovered over

      hoverClassName: 'name',

      // The background-image to use for this icon.

      // If a theme doesn't support background images, it won't be displayed.

      // A theme's CSS should explicitly take this into account.

      icon: 'image.gif',

      // Set to true to disable an option.

      disabled: false,

      // Title attribute text to show when the mouse is over an option

      title: 'Title Text',

      // Function to call when this option is hovered over.

      // Arguments passed to this function are:

      //   className - The class name (string) that is defined in the options

      //               to be applied for hover

      hoverItem: function(className) { },

      // Function to call when this option is no longer hovered over.

      // Arguments passed to this function are:

      //   className - The class name (string) that is defined in the options

      //               to be removed

      hoverItemOut: function(className) { }

    }

  }

]

参数：

{

  // true|false 是否显示菜单阴影

  shadow:true,

  // 菜单阴影的位置偏移，

  // 如果设置了，覆盖单独的X, Y偏移

  shadowOffset:0,

  // 菜单阴影的偏移, X, Y

  // (可以是负数)

  shadowOffsetX:5,

  shadowOffsetY:5,

  // 阴影默认和菜单一样大，这里的值让阴影比菜单大或小一点

  // 这里设置为-3使看上去效果最好

  shadowWidthAdjust:-3,

  shadowHeightAdjust:-3,

  // 阴影透明度

  shadowOpacity:.2,

  // 设置给显示阴影的div的class

  shadowClass:'context-menu-shadow',

  // 阴影颜色

  shadowColor:'black',

  // 菜单相对鼠标点击位置的偏移

  offsetX:0,

  offsetY:0,

  // jQuery选择器，定义菜单attach的DOM

  appendTo:'body',

  // 菜单显示方向

  direction:'down',

  // 保持菜单在屏幕可见区域

  constrainToScreen:true,

  // jQuery过渡效果，显示和隐藏菜单

  showTransition:'show',

  hideTransition:'hide',

  // 过渡的速度 - slow/normal/fast/#ms

  showSpeed:'',

  hideSpeed:'',

  // 显示/隐藏菜单以后的回调函数

  showCallback:null,

  hideCallback:null,

  // CSS 类名 to apply to the generated menu HTML.

  // 参见http://www.JavascriptToolbox.com/lib/contextmenu/#themes

  className:'context-menu',

  itemClassName:'context-menu-item',

  itemHoverClassName:'context-menu-item-hover',

  disabledItemClassName:'context-menu-item-disabled',

  disabledItemHoverClassName:'context-menu-item-disabled-hover',

  separatorClassName:'context-menu-separator',

  innerDivClassName:'context-menu-item-inner',

  // 类名前缀 to prepend to the theme name for css styling

  themePrefix:'context-menu-theme-',

  // 主题名，包括: 'default','xp','vista','osx','human','gloss'

  // Multiple themes may be applied with a comma-separated list.

  theme:'default',

  // A flag to determine if an iframe shim should be used for <=IE6 on Windows

  // This is to prevent selectbox/flash/etc bleed-thru.

  // If animations cause problems in <=IE6 and you don't _need_ an iframe,

  // set this to false.

  useIframe:/*@cc_on @*//*@if (@_win32) true, @else @*/false,/*@end @*/

  // 构造菜单

  // Arguments:

  //   menu: Either String, Function, or Array

  //         String - a jQuery selector used to get the menu content on the page

  //         Function - Function to run each time menu is displayed. This

  //                    function should return an Array of menu options

  //         Array - An array of options in the required format

  //   opts: An Object of options, overriding any or all of the options here

  // Returns:

  //    contextMenu object

  create: function(menu,opts) { },

  // Create the iframe object to show behind the menu.

  // Arguments: none

  // Returns: iframe object

  createIframe: function() { } ,

  // Accept an Array representing a menu structure and turn it into HTML

  // Arguments:

  //   menu: The Array of options

  //   cmenu: The contextMenu object

  // Returns:

  //   DOM object containing the html for the menu

  createMenu: function(menu,cmenu) { },

  // Create the DOM object for an individual option, called by createMenu

  // Arguments:

  //   label: The text to display

  //   obj: Either a Function or an Object

  //        Function - runs when the option is clicked

  //        Object - an Option structure as described in Menu Array Structure

  // Returns:

  //    DOM object containing html for a single option

  createMenuItem: function(label,obj) { },

  // 创建一个分割线行

  // Arguments: none

  // Returns:

  //    DOM object containing html for the separator

  createSeparator: function() { },

  // Determine if an individual item is currently disabled. This is called each

  // time the item is hovered or clicked because the disabled status may change

  // at any time. You can override this function with app-specific functionality

  // to determine which options should be disabled based on business rules.

  // Arguments:

  //   item: DOM object of the Option being checked

  // Returns:

  //   boolean

  isItemDisabled: function(item) { },

  // 鼠标移入移出调用

  // no return value

  // Arguments:

  //   className: The hover class to apply or remove

  // Returns:

  //   none

  hoverItem: function(className) { },

  hoverItemOut: function(className) { },

  // 在菜单后面创建用来显示阴影的DOM元素

  // Arguments:

  //   cmenu: contextMenu object

  // Returns:

  //   DOM object containing html for the shadow

  createShadow: function(cmenu) { },

  // Display the shadow object, given the position of the menu itself.

  // Arguments:

  //   x: The x (left) position of the menu

  //   y: The y (top) position of the menu

  //   e: The event that triggered the context menu

  // Returns:

  //   none

  showShadow: function(x,y,e) { },

  // A hook to call before the menu is shown, in case special processing needs

  // to be done. Using this you can modify the menu contents, etc on the fly.

  // Arguments:

  //   none

  // Returns:

  //   boolean: false to cancel the default show operation, true to work as normal

  beforeShow: function() { return true; },

  // 使用指定的过渡方式使菜单可见

  // Arguments:

  //   target: The object that originally caught the contextmenu event

  //   e: The original event

  // Returns:

  //   none

  show: function(target,e) { },

  // 得到菜单应该显示的位置，给出右击事件的x, y

  // Arguments:

  //   clickX: The x (left) position of the click event

  //   clickY: The y (top) position of the click event

  //   cmenu: The contextMenu object

  //   e: The original event

  // Returns:

  //   指定菜单显示的位置 {'x':x,'y':y}

  getPosition: function(clickX,clickY,cmenu,e) { },

  // 隐藏菜单

  // Arguments:

  //   none

  // Returns:

  //   none

  hide: function() { }

}

设置默认参数：

// 关闭所有菜单的阴影

$.contextMenu.shadow = false;

// 设置所有菜单的主题为'xp'

$.contextMenu.theme = 'xp';