将多个项目添加到上下文菜单 [英] Add Multiple items to Context Menu

问题描述

我正在基于DOM元素中的数据右键单击上下文菜单.

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

，它的Javascript代码是::

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); } }
            }
        });

    });
});

运行正常. 但是我想显示上下文菜单项超过1次，所以我尝试了::

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); } }
                }
            }
    });

});

表示应形成:::

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

但是我不能在其中使用for循环.怎么办?

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

推荐答案

项的参数类型是object.

items's parameter type is object.

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

尝试一下.

$('.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); } }
        }
    });
});

已更新.

以下代码表示对象.

{}

代码中的数据"是对象的键， 那么以下代码将无法使用.

"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 
    });
});

这篇关于将多个项目添加到上下文菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！