如何在上下文菜單中過濾菜單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"} 
       } 
      }; 
     } 
    }); 
}); 

如u都可以看到我有兩個選擇

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

小提琴樣品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