几款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 >
<ul>
    <li ><a id="menu_1" href="javascript:cut();">剪切</a></li>
    <li ><a id="menu_2" href="javascript:copy();">复制</a></li>
    <li ><a id="menu_3" href="javascript:paste();">粘贴</a></li>
    <li ><a id="menu_4" href="javascript:edit();">编辑</a></li>
    <li ><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';

7.CONTEXTMENU-Xuanye

Project Page: http://code.google.com/p/xjplugin/source/browse/trunk/ControlsSample/Javascripts/Plugins/jquery.contextmenu.js
这是一个国人在另一个右键菜单脚本的基础上，修改bug并jQuery插件化得到的插件……小巧易用，功能还不错，菜单内容为json传入，而不是把ul li格式化。

ContextMenu

话不多说，直接上Demo完整代码。参数使用方法请看参看注释和示例。
jquery.contextmenu.js

/* --------------------------------------------------
参数说明
option: {Number, items:Array, onShow:Function, rule:JSON}
成员语法(三种形式)      -- para.items
-> {text:String, icon:String, type:String, alias:String, Number, items:Array}             --      菜单组
-> {text:String, icon:String, type:String, alias:String, action:Function }                              --      菜单项
-> {type:String}                                                                                                                                                --      菜单分隔线
--------------------------------------------------*/
(function($) {
    function returnfalse() { return false; };
    $.fn.contextmenu = function(option) {
        option = $.extend({ alias: "cmroot", 150 }, option);
        var ruleName = null, target = null,
            groups = {}, mitems = {}, actions = {}, showGroups = [],
        itemTpl = "<div unselectable=on><nobr unselectable=on><img src='$[icon]' align='absmiddle'/><span unselectable=on>$[text]</span></nobr></div>";
        var gTemplet = $("<div/>").addClass("b-m-mpanel").attr("unselectable", "on").css("display", "none");
        var iTemplet = $("<div/>").addClass("b-m-item").attr("unselectable", "on");
        var sTemplet = $("<div/>").addClass("b-m-split");
        //创建菜单组
        var buildGroup = function(obj) {
            groups[obj.alias] = this;
            this.gidx = obj.alias;
            this.id = obj.alias;
            if (obj.disable) {
                this.disable = obj.disable;
                this.className = "b-m-idisable";
            }
            $(this).width(obj.width).click(returnfalse).mousedown(returnfalse).appendTo($("body"));
            obj = null;
            return this;
        };
        var buildItem = function(obj) {
            var T = this;
            T.title = obj.text;
            T.idx = obj.alias;
            T.gidx = obj.gidx;
            T.data = obj;
            T.innerHTML = itemTpl.replace(/$[([^]]+)]/g, function() {
                return obj[arguments[1]];
            });
            if (obj.disable) {
                T.disable = obj.disable;
                T.className = "b-m-idisable";
            }
            obj.items && (T.group = true);
            obj.action && (actions[obj.alias] = obj.action);
            mitems[obj.alias] = T;
            T = obj = null;
            return this;
        };
        //添加菜单项
        var addItems = function(gidx, items) {
            var tmp = null;
            for (var i = 0; i < items.length; i++) {
                if (items[i].type == "splitLine") {
                    //菜单分隔线
                    tmp = sTemplet.clone()[0];
                } else {
                    items[i].gidx = gidx;
                    if (items[i].type == "group") {
                        //菜单组
                        buildGroup.apply(gTemplet.clone()[0], [items[i]]);
                        arguments.callee(items[i].alias, items[i].items);
                        items[i].type = "arrow";
                        tmp = buildItem.apply(iTemplet.clone()[0], [items[i]]);
                    } else {
                        //菜单项
                        items[i].type = "ibody";
                        tmp = buildItem.apply(iTemplet.clone()[0], [items[i]]);
                        $(tmp).click(function(e) {
                            if (!this.disable) {
                                if ($.isFunction(actions[this.idx])) {
                                    actions[this.idx].call(this, target);
                                }
                                hideMenuPane();
                            }
                            return false;
                        });

                    } //Endif
                    $(tmp).bind("contextmenu", returnfalse).hover(overItem, outItem);
                } //Endif
                groups[gidx].appendChild(tmp);
                tmp = items[i] = items[i].items = null;
            } //Endfor
            gidx = items = null;
        };
        var overItem = function(e) {
            //如果菜单项不可用
            if (this.disable)
                return false;
            hideMenuPane.call(groups[this.gidx]);
            //如果是菜单组
            if (this.group) {
                var pos = $(this).offset();
                var width = $(this).outerWidth();
                showMenuGroup.apply(groups[this.idx], [pos, width]);
            }
            this.className = "b-m-ifocus";
            return false;
        };
        //菜单项失去焦点
        var outItem = function(e) {
            //如果菜单项不可用
            if (this.disable )
                return false;
            if (!this.group) {
                //菜单项
                this.className = "b-m-item";
            } //Endif
            return false;
        };
        //在指定位置显示指定的菜单组
        var showMenuGroup = function(pos, width) {
            var bwidth = $("body").width();
            var bheight = document.documentElement.clientHeight;
            var mwidth = $(this).outerWidth();
            var mheight = $(this).outerHeight();
            pos.left = (pos.left + width + mwidth > bwidth) ? (pos.left - mwidth < 0 ? 0 : pos.left - mwidth) : pos.left + width;
            pos.top = (pos.top + mheight > bheight) ? (pos.top - mheight + (width > 0 ? 25 : 0) < 0 ? 0 : pos.top - mheight + (width > 0 ? 25 : 0)) : pos.top;
            $(this).css(pos).show();
            showGroups.push(this.gidx);
        };
        //隐藏菜单组
        var hideMenuPane = function() {
            var alias = null;
            for (var i = showGroups.length - 1; i >= 0; i--) {
                if (showGroups[i] == this.gidx)
                    break;
                alias = showGroups.pop();
                groups[alias].style.display = "none";
                mitems[alias] && (mitems[alias].className = "b-m-item");
            } //Endfor
            //CollectGarbage();
        };
        function applyRule(rule) {
            if (ruleName && ruleName == rule.name)
                return false;
            for (var i in mitems)
                disable(i, !rule.disable);
            for (var i = 0; i < rule.items.length; i++)
                disable(rule.items[i], rule.disable);
            ruleName = rule.name;
        };
        function disable(alias, disabled) {
            var item = mitems[alias];
            item.className = (item.disable = item.lastChild.disabled = disabled) ? "b-m-idisable" : "b-m-item";
        };

        /** 右键菜单显示 */
        function showMenu(e, menutarget) {
            target = menutarget;
            showMenuGroup.call(groups[this.id], { left: e.pageX, top: e.pageY }, 0);
            $(document).one('mousedown', hideMenuPane);
        }
        var $root = $("#" + option.alias);
        var root = null;
        if ($root.length == 0) {
            root = buildGroup.apply(gTemplet.clone()[0], [option]);
            root.applyrule = applyRule;
            root.showMenu = showMenu;
            addItems(option.alias, option.items);
        }
        else {
            root = $root[0];
        }
        var me = $(this).each(function() {
            return $(this).bind('contextmenu', function(e) {
                var bShowContext = (option.onContextMenu && $.isFunction(option.onContextMenu)) ? option.onContextMenu.call(this, e) : true;
                if (bShowContext) {
                    if (option.onShow && $.isFunction(option.onShow)) {
                        option.onShow.call(this, root);
                    }
                    root.showMenu(e, this);
                }
                return false;
            });
        });
        //设置显示规则
        if (option.rule) {
            applyRule(option.rule);
        }
        gTemplet = iTemplet = sTemplet = itemTpl = buildGroup = buildItem = null;
        addItems = overItem = outItem = null;
        //CollectGarbage();
        return me;
    }
})(jQuery);
jquery.contextmenu.css：

