FullCalendar事件弹出窗口

时间:2013-05-27 13:29:51

标签: jquery fullcalendar

在我的项目中使用awsome FullCalendar,我遇到了问题。

当用户悬停一个事件时,我会使用下面的代码显示一个包含菜单的DIV。

这很好用(找到事件的X Y很烦人)

我的问题是当用户将鼠标移到DIV(菜单)上时,事件会触发eventMouseOut(应该这样) - 但这会关闭我的DIV。

在删除菜单之前,如何检查鼠标是否在菜单中?

eventMouseover: function(event, jsEvent, view){
            var eventid = event.id;
            var layer = "<div id='events-layer'  style='position:absolute; top:"+ jsEvent.pageY +"px; left:"+ jsEvent.pageX +"px; text-align:left; z-index:9999;background-color:#ffffff;padding-right:5px;cursor:pointer;width:100px;color:#000000;'><ul style='list-style-type: none;margin-left:0px;padding:0px;overflow:hidden;' onclick=''><li onClick='editEvent("+ eventid +");'><a><img border='0' style='' src='/images/icons/wrench.png'></a>&nbsp;<?php echo _("Rediger vagt")?></li><li onClick='showEventMembers("+ eventid +");'><a><img border='0' style='' src='/images/icons/users.png'></a>&nbsp;<?php echo _("Vis tilmeldte")?></li><li onClick='emailEventMembers("+ eventid +");'><a><img border='0' style='' src='/images/icons/email.png'></a>&nbsp;<?php echo _("Skriv mail")?></li><li onClick='printShiftplan("+ eventid +");'><a><img border='0' style='' src='/images/icons/printer.png'></a>&nbsp;<?php echo _("Udskriv vagtplan")?></li><li onClick='deleteEvent("+ eventid +");'><a><img border='0' style='' src='/images/icons/bin_closed.png' ></a>&nbsp;<?php echo _("Slet vagt")?></li></ul></div>";
            $("body").append(layer);

            console.log(jsEvent);
        },
        eventMouseout: function(calEvent, domEvent) {
            $("#events-layer").remove();
        },

我很抱歉丑陋的图层(菜单) - 不是最优雅的解决方案,但现在可以使用。

总结一个问题:在eventMouseout中删除之前,如何检查用户是否实际导航菜单?

1 个答案:

答案 0 :(得分:1)

您好,您可以在鼠标离开图层时删除图层,而不是在鼠标离开日历div事件时将其删除,如下所示:

eventMouseover: function(event, jsEvent, view){

                  var eventid = event.id;
                  var layer = $("<div id='events-layer'  style='position:absolute; top:"+ jsEvent.pageY +"px; left:"+ jsEvent.pageX +"px; text-align:left; z-index:9999;background-color:#ffffff;padding-right:5px;cursor:pointer;width:100px;color:#000000;'><ul style='list-style-type: none;margin-left:0px;padding:0px;overflow:hidden;' onclick=''><li onClick='editEvent("+ eventid +");'><a><img border='0' style='' src='/images/icons/wrench.png'></a>&nbsp;<?php echo _("Rediger vagt")?></li><li onClick='showEventMembers("+ eventid +");'><a><img border='0' style='' src='/images/icons/users.png'></a>&nbsp;<?php echo _("Vis tilmeldte")?></li><li onClick='emailEventMembers("+ eventid +");'><a><img border='0' style='' src='/images/icons/email.png'></a>&nbsp;<?php echo _("Skriv mail")?></li><li onClick='printShiftplan("+ eventid +");'><a><img border='0' style='' src='/images/icons/printer.png'></a>&nbsp;<?php echo _("Udskriv vagtplan")?></li><li onClick='deleteEvent("+ eventid +");'><a><img border='0' style='' src='/images/icons/bin_closed.png' ></a>&nbsp;<?php echo _("Slet vagt")?></li></ul></div>");

                  layer.mouseenter(function(){

                       $(this).addClass("mouse_in");

                   })

                  layer.mouseleave(function(){

                       $(this).remove();

                   })

                   $("body").append(layer);

                   console.log(jsEvent);
        },
        eventMouseout: function(calEvent, domEvent) {

           if(!$("#events-layer").hasClass('mouse_in')){
             $("#events-layer").remove();
           }
        },