jquery - 如何在上下文菜单 Jquery 插件中过滤菜单

Question

我使用了以下脚本。

我正在使用 jqquery 上下文菜单

这是我的脚本

$(function(){
    $.contextMenu({
        selector: '.context-menu-icon, .context-menu-text', 
        build: function($trigger, e) {
            // this callback is executed every time the menu is to be shown
            // its results are destroyed every time the menu is hidden
            // e is the original contextmenu event, containing e.pageX and e.pageY (amongst other data)
            return {
                callback: function(key, options) 
                {
                    if(key=='delete')
                        $(this).remove();
                    if(key=='resize')
                        $(this).resizable();
                    if(key=='edit')
                    {
                        var content = $(this).find('.edit_text').text();


                        var inside_div_id = $(this).find('.edit_text').attr("id");
                        alert(inside_div_id);

                        var width = $(this).width() -1;
                        var height = $(this).height() - 4;

                        var $editbox = $("<input type='text'" + 
                                        "style='width:" + width + ";" +
                                        "height:" + height + ";" +
                                        "border:none" +                           
                                        "' value='" +  content + "' />");          


                        $(this).find('.edit_text').empty();            
                        $(this).find('.edit_text').prepend($editbox);             
                        $editbox.focus();
                        $editbox.select();


                         $($editbox).bind("blur",
                                        function()
                                        {
                                            //$(this).closest('.edit_text').html($($editbox).val());
                                            $('#'+inside_div_id).html($($editbox).val());
                                            $($editbox).remove();
                                        });
                    }   
                },
                items: {
                    "edit": {name: "Edit", icon: "edit"},
                    "resize": {name: "Resize", icon: "resize"},
                    "copy": {name: "Copy", icon: "copy"},
                    "paste": {name: "Paste", icon: "paste"},
                    "delete": {name: "Delete", icon: "delete"},
                    "sep1": "---------",
                    "quit": {name: "Quit", icon: "quit"}
                }
            };
        }
    });
});

正如你们所看到的，我有两个选择器

selector: '.context-menu-icon, .context-menu-text', 

并有以下菜单

items: {
         "edit": {name: "Edit", icon: "edit"},
         "resize": {name: "Resize", icon: "resize"},
         "copy": {name: "Copy", icon: "copy"},
         "paste": {name: "Paste", icon: "paste"},
         "delete": {name: "Delete", icon: "delete"},
         "sep1": "---------",
         "quit": {name: "Quit", icon: "quit"}
       }

现在的问题是，我想要以下菜单

"edit": {name: "Edit", icon: "edit"},
"resize": {name: "Resize", icon: "resize"},

不应该对选择器 context-menu-icon 可用

我怎样才能做到这一点？

Answer 1

您可以使用以下代码执行此操作。

在构建事件中，您可以获取右键单击的元素，使用该元素的类名检查条件，然后在上下文菜单中添加和删除菜单项。

$(function () {
        var items={
            "edit": { name: "Edit", icon: "edit", disabled: false },
            "cut": { name: "Cut", icon: "cut" },
            "copy": { name: "Copy", icon: "copy" },
            "paste": { name: "Paste", icon: "paste" },
            "delete": { name: "Delete", icon: "delete", disabled: false },
            "sep1": "---------",
            "quit": { name: "Quit", icon: "quit" }
        };
        $.contextMenu({
            selector: '.common',
            callback: function (key, options) {
                var m = "clicked: " + key;
                window.console && console.log(m) || alert(m);
            },
            build: function ($trigger, e) {
                if ($(e.currentTarget).hasClass('green-div')) {
                    if (!e.data.items.edit || !e.data.items.delete) {
                        $.each(items, function (i) {
                            e.data.items[i] = items[i];
                        });
                    }
                }
                else {
                    if (e.data.items.edit) {
                        delete e.data.items.edit;
                    }
                    if (e.data.items.delete) {
                        delete e.data.items.delete;
                    }
                }
            },
            items: items
        });
    });

fiddle 样本 JsFiddle ,

但在此所有元素每次都需要刷新，还有一些其他上下文菜单插件jQ-UI-ContextMenu以更简单的方式做同样的事情。

$(document).ready(function () {
    var liCount = 1;
    $(".parent").jQContextMenu({
        selector: ".showMenu",
        target: "#menu",
                beforeContextMenu: function (context, e) {
                    var element = $(e.element);
                    var editLi = $("li:contains('Edit')", element);
                    var optionsLi = $("li:contains('Other Options')", element);

                    if (context[0].id == "contentDiv1") {
                        //Removing an exsisting menu item.
                        element.find('.dynamicLi').remove();
                        //Adding a new menu item.
                        element.append("<li class='dynamicLi'>Dynamic Item " + liCount + "</li>");

                        //Disabling specific menu item.
                        if (!editLi.hasClass('ui-state-disabled'))
                            editLi.addClass('ui-state-disabled');

                        //Hiding an menu item.
                        if (optionsLi.css('display') != 'none')
                            optionsLi.css('display', 'none');

                        e.refresh();
                        liCount++;
                    }
                    else
                    {
                        element.find('.dynamicLi').remove();
                        //Enabling specific menu item.
                        if (editLi.hasClass('ui-state-disabled'))
                            editLi.removeClass('ui-state-disabled');

                        //Showing an menu item.
                        if (optionsLi.css('display') == 'none')
                            optionsLi.css('display', 'list-item');
                    }
                },
                itemClick: function (event, ui) {
                    var text = $(ui.items[0]).text();
                    if (event[0].id == "contentDiv1")
                        alert("You clicked on " + text + " in DIV " + 1);
                    else
                        alert("You clicked on " + text + " in DIV " + 2);
                }
    });
});

查看此演示 Jsfiddle