Javascript 在单击区域附近定位元素_Javascript_Jquery_Html_Css_Twitter Bootstrap

Javascript 在单击区域附近定位元素

javascript jquery html css twitter-bootstrap

Javascript 在单击区域附近定位元素,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我正在尝试将上下文菜单与jQuery完整日历插件集成。我找不到任何例子，我试图建立自己的。它在工作，但没有得到正确的位置。我已经尝试了将近10天，在谷歌上搜索了很多，但都找不到解决办法我根据传递和显示的事件对象手动生成菜单项的HTML。我已使用解决方案来定位如何正确定位上下文菜单 $('#calendar').fullCalendar({ //all fullCalendar options goes here, eventRender: function (event, e

我正在尝试将上下文菜单与jQuery完整日历插件集成。我找不到任何例子，我试图建立自己的。它在工作，但没有得到正确的位置。我已经尝试了将近10天，在谷歌上搜索了很多，但都找不到解决办法

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

如何正确定位上下文菜单

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

$（“#日历”）.fullCalendar({
//所有完整日历选项都在这里，
eventRender:函数（事件、元素、视图）{
元素绑定（'contextmenu'，函数（e）{
//基于事件对象生成我自己的html
var contextMenuHtml=getContextMenu（事件）；
//contextMenuContainer隐藏在
$（'#contextMenuContainer'）.html（contextMenuHtml）；
$（'#contextMenuContainer'）.fadeIn（）；
var position=element.position（）；
$（'#contextMenuContainer'）.css({
左：e.pageX，//显示靠近单击位置的容器
顶部：e.pageY//若我在窗口边缘附近单击，如何调整或计算位置
});
$（文档）。单击（函数（）{
$（'#contextMenuContainer'）.fadeOut（）；
});
返回false；
});
}
});

我试图使用这个插件，但它不符合我的要求。我需要根据上面显示的fullCalander事件对象动态生成带有链接的菜单项。但不幸的是，这些插件不支持这样的功能，也没有类似的示例。

将我的评论移动到一个答案，因为在dependencies

jQuery contextMenu

下，将

jQuery UI position

列为可选：

您可以在此处使用以下函数构建jQueryUI包：

或者上下文菜单的分发文件中似乎有一个版本：

你考虑过装JQueryUI吗？效果很好。@Malk我已经试过分配

位置。top

。其位置未靠近我单击的位置..：（不，它不是那样工作的。检查链接。你像

$（e）一样使用它。位置（{my:'left'，at:'right'，of:event}）

@Malk，你救了我！！！。它像charm

$（'#contextMenuContainer'）。位置({my:'center top'，at:'center bottom'，of:evt，offset:'0 5'，collision:'fit'}）

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