@CHARSET "UTF-8";
html
{
    margin:0px;
    padding:0px;
 }
body
{
    margin: 0;
    background-color: #fff;
    font-size: 12px;
    font-family: "微软雅黑" , "宋体" ,Verdana;
    padding: 0;
    height: 100%;
    100%;
}
div, span
{
  font-family: "微软雅黑", "宋体" ,Verdana;
}

input[type='text']
{
    border: solid 1px #3C7FB1;
    height:18px;
}
input[type=checkbox]
{
    border: none;
}
input[type=radio]
{
    border: none;
}
select
{
    border: #3C7FB1 1px solid;
}
h1{
font-size:16px;
text-align:center;
padding:10px 0;
}
H2 {
    font-size: 14px;
}
FIELDSET {
    border: solid 1px #CCC;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    padding: 1em 2em;
    margin: 1em 0em;
}

LEGEND {
    color: #333;
    font-size: 14px;
    padding: 0em .5em;
    font-weight:bold;
}

.ellipsis
{
    white-space: nowrap;
    text-overflow: ellipsis; /* for internet explorer */
    overflow: hidden;
    display: block;
}
html > body .ellipsis
{
    clear: both;
}

a.imgbtn
{
    color: #000000;
}
.important
{
    color:Red;
 }

/*--------------------------下面是菜单css---------------------*/
.b-m-mpanel {
    background: #F0F0F0 url(images/contextmenu/menu_bg.gif) left repeat-y;
    border: 1px solid #718BB7;
    padding: 2px 0;
    position: absolute;
    z-index: 99997;
    left:0px;
    top:0px;
}
.b-m-split {
    height: 6px;
    background: url(images/contextmenu/m_splitLine.gif) center repeat-x;
    font-size: 0px;
    margin: 0 2px;
}
.b-m-item, .b-m-idisable
{
    padding: 4px 2px;
    margin: 0 2px 0 3px;
    cursor: normal;
    line-height:100%;
}
.b-m-idisable
{
    color:#808080;
}
.b-m-ibody, .b-m-arrow {
    overflow: hidden;
    text-overflow: ellipsis;

}
.b-m-arrow {
    background: url(images/contextmenu/m_arrow.gif) right  no-repeat;
}
.b-m-idisable .b-m-arrow
{
    background:none;
}
.b-m-item img, .b-m-ifocus img, .b-m-idisable img {
    margin-right: 8px;
}
.b-m-ifocus {
    background: url(images/contextmenu/m_item.gif) repeat-x bottom;
    border: 1px solid #AACCF6;
    padding: 3px 1px ;
    margin: 0 2px 0 3px;
    cursor: normal;
    line-height:100%;
}
.b-m-idisable img {
    visibility:hidden;
}

