我在多个div容器上使用了contextmenu。根据此容器的内容,我可以选择菜单的一个或多个选项。其他人没有显示。 为此,我使用菜单的构建选项。
$.contextMenu(
{
selector: '[id^=calendarContentFETitle]',
autoHide: true,
className: 'calendarContextMenu',
callback: function (key)
{
if(key == "shifts")
{
calendarShowShifts();
}
if(key == "overtime")
{
calendarShowOverTimes();
}
},
build: function($triggerElement)
{
var job = getJobFromDiv($triggerElement);
if(job.isShift)
{
return { items: {
"shifts": {name: i18next.t('default:calendar.contextmenu.shifts'), icon: "fa-info-circle"}
} };
}
if(job.isOvertime)
{
return { items: {
"overtime": {name: i18next.t('default:calendar.contextmenu.overtime'), icon: "fa-info-circle"}
} };
}
});
这工作正常,但是当作业不是这两种类型时,我在控制台中出错,它没有返回任何项目(什么是正确的,但这就是我想要的)。 如果作业不是这两种类型,我怎么能不显示上下文菜单?
我知道一个可能的解决方案是分别为每个div添加和删除上下文菜单,并在每次div的类型更改时更改它,但因为这非常多,所以代码中的开销会很大。所以我认为所有div的一个菜单会更聪明。
根据要求提供了一个创建div的示例
<div id="calendarjob_56463" class="draggable" style="left: 171px; top: 0px; width: 138px; height: 26px; line-height: 26px; background: #f289fa;">
<div id="calendarJobAlert"></div>
<div id="calendarJobTitle" style="left: 0px;">
<div id="title" style="position: absolute; overflow: hidden; left: 4px; right: 4px; height: 12px; top: 2px; line-height: 12px; white-space: nowrap; ">Urlaub</div>
<div id="subtitle" style="position: absolute; overflow: hidden; left: 4px; right: 4px; height: 12px; bottom: 2px; line-height: 12px; white-space: nowrap;">
</div>
</div>