许多div上的jquery上下文菜单仅在条件上显示

时间:2018-02-23 09:04:02

标签: jquery contextmenu

我在多个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>

0 个答案:

没有答案