Javascript JQuery上下文菜单与FullCalendar的同化
我正在处理并尝试将其集成到我的FullCalendar插件中。问题是右键单击事件时不会发生任何事情。所以,没有上下文菜单弹出 我在显示日历的default.html文件中获得了以下jquery代码:Javascript JQuery上下文菜单与FullCalendar的同化,javascript,jquery,jquery-ui,fullcalendar,jquery-ui-contextmenu,Javascript,Jquery,Jquery Ui,Fullcalendar,Jquery Ui Contextmenu,我正在处理并尝试将其集成到我的FullCalendar插件中。问题是右键单击事件时不会发生任何事情。所以,没有上下文菜单弹出 我在显示日历的default.html文件中获得了以下jquery代码: $('#calendar').fullCalendar({ eventRender: function(event, element) { var originalClass = element[0].className;
$('#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
文件被提升到主文件夹,在主文件夹中显示了我的fullcalendar.min.js
。我根据上述代码制作了一把小提琴,其中上下文菜单确实出现,但显示在日历的后面,无法访问
如果更改类ui contextmenu的z索引,它应该会正常工作
(可能有更好的方法)发布后,我注意到您将Sub 1和Sub 2菜单项都设置为cmd:“sub1”,这可能不是您想要的
.ui-contextmenu {
z-index: 1;
}