jquery.contextmenu.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Author" content="Gao Xiang" />

<title>jQuery 右键菜单</title>
    <link href="jquery.contextmenu.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    .target
    {
        margin:40px;
        200px;
        height:60px;
        border:solid 1px #ffccee;
        padding:5px;
        background-color:#f8f8f8;
        color:#000000;
     }
    </style>
    <script src="jquery-1.4.2.js" type="text/javascript"></script>
    <script src="jquery.contextmenu.js" type="text/javascript"></script>
    <script type="text/javascript">
        $().ready(function() {
            var option = { 160, items: [
                            { text: "添加节点", icon: "images/icons/ico2.gif", alias: "Add node", type: "group", 160, items: [
                                { text: "路由器", icon: "images/icons/ico4-1-1.gif", alias: "3-2", action: menuAction },
                                { text: "收音机", icon: "images/icons/ico4-2.gif", alias: "收音机", action: menuAction },
                                { text: "洗衣机", icon: "images/icons/ico4-1-1.gif", alias: "洗衣机", action: menuAction },
                                { text: "打印机", icon: "images/icons/ico4-1-1.gif", alias: "打印机", type: "group", 160, items: [
                                    { text: "佳能", icon: "images/icons/ico4-2.gif", alias: "3-2", action: menuAction },
                                    { text: "联想", icon: "images/icons/ico4-1-1.gif", alias: "联想", action: menuAction },
                                    { text: "爱普生", icon: "images/icons/ico4-1-1.gif", alias: "爱普生", action: menuAction },
                                    { text: "惠普", icon: "images/icons/ico4-1-1.gif", alias: "惠普", type: "group", 160, items: [
                                        { text: "HP-ZX100", icon: "images/icons/ico4-2.gif", alias: "HP-ZX100", action: menuAction },
                                        { text: "HP-ZX200", icon: "images/icons/ico4-1-1.gif", alias: "HP-ZX200", action: menuAction },
                                        { text: "HP-ZX220FP+", icon: "images/icons/ico4-1-1.gif", alias: "HP-ZX220FP+", action: menuAction }
                                    ]
                                    }
                                ]
                                },
                                { text: "电冰箱", icon: "images/icons/ico4-1-1.gif", alias: "3-2", action: menuAction },
                                { text: "电视机", icon: "images/icons/ico4-1-1.gif", alias: "3-2", action: menuAction },
                                { text: "微波炉", icon: "images/icons/ico4-1-1.gif", alias: "3-2", action: menuAction }
                            ]
                            },
                            { text: "编辑节点", icon: "images/icons/ico3.gif", alias: "Edit node", action: menuAction },
                            { text: "删除节点", icon: "images/icons/ico3.gif", alias: "Remove node", action: menuAction },
                            { type: "splitLine" },
                            { text: "保存位置", icon: "images/icons/ico4.gif", alias: "1-4", action: menuAction },
                            { text: "重新排列", icon: "images/icons/ico4.gif", alias: "1-4", action: menuAction },
                            { type: "splitLine" },
                            { text: "视图", icon: "images/icons/ico6.gif", alias: "1-6", type: "group", 180, items: [
                                { text: "展开所有节点", icon: "images/icons/ico6-1.gif", alias: "4-1", action: menuAction },
                                { text: "收起所有节点", icon: "images/icons/ico6-2.gif", alias: "4-2", action: menuAction }
                            ]
                            },
                            { type: "splitLine" },
                            { text: "属性", icon: "images/icons/ico5.gif", alias: "1-5", action: menuAction }

                            ], onShow: applyrule,
                onContextMenu: BeforeContextMenu
            };
            function menuAction() {
                alert(this.data.alias);
            }
            function applyrule(menu) {
                if (this.id == "target2") {
                    menu.applyrule({ name: "target2",
                        disable: true,
                        items: ["Edit node", "Remove node", "爱普生", "洗衣机", "收音机"]
                    });
                }
                else {
                    menu.applyrule({ name: "all",
                        disable: true,
                        items: []
                    });
                }
            }
            function BeforeContextMenu() {
                return this.id != "target3";
            }
            $("#target,#target2,#target3").contextmenu(option);
        });
    </script>
