JQuery---右键菜单版本一

来源：互联网发布：vb绘图控件编辑：程序博客网时间：2024/06/16 16:39

今天，有点积级写了个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>

0 0