Add Multiple items to Context Menu

问题

I am using context menu on my right click based on the data in DOM element.

and the Javascript code for it is ::

$(function(){

    $('.context-menu-one').on('contextmenu', function(e){

        var data = $("#strngTitle").text();
        $.contextMenu({
            selector: '.context-menu-one',
            items: {

                data: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } }
            }
        });

    });
});

which is working fine. But I want to show the context menu item more than 1 time so i tried ::

$('.context-menu-one').on('contextmenu', function(e){

    var data = $("#strngTitle").text();
    $.contextMenu({
        selector: '.context-menu-one',
        items:
            for (var i = 0; i < 2; i++) {

                {

                    data: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } }
                }
            }
    });

});

Means it should form ::

 items: {
        data: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } },
        data: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } },
    }

but I am not able to use the for loop in this. How can it be done?

回答1:

items's parameter type is object.

http://medialize.github.io/jQuery-contextMenu/docs.html

Try this.

$('.context-menu-one').on('contextmenu', function(e){
    var data = $("#strngTitle").text();
    $.contextMenu({
        selector: '.context-menu-one',
        items: {
            data: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } }
            data2: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } }
            data3: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } }
        }
    });
});

Updated.

Following code means object.

{}

"data" in your code is key of object, then following code cannot use.

{
    data: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } }
    data: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } }
}

Why want you to use loop???

If you want different context menu have same role. Try this.

var dataObjectValue
     ={ name: data, callback: function (key, opt) { alert("Clicked on " + data); } };

var dataObjectForItems={};

for(var i=0; i<2; i++){
    dataObjectForItems["data"+i]=dataObjectValue;
}

// result expected of dataObjectForItems
//{
//    data1: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } }
//    data2: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } }
//}

$('.context-menu-one').on('contextmenu', function(e){
    var data = $("#strngTitle").text();
    $.contextMenu({
        selector: '.context-menu-one',
        items: dataObjectForItems 
    });
});

回答2:

Basically you cannot construct an object in JavaScript the way that you're trying to. A for-loop does not produce an array of values, neither does it produce objects. What you need to do is create your object prior to passing it as a value to the context menu initialization call.

var menuItems = {};
for (var i = 0; i < 2; i++) {
    var key = GenerateKey(i);
    var data = GenerateData();
    menuItems[key] = data;
};
$.contextMenu({
     selector: '.context-menu-one',
     items: menuItems
});

function GenerateKey(index) {
     return "data" + index;
}
function GenerateData(index) {
     return { name: index, callback: function (key, opt) { alert("Clicked on " + index); } };
}

来源：https://stackoverflow.com/questions/25760508/add-multiple-items-to-context-menu

标签

javascript

jquery

contextmenu