网页右键插件

在网页中有时间需要添加比较复杂的菜单操作，在Windows中可以使用右键菜单，但在网页中右键事件默认是被浏览器处理了，那么可不可以自定义控件的右键点击事件呢？答案当然是可以的。

还是上代码：

/****************右键菜单******************/
; (function ($, window, document, undefined) {
    $.fn.rightClick = function (onClick) {
        var $this = $(this);

        if (!$$.isFunction(onClick)) {
            return;
        }

        $this.bind("contextmenu", function () {
            return false;
        });

        $this.on("mousedown", function (e) {
            if (e.which == 3) {
                onClick(e);
                return false;
            }
        });
    }
    
    var menu = function (ele, opt) {
        var $this = this;

        $this.$element = $(ele);
        $this._default = {
            position: {
                x: 0,
                y: 0
            },
            menuList: [],
            hideAfterMenuClick: true
        };
        $this.option = $.extend(true, {}, $this._default, opt);
        $this.controlId = $$.generateId();
        $this.removeTimeOut = [];
    }

    menu.prototype = {
        initCss: function () {
            var $this = this;

            var $cssContainer = $(document).find("head");
            if ($cssContainer.length == 0) {
                $cssContainer = $(document).find("body");
            }

            if ($cssContainer.length == 0) {
                return;
            }

            if ($cssContainer.find("#bsmenucss").length > 0) {
                return;
            }

            $cssContainer.append("\
<style id='bsmenucss'>\
    .md-container { position: fixed; display: inline-block; min-width:100px; box-shadow: 0 0 3px 3px #888; padding: 5px; background-color: #FFF; border-radius: 2px; }\
    .md-container .close { display: inline-block; position: absolute; top: 4px; right: 4px; border: 1px solid #000; color: #000; width: 20px; height: 20px; border-radius: 10px; font-size: 16px; text-align: center; line-height: 20px; }\
    .md-container ul { display: inline-block; list-style: none; padding: 0; margin: 0; }\
    .md-container ul li { display: inline-block; list-style: none; cursor: pointer; width: 100%; border: 1px solid #FFF; border-radius: 2px; padding: 2px 4px; text-shadow: 2px 2px 4px #888; }\
    .md-container ul li:hover { border: 1px solid #DDD; background-color: #DDD; }\
</style>");
        },
        show: function () {
            var $this = this;

            $this.initCss();

            if (!$$.isEnumerable($this.option.menuList)) {
                return;
            }

            $this.menuContainer = $(document).find("body");

            $this.menuContainer.find(".md-container").remove();

            var menuHtml = $$.format("\
<div id='md{0}' class='md-container' style='top:{1}px;left:{2}px;'>\
    <span class='close'>×</span>\
    <ul>", $this.controlId, $this.option.position.y, $this.option.position.x);

            for (var i = 0; i < $this.option.menuList.length; i++) {
                var menuItem = $this.option.menuList[i];

                menuHtml += $$.format("<li data-index='{0}' title='{1}'>{2}</li>", i, menuItem.title, menuItem.name);
            }

            menuHtml += "\
    </ul>\
</div>";
            setTimeout(function () {
                $this.menuContainer.append(menuHtml);

                $this.delayRemove(500);

                $this.menuDialog = $this.menuContainer.find("#md" + $this.controlId);
                $this.menuDialog.on("mouseover", function () {
                    if (!$$.isEnumerable($this.removeTimeOut)) {
                        return;
                    }

                    $this.status = "normal";

                    for (var i = 0; i < $this.removeTimeOut.length; i++) {
                        clearTimeout($this.removeTimeOut[i]);
                    }

                    $this.removeTimeOut = [];
                });
                $this.menuDialog.on("mouseleave", function () {
                    $this.delayRemove(400);
                });
                $this.menuDialog.on("click", ".close", function () {
                    setTimeout(function () { $this.remove(); }, 100);
                    return false;
                });
                $this.menuDialog.on("click", "li", function () {
                    var $li = $(this);

                    var $index = $$.soe($li.attr("data-index")).toInt(-1);
                    if ($index < 0 || $index >= $this.option.menuList.length) {
                        return;
                    }

                    var menuItem = $this.option.menuList[$index];
                    if ($$.isFunction(menuItem.onClick)) {
                        menuItem.onClick();
                        if ($this.option.hideAfterMenuClick) {
                            setTimeout(function () { $this.remove(); }, 100);
                        }
                    }
                });
            }, 300);
        },
        delayRemove: function (interval) {
            var $this = this;

            interval = $$.soe(interval).toInt(400);

            $this.status = "removing";
            $this.removeTimeOut.push(setTimeout(function () {
                if ($this.status != "removing") {
                    return;
                }

                $this.remove();
            }, interval));
        },
        remove: function () {
            this.menuDialog.remove();
        }
    }

    $.fn.bsMenu = function (option) {
        var result = new menu(this, option);
        result.show();
        return result;
    }
})(jQuery, window, document);
/*****************************************/

使用：

使用：
<script>
    $(function () {
        $(".right-click-test").rightClick(function (e) {
            var position = {};
            position.x = e.pageX;
            position.y = e.pageY;

            $(this).bsMenu({
                position: position,
                menuList: [
                    {
                        name: "12345",
                        title: "12345",
                        onClick: function () {
                            console.log("12345")
                        }
                    },
                    {
                        name: "abcdefghi",
                        title: "abcdefghi",
                        onClick: function () {
                            console.log("abcdefghi")
                        }
                    }
                ]
            });
        });
    });
</script>

<span class="right-click-test">右键点击事件</span>

插件引用了bootstrap的样式，以及前面随笔的JS扩展。

效果如下图：