CODEWITHSUNDEEP
javascriptjqueryhtmljson
Prashanth
Prashanth

Reputation: 338

Dynamic Context Menus using JQuery

Creating Dynamic Context Menu

Here is Html Code for context menu

<div class="simple-context-menu">Right Click Me</div>

And the Javascript file is shown below 

// 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' &&    menu2_item_names.length > 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;
    }
});

Note: When you run it and right click in the above text field a Context Menu appears

Click on any menu item, you will see(the alert box), the menu item index position eg. 0, 1 2...

Instead of the name of the item clicked in

I would like to see the name of the menu item

And the JSFiddle for the context menu.

Thanks in Advance

Upvotes: 0

Views: 3517

Answers (1)

Florian Cabirol
Florian Cabirol

Reputation: 185

You can use this on the callback function : 

   options.$selected.text()

Upvotes: 3

Related Questions