datatables 右键菜单

js 

(function($) {
    var D = $(document).data("func", {});    
    $.smartMenu = $.noop;
    $.noop = function () {
        $(this).siblings().removeClass('selected');//单行选择
    }
    $.fn.smartMenu = function (data, options) {      
        var B = $("body"), defaults = {
            name: "",
            offsetX: 2,
            offsetY: 2,
            textLimit: 6,
            beforeShow: $.noop,
            afterShow: $.noop
        };
        var params = $.extend(defaults, options || {});
        
        var htmlCreateMenu = function(datum) {
            var dataMenu = datum || data, nameMenu = datum? Math.random().toString(): params.name, htmlMenu = "", htmlCorner = "", clKey = "smart_menu_";
            if ($.isArray(dataMenu) && dataMenu.length) {
                htmlMenu = '<div id="smartMenu_'+ nameMenu +'" class="'+ clKey +'box">' +
                                '<div class="'+ clKey +'body">' +
                                    '<ul class="'+ clKey +'ul">';
                                    
                $.each(dataMenu, function(i, arr) {
                    if (i) {
                        htmlMenu = htmlMenu + '<li class="'+ clKey +'li_separate">&nbsp;</li>';    
                    }
                    if ($.isArray(arr)) {
                        $.each(arr, function(j, obj) {
                            var text = obj.text, htmlMenuLi = "", strTitle = "", rand = Math.random().toString().replace(".", "");
                            if (text) {
                                if (text.length > params.textLimit) {
                                    text = text.slice(0, params.textLimit)    + "…";
                                    strTitle = ' title="'+ obj.text +'"';
                                }
                                if ($.isArray(obj.data) && obj.data.length) {
                                    htmlMenuLi = '<li class="'+ clKey +'li" data-hover="true">' + htmlCreateMenu(obj.data) +
                                        '<a href="javascript:" class="'+ clKey +'a"'+ strTitle +' data-key="'+ rand +'"><i class="'+ clKey +'triangle"></i>'+ text +'</a>' + 
                                    '</li>';
                                } else {
                                    htmlMenuLi = '<li class="'+ clKey +'li">' +
                                        '<a href="javascript:" class="'+ clKey +'a"'+ strTitle +' data-key="'+ rand +'">'+ text +'</a>' + 
                                    '</li>';
                                }
                                
                                htmlMenu += htmlMenuLi;
                                
                                var objFunc = D.data("func");
                                objFunc[rand] = obj.func;
                                D.data("func", objFunc);
                            }
                        });    
                    }
                });
                
                htmlMenu = htmlMenu + '</ul>' +
                                    '</div>' +
                                '</div>';
            }
            return htmlMenu;
        }, funSmartMenu = function() {
            var idKey = "#smartMenu_", clKey = "smart_menu_", jqueryMenu = $(idKey + params.name);
            if (!jqueryMenu.size()) {
                $("body").append(htmlCreateMenu());
                
                //事件
                $(idKey + params.name +" a").bind("click", function() {
                    var key = $(this).attr("data-key"),
                        callback = D.data("func")[key];
                    if ($.isFunction(callback)) {
                        callback.call(D.data("trigger"));    
                    }
                    $.smartMenu.hide();
                    return false;
                });
                $(idKey + params.name +" li").each(function() {
                    var isHover = $(this).attr("data-hover"), clHover = clKey + "li_hover";
                    
                    $(this).hover(function() {
                        var jqueryHover = $(this).siblings("." + clHover);
                        jqueryHover.removeClass(clHover).children("."+ clKey +"box").hide();
                        jqueryHover.children("."+ clKey +"a").removeClass(clKey +"a_hover");
                        
                        if (isHover) {                    
                            $(this).addClass(clHover).children("."+ clKey +"box").show();
                            $(this).children("."+ clKey +"a").addClass(clKey +"a_hover");    
                        }
                        
                    });
                    
                });
                return $(idKey + params.name);
            } 
            return jqueryMenu;
        };
        
        $(this).each(function() {
            this.oncontextmenu = function(e) {
                //回调
                if ($.isFunction(params.beforeShow)) {
                    params.beforeShow.call(this);    
                }
                e = e || window.event;
                //阻止冒泡
                e.cancelBubble = true;
                if (e.stopPropagation) {
                    e.stopPropagation();
                }
                //隐藏当前上下文菜单，确保页面上一次只有一个上下文菜单
                $.smartMenu.hide();
                var st = D.scrollTop();
                var jqueryMenu = funSmartMenu();
                if (jqueryMenu) {
                    jqueryMenu.css({
                        display: "block",
                        left: e.clientX + params.offsetX,
                        top: e.clientY + st + params.offsetY
                    });
                    D.data("target", jqueryMenu);
                    D.data("trigger", this);
                    //回调
                    if ($.isFunction(params.afterShow)) {
                        params.afterShow.call(this);    
                    }
                    return false;
                }
            };
        });
        if (!B.data("bind")) {
            B.bind("click", $.smartMenu.hide).data("bind", true);
        }
    };
    $.extend($.smartMenu, {
        hide: function() {
            var target = D.data("target");
            if (target && target.css("display") === "block") {
                target.hide();
            }        
        },
        remove: function() {
            var target = D.data("target");
            if (target) {
                target.remove();
            }
        }
    });
})(jQuery);

CSS

@charset "utf-8";
.smart_menu_box{display:none; width:140px; position:absolute; z-index:201105;}
.smart_menu_body{padding:1px; border:1px solid #B8CBCB; background-color:#fff; -moz-box-shadow:2px 2px 5px #666; -webkit-box-shadow:2px 2px 5px #666; box-shadow:2px 2px 5px #666;}
.smart_menu_ul{margin:0; padding:0; list-style-type:none;}
.smart_menu_li{position:relative;}
.smart_menu_a{display:block; height:25px; line-height:24px; padding:0 5px 0 25px; color:#000; font-size:12px; text-decoration:none; overflow:hidden;}
.smart_menu_a:hover, .smart_menu_a_hover{background-color:#348CCC; color:#fff; text-decoration:none;}
.smart_menu_li_separate{line-height:0; margin:3px; border-bottom:1px solid #B8CBCB; font-size:0;}
.smart_menu_triangle{width:0; height:0; border:5px dashed transparent; border-left:5px solid #666; overflow:hidden; position:absolute; top:7px; right:5px;}
.smart_menu_a:hover .smart_menu_triangle, .smart_menu_a_hover .smart_menu_triangle{border-left-color:#fff;}
.smart_menu_li_hover .smart_menu_box{top:-1px; left:130px;}

调用

 $('#myTable').on('click', 'tr', function () {              
                $(this).toggleClass('selected');
                $(this).smartMenu(imageMenuData, {                  
                    name: "image"
                });               
            });

 var imageMenuData = [
    [
          {
             text: "单行处理",
             data:
                 [[{
                 text: "5像素深蓝",
                 func: function () {
                     // $(this).css("border", "5px solid #34538b");
                     console.log(this)
                 }
             },
             {
                 text: "5像素浅蓝",
                 func: function () {
                     $(this).css("border", "5px solid #a0b3d6");
                 }
             },
                 ]]
         },
         {
             text: "图片背景色",
             func: function () {
                 $(this).css("background-color", "#beceeb");
             }
         }
    ],
    [
      {
        text: "查看原图",
        func: function () {
            var src = $(this).attr("src");
            window.open(src.replace("/s512", ""));
        }
      }
    ]
        ];