ContextMenu 与 jQuery FullCalendar 集成答案

【问题标题】：ContextMenu integration with jQuery FullCalendarContextMenu 与 jQuery FullCalendar 集成
【发布时间】：2014-09-22 09:32:48
【问题描述】：

我正在使用 Adam Shaw 的 FullCalendar 控件和 jQuery。我想为事件和日子添加一个上下文菜单。我可以通过使用Martin Wendt's Context Menu control 来实现这一点。我在事件上注册菜单的代码如下所示：

$('#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，但这显然完全改变了视图。有没有办法强制菜单位于所有其他元素之上？有没有“带到前面”的方法？任何帮助表示赞赏。

【问题讨论】：

你能设置一个jsfiddle.net吗？
你试过调整z-index吗？
嗯，我无法导入某些脚本，因为它们在我的计算机上。 jsfiddler 一直在抱怨。
@feitla 我该怎么做？
@feitla 啊。在 CSS 上。有效。请将其发布为答案；）

标签： jquery css asp.net fullcalendar jquery-ui-contextmenu

【解决方案1】：

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

【讨论】：

【解决方案2】：

调整beforeOpen事件中的z-index

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

请看：https://github.com/mar10/jquery-ui-contextmenu/issues/55

【讨论】：

【解决方案3】：

这有助于解决您的问题：

beforeOpen: function (event, ui) {
            var $menu = ui.menu,
                $target = ui.target;
            ui.menu.css('z-index', '10000000');
            // Things to happen right before the menu pops up
        }

【讨论】：