Question

我正在尝试将上下文菜单与jQuery完整日历插件集成。我找不到任何我试图建立自己的例子。它工作但没有得到适当的位置。我已经尝试了将近10天并且搜索了很多内容并且无法找到解决方案。

我根据传递和显示的事件对象为菜单项手动生成HTML。我已经使用Positioning Context Menu解决方案来定位。

如何正确定位上下文菜单？

$('#calendar').fullCalendar({
    //all fullCalendar options goes here,
    eventRender: function (event, element, view) {                     
                    element.bind('contextmenu', function (e) {
                        //generate my own <ul><li> html based on event object
                        var contextMenuHtml = getContextMenu(event);
                        //contextMenuContainer is hidden div in at the bottom of <body>
                        $('#contextMenuContainer').html(contextMenuHtml);

                        $('#contextMenuContainer').fadeIn();
                        var position = element.position();

                        $('#contextMenuContainer').css({
                            left: e.pageX, //to show the container close to where i click
                            top: e.pageY // How can i adjust or calculate position if i click near to edge of window
                        });

                        $(document).click(function () {
                            $('#contextMenuContainer').fadeOut();
                        });

                        return false;
                    });
    }
});

我尝试使用这个jQuery contextMenu插件，但不符合我的要求。我需要动态生成带有基于fullCalander事件对象的链接的菜单项，如上所示。但不幸的是，这些插件并不支持这样，也没有这样的例子。

Answer 1

将我的评论移到答案中，因为在依赖项下jQuery-contextMenu列出jQuery UI position为可选项： http://jqueryui.com/download/

您可以在此处使用此函数构建一个jQueryUI包：https://github.com/swisnl/jQuery-contextMenu/tree/master/dist

或者看起来contextMenu在其分发文件中有一个版本：{{3}}

$('#calendar').fullCalendar({
  //all fullCalendar options goes here,
  eventRender: function (event, element, view) {                     
      element.bind('contextmenu', function (e) {

          var contextMenuHtml = getContextMenu(event);

          $('#contextMenuContainer')
             .html(contextMenuHtml)
             .position({
                 my: 'left-5 top-5',
                 of: e,
                 collision: "fit"
              })
             .fadeIn();


          $(document).click(function () {
              $('#contextMenuContainer').fadeOut();
           });

          return false;
       });
  }
});

定位元素靠近点击区域

1 个答案: