javascript - 自定义事件外观 primefaces 时间表

Question

我正在使用 Primefaces Schedule 组件在我的网络应用程序中呈现事件。但我需要对他耍点小花招。对于每个呈现的事件，我需要显示一个包含事件详细信息的工具提示。使用 window.onload 监听器和一些 jquery 函数很容易显示当前日期框架的工具提示。但是，由于当我按下 next 和 prev 按钮时，日程表使用 ajax 来显示下一个日期范围，因此工具提示会崩溃。我试过使用:

window.addEventListener('DOMSubtreeModified', function(){
    // create bubble popups
    $('.fc-event-inner.fc-event-skin').CreateBubblePopup( options );
}, false);

但似乎它需要太多处理并且页面变慢。还有其他方法可以将工具提示添加到每个呈现的事件吗？

Answer 1

像这样尝试:

$(window).load(function() {
   $(document).delegate(".fc-event-inner", "mouseenter mouseover", function(event){
       $('.fc-event-inner.fc-event-skin').CreateBubblePopup( options );

   });
});

---

更新

我有这种感觉，在调度程序 js 文件的某个地方，他们在 mouseover 上执行 stopPropagation()...

查看位于 primefaces-3.4.1-sources\META-INF\resources\primefaces\schedule 的 js 文件中的以下代码

/* Event Element Binding
-----------------------------------------------------------------------------*/


function lazySegBind(container, segs, bindHandlers) {
    container.unbind('mouseover').mouseover(function(ev) {
        var parent=ev.target, e,
            i, seg;
        while (parent != this) {
            e = parent;
            parent = parent.parentNode;
        }
        if ((i = e._fci) !== undefined) {
            e._fci = undefined;
            seg = segs[i];
            bindHandlers(seg.event, seg.element, seg);
            $(ev.target).trigger(ev);
        }
        ev.stopPropagation();
    });
}

所以...

尝试删除 ev.stopPropagation();

顺便知道调度器其实是一个FullCalendar jQuery plugin , 所以如果你用谷歌搜索 fullcalendar tooltip

你可能会找到一些有用的信息

这里是修改后的链接 Primefacess 3.4 jar (没有用于调度程序事件的 stopPropagation)