代码之家 › 专栏 › 技术社区 › Developer

在单击区域附近定位元素

twitter-bootstrap css html jquery javascript

Developer · 技术社区 · 8 年前

我正在尝试将上下文菜单与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事件对象动态生成带有链接的菜单项。但不幸的是,这些插件不支持这样的例子,也没有类似的例子。

1 回复 | 直到 7 年前

Malk 8 年前

将我的评论移动到答案,因为依赖项不足 jQuery-contextMenu 列表 jQuery UI position 作为可选: https://github.com/swisnl/jQuery-contextMenu#dependencies

您可以使用以下函数构建jQueryUI包: http://jqueryui.com/download/

https://github.com/swisnl/jQuery-contextMenu/tree/master/dist

$('#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;
       });
  }
});