how can i make a dynamic context menu-CodePudding

https://swisnl.github.io/jQuery-contextMenu I am using the context menu here

$.contextMenu({
        selector: '.selectedItem',
        // trigger: 'none',
        callback: function (key, options) {

            var m = "clicked: "   key;
            // window.console && console.log(m) || alert(m);
        },
        items: {
          edit: {name: "Edit", icon: "edit"},
                cut: {name: "Cut", icon: "cut"},
         }
    });

When I right click on the selectedItem div, I want to fill the items:{} object, how can I do that? I don't want to fill it statically . When I click on the selectedItem class with the right click, I want to look at its properties and add a cut, edit delete feature.

CodePudding user response：

To do what you require you can use the build property. You can use this to dynamically generate the options based on the element which triggered the context menu.

$.contextMenu({
  selector: '.selectedItem',
  build: ($trigger, e) => ({
    items: {
      example: {
        name: $trigger.data('name'),
        icon: $trigger.data('icon')
      }
      // add options here...
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.9.2/jquery.contextMenu.min.js" integrity="sha512-kvg/Lknti7OoAw0GqMBP8B 7cGHvp4M9O9V6nAYG91FZVDMW3Xkkq5qrdMhrXiawahqU7IZ5CNsY/wWy1PpGTQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.9.2/jquery.contextMenu.css" integrity="sha512-EF5k2tHv4ShZB7zESroCVlbLaZq2n8t1i8mr32tgX0cyoHc3GfxuP7IoT8w/pD vyoq7ye//qkFEqQao7Ofrag==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div  data-name="Foo" data-icon="edit">Foo</div>
<div  data-name="Bar" data-icon="cut">Bar</div>

Obviously, this is a contrived example using data attributes. You would most likely need to implement a lookup method to determine which options should be displayed for each context menu.