title: Dynamic Context Menus using JQuery
body: <p>Creating Dynamic Context Menu</p>
  
  <p>Here is Html Code for context menu</p>
  
  <pre><code>&lt;div class="simple-context-menu"&gt;Right Click Me&lt;/div&gt;
  </code></pre>
  
  <p>And the Javascript file is shown below </p>
  
  <pre><code>// setup:
  
  // Install JQuery Plugin from here:
  // https://github.com/swisnl/jQuery-contextMenu
  // DOCS: http://swisnl.github.io/jQuery-contextMenu/
  
  var menu1_item_names = ['item1', 'item2', 'item3'];
  var menu2_item_names = ['item4', 'item5', 'item6'];
  
  $.contextMenu({
      selector: '.test-context-menu',
      build: function($trigger, e) {
          var options = { 
            callback: function(key, options) {
              alert("Clicked on " + key + " on element " + options.$trigger.attr("id"));
              // TODO:
              // Display NAME of the menu item clicked(example: item1)
              //alert("Clicked on item:  " + JSON.stringify(options.items));                    
              return false;
            },
            // start with an empty map
            items: {
              "fold1": { 
                "name": "menu 1",
                "items": {}
              },
              "fold2": {}                  
            }
          };
  
          $.each(menu1_item_names, function(k, v) {
              options.items.fold1.items[k] = {
               name: v
              };
          });
  
          if (typeof menu2_item_names !== 'undefined' &amp;&amp;    menu2_item_names.length &gt; 0) {
            options.items.fold2 = {
                                    "name": "menu 2",
                                    "items": {} 
                                  }
  
            $.each(menu2_item_names, function(k, v) {
                options.items.fold2.items[k] = {
                  name: v
                };
            });
          }
  
          options.items.sep1 = "---------";
          options.items.quit = {
              name: "Quit"
          };
          return options;
      }
  });
  </code></pre>
  
  <p>Note:
       When you run it and right click in the above text field a Context Menu appears</p>
  
  <p>Click on any menu item, you will see(the alert box), the menu item index position eg. 0, 1 2... </p>
  
  <p>Instead of the name of the item clicked in</p>
  
  <p>I would like to see the name of the menu item </p>
  
  <p>And the <a href="https://jsfiddle.net/8v2n5qpo/" rel="nofollow">JSFiddle</a> for the context menu.</p>
  
  <p>Thanks in Advance</p>