</head>
<body>
        <div id="target"  >所有菜单</div>
        <div id="target2"  >指定disable菜单项</div>
        <div id="target3"  >不可用</div>
</body>
</html>

 <script>
    //所有class为demo1的span标签都会绑定此右键菜单
     $('span.demo1').contextMenu('myMenu1', 
     {
          bindings: 
          {
            'open': function(t) {
              alert('Trigger was '+t.id+' Action was Open');
            },
            'email': function(t) {
              alert('Trigger was '+t.id+' Action was Email');
            },
            'save': function(t) {
              alert('Trigger was '+t.id+' Action was Save');
            },
            'delete': function(t) {
              alert('Trigger was '+t.id+' Action was Delete');
            }
          }

    });
    //所有html元素id为demo2的绑定此右键菜单
    $('#demo2').contextMenu('myMenu2', {
      //菜单样式
      menuStyle: {
        border: '2px solid #000'
      },
      //菜单项样式
      itemStyle: {
        fontFamily : 'verdana',
        backgroundColor : 'green',
        color: 'white',
        border: 'none',
        padding: '1px'

      },
      //菜单项鼠标放在上面样式
      itemHoverStyle: {
        color: 'blue',
        backgroundColor: 'red',
        border: 'none'
      },
      //事件    
      bindings: 
          {
            'item_1': function(t) {
              alert('Trigger was '+t.id+' Action was item_1');
            },
            'item_2': function(t) {
              alert('Trigger was '+t.id+' Action was item_2');
            },
            'item_3': function(t) {
              alert('Trigger was '+t.id+' Action was item_3');
            },
            'item_4': function(t) {
              alert('Trigger was '+t.id+' Action was item_4');
            }
          }
    });
    //所有div标签class为demo3的绑定此右键菜单
    $('div.demo3').contextMenu('myMenu3', {
    //重写onContextMenu和onShowMenu事件
      onContextMenu: function(e) {
        if ($(e.target).attr('id') == 'dontShow') return false;
        else return true;
      },

      onShowMenu: function(e, menu) {
        if ($(e.target).attr('id') == 'showOne') {
          $('#item_2, #item_3', menu).remove();
        }
        return menu;
      }

    });



 </script>
</HTML>

效果图: