如何实现jquery自定义点击右键菜单显示

   jquery自定义点击右键菜单显示其实很简单，只要下载一个smartMenu.js和一个smartMenu.css两个文件之后，将两个文件分别加入到css和js文件夹下面，然后在前台写上以下代码，就可以实现右键菜单的自定义了，代码如下：

   $(“#user li”).bind("mousedown"
                , function (e) {
                    if (e.which == 3) {
                        var yjoption = {
                            name: "操作",
                            offsetX: 2,
                            offsetY: 2,
                            textLimit: 10,
                            beforeShow: $.noop,
                            afterShow: $.noop
                        };
                        var yjdata = [
                        [{
                            text: "清除时间片",
                            func: function () { alert("清除成功！"); }
                        }, {
                            text: "应用时间片",
                            func: function () {
                                alert("应用成功！");
                            }
                        }]
                        ];
                        $(this).smartMenu(yjdata, yjoption);
                        //alert(e.pageX+":"+e.pageY);
                    }
                }
                );

轻而易举的就实现了自己右键菜单的自定义了。

smartMenu插件API参数详解

这里的API参数也就是options参数内容了，具体名称，作用等参见下表：

jQuery smartMenu插件API参数表

参数名	默认值	相关说明
name	""	字符串。上下文菜单的名称，用以区分不同的上下文菜单。如果页面只有一个上下文菜单，此参数可缺省；如果是多个菜单，此参数必须，否则菜单会出现冲突。
offsetX	2	数值。上下文菜单左上角距离鼠标水平偏移距离。
offsetY	2	数值。上下文菜单左上角距离鼠标垂直偏移距离。
textLimit	6	数值。上下文菜单项限制显示的文字个数。如果超出会截取，并以…补全，完成文字以title形式显示。
beforeShow	$.noop	函数。菜单即将显示之前执行的回调函数。$.noop为jQuery 1.4+版本支持，所以，如果你想让插件向下兼容，可设置将插件js中所有的$.noop替换成function() {}
afterShow	$.noop	函数。菜单显示后执行的回调函数。

一般情况下，上面的API参数用的比较多的就是name。第二个demo页面中用到了beforeShow这个API参数，用来在菜单显示之前改变data数据。

smartMenu插件data参数详解

正如前面提到的，此插件的使用如下：

$(选择器).smartMenu(data, options);

其中$(选择器)元素就是你需要右键显示列表内容的元素。而data参数决定了右键显示的自定义菜单的内容（包括分组，层级等）。这里就具体讲下这个data参数。

首先data参数的结构模型如下：

var data = [[{}, {}, {}], [{}]];

右键出现的上下文菜单的每一项都是由一个有着固定键值的对象创建的，这个对象只支持三个关键键值：text, func, data，分别表示菜单文字，点击菜单的方法，菜单对应的二级菜单数据，例如下面，这是第一个demo页面设置图片内边距的对象数据：

{
    text: "图片内间距",
    func: function() {
        $(this).css("padding", "10px");
    }
}