JQuery---右键菜单版本二

最新推荐文章于 2023-05-07 17:29:40 发布

原创最新推荐文章于 2023-05-07 17:29:40 发布 · 736 阅读

0 ·

CC 4.0 BY-SA版权

JQuery插件专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用JavaScript创建一个右侧面板菜单，包括菜单的构建、样式设置、事件绑定以及如何通过参数传递数据。

http://blog.youkuaiyun.com/xxb2008/article/details/8903131

;
/* 
 * feifei--rightMenu.1.1
   说明：
   增加了，通过js直接调用 rightMenuJs方法，显示菜单
 *
 *
 which : right,   //right middle left
 menus:[
     {
         name:"name",  //菜单名
         click:null,   ///点击事件
         eventData:null,   //传给点击事件的参数
     }
 ] 

 <div id="RightMenu"> 
     <ul>
         <li>添加部门</li>
         <li>编辑部门</li>
     </ul>
 </div> 

 */

(function ($) {

    var menuId = "RightMenu";
    var documentClick = function () {
    }

    $.rightMenuJs = function (options) {
        var $menuBox = [];
        var _options = {data:{}, menus:[], left:0, top:0}
        _options = $.extend(_options, options);
        _buildMenu(_options);
        $menuBox = $("#" + menuId);

        setEvent();
        setMenuEvent();
        $menuBox.data("data", _options.data);

        function setEvent() {
            $(document).unbind("click", documentClick);
            documentClick = _documentClick;
            $(document).bind("click", documentClick);
        }


        function setMenuEvent() {
            var $menuLi = $menuBox.find("li").hover(function () {
                $(this).addClass("over");
            }, function () {
                $(this).removeClass("over");
            });

            $menuLi.each(function (i) {
                var menu = options.menus[i];
                if (menu.click) {
                    if (!menu.eventData) menu.eventData = {};
                    menu.eventData.data = _options.data;
                    $(this).click(menu.eventData, menu.click);
                    $(this).click(menu.eventData, function () {
                        $menuBox.hide();
                    });
                }
            });
        }

        function _documentClick(e) {
            var isHide1 = $(e.target).parents("#" + menuId).length;
            if (!isHide1) {
                $menuBox.hide();
                $(document).unbind("click", documentClick);
            }
        }
    }

    $.rightMenu = function (box, options) {

        box = $(box);
        var $menuBox = [];


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

        var witchs = {
            right:3,
            middle:2,
            left:1
        }

        box.mousedown(function (e) {
            e.preventDefault();
            e.stopPropagation();
            options.left = e.pageX;
            options.top = e.pageY;
            if (e.which == witchs[options.which]) {
                _buildMenu(options);
                $menuBox = $("#" + menuId);

                $menuBox.bind("contextmenu", function () {
                    return false
                });
                setEvent();
                setMenuEvent();
                $menuBox.data("source", box);

            }
        });

        function setEvent() {
            $(document).unbind("click", documentClick);
            documentClick = _documentClick;
            $(document).bind("click", documentClick);
        }

        function setMenuEvent() {
            var $menuLi = $menuBox.find("li").hover(function () {
                $(this).addClass("over");
            }, function () {
                $(this).removeClass("over");
            });
            $menuLi.each(function (i) {
                var menu = options.menus[i];
                if (menu.click) {
                    if (!menu.eventData) menu.eventData = {};

                    menu.eventData.source = box;
                    $(this).click(menu.eventData, menu.click);
                    $(this).click(menu.eventData, function () {
                        $menuBox.hide();
                    });
                }
            });
        }


        function _documentClick(e) {
            var isHide1 = $(e.target).parents("#" + menuId).length;
            var isHide2 = $(e.target).parents().andSelf().filter(box).length
            if (!isHide1 && !isHide2) {
                $menuBox.hide();
                $(document).unbind("click", documentClick);
            }
        }

    };

    function _buildMenu(options) {
        var $menuBox = $("#" + menuId);
        if ($menuBox.length) {
            $menuBox.remove();
        }

        $menuBox = $("<div/>").attr("id", menuId);
        var $ul = $("<ul/>").appendTo($menuBox);
        for (var i in options.menus) {
            var menu = options.menus[i];
            $("<li/>").appendTo($ul).html(menu.name);
        }

        var pointX = options.left + 15;
        var pointY = options.top + 15;
        $menuBox.css({left:pointX, top:pointY});

        $("body").append($menuBox);
        return $menuBox;
    }


    $.fn.extend({
        rightMenu:function (options) {
            var _options = {which:3, menus:[], left:0, top:0};
            options = $.extend(_options, options);
            this.each(function () {
                new $.rightMenu(this, options);
            });
            return this;
        }
    });
})(jQuery);