JQuery---右键菜单版本一

最新推荐文章于 2021-06-17 11:42:45 发布

xxb2008

最新推荐文章于 2021-06-17 11:42:45 发布

阅读量1.6k

点赞数

分类专栏： JQuery插件

本文链接：https://blog.csdn.net/xxb2008/article/details/8903131

版权

JQuery插件专栏收录该内容

7 篇文章 0 订阅

订阅专栏

今天，有点积级写了个JQuery右键菜单，版本一，以后有需要再优化出版本二，哈！，记录一下

jquery.rightMenu.js

;
/* 
 * feifei--rightMenu.1.0 
 *
 which : right,   //right middle left
 menus:[
     {
         name:"name",  //菜单名
         click:null,   ///点击事件
         eventData:null,   //传给点击事件的参数
     }
 ] 


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


 */


(function ($) {
    $.rightMenu = function (box, options) {


        var menuId = "RightMenu";
        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();
            if (e.which == witchs[options.which]) {
                buildMenu(e);
                $menuBox = $("#" + menuId);
                setMenuEvent();
                $menuBox.data("source", box);
            }
        });


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


            $(document).bind("click", _documentClick );


            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 buildMenu(e) {
            var $menuBox = $("#" + menuId);
            if ($menuBox.length) {
                $menuBox.remove();
                $(document).unbind("click", _documentClick);
            }


            $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 = e.pageX + 15;
            var pointY = e.pageY + 15;
            $menuBox.css({left:pointX, top:pointY});


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


        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);
            }
        }


    };


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

rightMenu.css

#RightMenu *{margin:0px;padding:0px;}
#RightMenu {display: block; min-width: 130px; *width:130px; padding:1px; position:absolute; background-color:#555;line-height:20px; border-right: 1px solid;}
#RightMenu .clear{clear: both;}
#RightMenu ul,#RightMenu li{list-style-type:none;}
#RightMenu ul li{background-color: #eee; cursor: pointer; height: 24px; padding:2px 4px 0 4px; list-style: none; margin-bottom: 1px;  font-family:宋体;  font-size: 12px; line-height:20px;}
#RightMenu ul li.over{background-color: #DFDFDF;}

rightmenu.html

<body>


<button type="button" id="button1" data="1">button1</button>
<button type="button" id="button2" data="2">button2</button>
<!--
<div id="RightMenu">
    <ul>
        <li>添加部门</li>
        <li>编辑部门</li>
    </ul>
</div>
-->
<script>
    function a(e) {
        //e.data.data == "a"
        alert(e.data.source.attr("data"));    //source在rightMenu中建入，用记录当菜单是哪个源dom触发的
    }

    var menus = [
        {name:"添加部门", click:a, eventData:{data:"a"}},
        {name:"添加部门2", click:a, eventData:{data:"b"}}
    ]
    $("button").rightMenu({menus:menus});

</script>

</body>

xxb2008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JQuery---右键菜单版本一

今天，有点积级写了个JQuery右键菜单，版本一，以后有需要再优化出版本二，哈！，记录一下jquery.rightMenu.js;/* * feifei--rightMenu.1.0 * which : right, //right middle left menus:[ { name:"name", //菜单名 cli
复制链接

扫一扫

专栏目录