Блог

Я работал над таблицей с несколькими контекстными меню и разными вариантами меню, но было сложно выяснить, как привязать каждое из них к соответствующему селектору.

Я использую этот плагин https://github.com/mar10/jquery-ui-contextmenu.

DOM:

 <table id="contextMenu">
  <tbody>
    <tr class="hasCategory">
      <td>Category Name</td>
      <td colspan="3">amp;nbsp;</td>
    </tr>
    <tr class="hasMedia">
      <td>amp;nbsp;</td>
      <td colspan="2">Media name</td>
    </tr>
    <tr class="hasFormat">
      <td colspan="2">amp;nbsp;</td>
      <td>Format name</td>
    </tr>
  </tbody>
</table>
  

Javascript:

 jQuery(document).contextmenu({
    delegate: ".hasCategory",
    menu: [
        {
            title: "<i class="fa fa-file-o"></i> New Category", cmd: "newcategory", uiIcon: "newCategory"
        },
        {
            title: "<i class="fa fa-trash-o"></i> Delete Categoru", cmd: "deletecategory", uiIcon: "deleteCategory"
        }
    ]
});

jQuery(document).contextmenu({
    delegate: ".hasMedia",
    menu: [
        {
            title: "<i class="fa fa-file-o"></i> Novo Formato", cmd: "newformat", uiIcon: "newFormat"
        },
        {
            title: "<i class="fa fa-trash-o"></i> Excluir Media", cmd: "deletemedia", uiIcon: "deleteMedia"
        }
    ],
    select: function(event, ui) {
        alert("select "   ui.cmd   " on "   ui.target.text());
    }
});

jQuery(document).contextmenu({
    delegate: ".hasFormat",
    menu: [
        {
            title: "<i class="fa fa-files-o"></i> Duplicate Format", cmd: "duplicateformat", uiIcon: "duplicateFormat"
        },
        {
            title: "<i class="fa fa-trash-o"></i> Delete Format", cmd: "deleteformat", uiIcon: "deleteFormat"
        }
    ]
});
  

Но это работает только для селектора «.hasFormat«.

В документации указано использовать document при настройке нескольких селекторов, но это не работает.

Платформа виджетов jQuery UI (на которой основано контекстное меню), позаботьтесь о том, чтобы к одному и тому же элементу DOM был привязан только один экземпляр плагина.

Если вы хотите иметь разные меню для таблицы, вы можете создать 3 меню в разных контейнерах (например, document, body и table element), каждое из которых содержит желаемые целевые элементы. Но я бы не рекомендовал это в вашем случае.

Лучшим подходом было бы создать подобное

 $("#contextMenu").contextmenu({
    delegate: "tr.hasMedia,tr.hasFormat", // or simply "tr"
    menu: [],
    beforeOpen: function(event, ui) {
        // replace the whole menu depending on click target type
        if( ui.target.closest(".hasMedia").length !== 0 ) {
            $("#contextMenu").contextmenu("replaceMenu", [
                {title: "aaa"}, {title: "bbb"}, 
                ...
             ]);
        } else if( ui.target.closest(".hasFormat").length !== 0 ) {
            $("#contextMenu").contextmenu("replaceMenu", [
                {title: "aaa"}, {title: "bbb"}, 
                ...
             ]);
        }
    },
    select: function(event, ui) {
        alert("select "   ui.cmd   " on "   ui.target.text());
    }
});    
  

(Часто может быть достаточно определить только одно меню и использовать enableEntry и showEntry() для настройки его в соответствии с целевым типом.)