ContextMenu与jQuery FullCalendar集成

Question

我正在使用Adam Shaw的FullCalendar控件以及jQuery.我想为事件和日子添加一个上下文菜单.通过使用Martin Wendt的Context Menu控件,我能够实现这一目标.我在事件上注册菜单的代码如下所示:

$('#calendar').fullCalendar({
        // Other arguments
        eventRender: function (event, element) {
            var originalClass = element[0].className;
            element[0].className = originalClass + ' hasmenu';
        },
        dayRender: function (day, cell) {
            var originalClass = cell[0].className;
            cell[0].className = originalClass + ' hasmenu';
    });
});

我实际上是hasmenu在日历中添加一个调用每个事件和日期的类.

$(document).contextmenu({
    delegate: ".hasmenu",
    preventContextMenuForPopup: true,
    preventSelect: true,
    menu: [
            {title: "Cut", cmd: "cut", uiIcon: "ui-icon-scissors"},
            {title: "Copy", cmd: "copy", uiIcon: "ui-icon-copy"},
            {title: "Paste", cmd: "paste", uiIcon: "ui-icon-clipboard", disabled: true },
        ],
    select: function(event, ui) {
            // Logic for handing the selected option
    },
    beforeOpen: function(event, ui) {
            // Things to happen right before the menu pops up
    }
});

这个问题是菜单出现在日历控件后面.我相信这是因为日历事件有一些其他类分配给他们,添加一个hasmenu类正在弄乱那些.当我在VS中设置断点时,它表示事件具有以下类:

"fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end hasmenu"

这就是它在页面上的外观:

我尝试暂时将事件类设置为hasmenu弹出窗口打开但显然完全改变了视图.有没有办法强制菜单在所有其他元素之上？有没有"带来前线"的方法？任何帮助表示赞赏.

Answer 1

调整z-index可能是您最好的选择。

Answer 2

z-index在beforeOpen事件中调整

beforeOpen: function (event, ui) {      
    ui.menu.zIndex($(event.target).zIndex() + 1);
}

请参阅:https://github.com/mar10/jquery-ui-contextmenu/issues/55