基于jquery封装的一个简单web右键菜单

本文用到了jquery给标签动态添加样式变量的方法，特此标明!

(function ($) {
    var menu = {};
    $.fn.contextMenu = function (id, list) {
        menu = {
            id: id,
            style: {
                ul: {
                    listStyle: 'none',
                    padding: '0px',
                    margin: '0px',
                    border: '1px solid #999',
                    width: '100px',
                    height: 'auto',
                    position: 'relative',
                    float: 'left',
                    borderRadius: '5px'
                },
                li: {
                    display: 'block',
                    cursor: 'point',
                    padding: '3px',
                    backgroundColor: '#eeeeee',
                    width: '94px',
                    height: '30px',
                    float: 'left',
                    borderTop: '1px solid #fff',
                    borderBottom: '1px solid #ddd'
                },
                lihover: {
                    backgroundColor: '#b6bdd2'
                }
            }
        };
        if (!menu.content) {
            menu.content = $('<div style="position:absolute;z-index:500;"><ul></ul></div>')
                     .appendTo('body').on('click', function (e) {
                         e.stopPropagation();
                     });
            var ul = menu.content.find('ul')
            for (var i = 0; i < list.length; i++) {
                var m = list[i];
                var li = $('<li>' + m.label + '</li>');
                if (m.items && m.items.length > 0) {
                    var cul = $('<ul></ul>');
                    for (var j = 0; j < m.items.length; j++) {
                        var child = m.items[j];
                        cul.append('<li onclick="' + child.action + '">' + child.label + '</li>');
                    }
                    li.append(cul.css(menu.style.ul));
                } else {
                    li.attr('onclick', m.action);
                }
                ul.append(li);
            }
            ul.css(menu.style.ul).find('li').css(menu.style.li).hover(
                function () {
                    $(this).css(menu.style.lihover);
                },
                function () {
                    $(this).css(menu.style.li);
                }
            ).on('mouseenter', function () {
                var c = $(this).find("ul").css('margin-left', $(this).width() + 4).css('margin-top', -$(this).height() - 6);
                if (c && c.css('opacity') == 0) {
                    c.animate({ "opacity": "0.75", "height": "auto !important", "min-height": c.height() }, "slow", function () { })
                }
            }).on('mouseleave', function () {
                $(this).find("ul").animate({ "opacity": "0", "height": "0" });
            });
        }

        $(this).on('contextmenu', function (e) {
            menu.content.css({ 'left': e.pageX, 'top': e.pageY }).show();
            $(document).one('click', function () {
                menu.content.hide();
            });
            return false;
        });
        return this;
    };
})(jQuery);
/*
 * 下面为使用方法
 */
//用于绑定右键菜单的json格式数据
var contentMenuList = [{
    label: 'BkColor',
    action: "menu_click(this,'Drag');",
    url: ''
}, {
    label: 'Add',
    action: "menu_click(this,'Add');",
    url: '',
    items: [{
        label: 'Image',
        action: "menu_click(this,'Image');",
        url: ''
    }, {
        label: 'Text',
        action: "menu_click(this,'Text');",
        url: ''
    }]
}];
//将右键菜单数据绑定于页面上某个标签
$('.design_body').contextMenu('myMenu', contentMenuList);