0

我正在处理Martin Wendt 的 jQuery Context-menu 插件,我正在尝试将它集成到我的 FullCalendar 插件中。问题是右键单击该事件没有任何反应。因此,不会弹出上下文菜单。

我在显示日历的 default.html 文件中获得了以下 jquery 代码:

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

        $('#calendar').contextmenu({
            delegate: '.hasmenu',
            menu: [
                {title: 'Copy', cmd: 'copy', uiIcon: 'ui-icon-copy'},
                {title: '----'},
                {title: 'More', children: [
                    {title: 'Sub 1', cmd: 'sub1'},
                    {title: 'Sub 2', cmd: 'sub1'}
                    ]}
                ],
            select: function(event, ui) {
                alert('select ' + ui.cmd + ' on ' + ui.target.text());
            }
        });

正如您所看到的,代码似乎没有任何问题,因为我完全按照程序使右键单击事件时弹出 jquery 上下文菜单。这里也是上下文菜单插件所需的依赖项:

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" 
    rel="stylesheet" />
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="assets/jquery.ui-contextmenu.min.js"></script>

为了实现它,在我的部分的开头,我包含了 FullCalendar 和 Contextmenu 的依赖项:

<link href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css' rel='stylesheet' />
<link href='../fullcalendar.min.css' rel='stylesheet' />
<link href='../fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script src='//code.jquery.com/jquery-1.11.3.min.js'></script>
<script src='//code.jquery.com/ui/1.11.4/jquery-ui.min.js'></script>
<script src='../jquery.ui-contextmenu.min.js'></script>

如您所见,该jquery.ui-contextmenu.min.js文件被撞到了 my 所在的主文件夹fullcalendar.min.js

4

1 回答 1

0

我根据上面的代码做了一个小提琴,上下文菜单确实出现了,但显示在日历的后面并且无法访问。

https://jsfiddle.net/xc7styt5/

在此处输入图像描述

如果您更改类 ui-contextmenu 的 z-index,它应该会起作用。

https://jsfiddle.net/p52gohwn/

.ui-contextmenu {
  z-index: 1;
}

(可能有更好的方法)

于 2017-07-07T20:15:34.943 回答