[轉]几款jQuery右键菜单插件介绍

From : http://hi.baidu.com/%CE%D2%BA%DC%B0%AE%D5%C5%B2%AE%C2%D7/blog/item/061bc251abf8a24b1138c2e3.html

 

在网页中使用自定义右键菜单，实现上皆为使用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。

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

右键点我

4.创建菜单项目。

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

    
• 剪切

    
• 复制

    
• 粘贴

    
• 编辑

    
• 删除

菜单项的图标要在css文件里设置相应

的背景。

.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.初始化菜单，添加菜单事件。

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, 这个类设置给菜单项中包含小箭头的元素。
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

这也是一个简单的右键菜单，菜单内容同样用

和
• 嵌套构造多级菜单。使用方法参看插件页面。

  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';