自定义事件外观primefaces时间表 [英] Customizing event appearance primefaces schedule

问题描述

我正在使用 Primefaces Schedule 组件在我的 Web 应用程序中呈现事件.但我需要对他做个小把戏.对于每个呈现的事件，我需要显示带有事件详细信息的工具提示.使用 window.onload 侦听器和一些 jquery 函数可以很容易地显示当前日期框架的工具提示.但是，由于当我按下下一个和上一个按钮时，日程表使用 ajax 来显示下一个日期框架，工具提示崩溃了.我试过使用:

I'm using the Primefaces Schedule component to render events in my web app. But i need to do a little trick with him. For each rendered event i need to show a tooltip with event details. Using the window.onload listener and some jquery functions is easy to display the tooltips of the current date frame. But, since the schedule uses ajax to display the next date frame when i press the next and prev buttons, the tooltip crashes. I've tried using the:

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

但是好像需要太多的处理，页面变慢了.还有其他方法可以为每个渲染的事件添加工具提示吗?

But seems that it requires too much processing and the page gets slow. There is some other way to add the tooltips to each event rendered?

推荐答案

试试看:

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

   });
});

<小时>

更新

我有一种感觉，他们在调度程序 js 文件的某个地方在 mouseover...

I had this feeling that somewhere in the scheduler js file they doing stopPropagation() on mouseover...

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

look at the following piece of code from ther js file located at primefaces-3.4.1-sources\META-INF\resources\primefaces\schedule

/* 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 插件，因此您可能会发现一些有用的如果您在 google 上搜索 fullcalendar tooltip

By the way , know that the scheduler is actually a FullCalendar jQuery plugin , so you might find some usefull information if you google for fullcalendar tooltip

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

Here is the link for the modified Primefacess 3.4 jar (no stopPropagation for scheduler events)

这篇关于自定义事件外观primefaces时间表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！