javascript - 在 FullCalendar dayClick 上触发 jQuery Qtip

Question

我有一个jquery fullcalendar。当我单击一天以显示选项列表时，我想触发jquery QTip（或其他 jquery 解决方案（例如灯箱））。这个问题与已经发布的这个问题相似，但不同之处足以保证一个新问题。

有一个事件回调，但我不确定如何将它与 jQuery Qtip 集成......

    $('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {

        if (allDay) {
            alert('Clicked on the entire day: ' + date);
        }else{
            alert('Clicked on the slot: ' + date);
        }

        alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);

        alert('Current view: ' + view.name);

        // change the day's background color just for fun
        $(this).css('background-color', 'red');

    }
});

这显然会引发警报并将单击的单元格的颜色更改为红色。

这是另一个示例，显示 QTip 被集成以悬停在事件上。

    $('#calendar').fullCalendar({
    ...
    eventRender: function(event, element, view)
    {
        element.qtip({ content: "My Event: " + event.title });
    }
   ...
 });

此示例显示了用于触发 QTIP 的悬停回调。

现在我只需要结合这两个例子......

2010 年 5 月 26 日更新

Qtip 论坛上的 Craig 建议使用 viewDisplay 回调作为 DayClick 回调的替代方案，这似乎会导致各种问题。（锁定浏览器是最突出的）。

这是帖子：

这是代码：

viewDisplay: function() {
                  var calendar = $(this);

                $(this).qtip({
                   content: 'TEST',
                   position: {
                 my: 'top center',
                 at: 'top center'
                   },
                   show: 'click',
                   hide: 'click',
                   style: {
                 tip: true
                   }
                })
         },

此方法在单击一天时显示工具提示。不过有几个问题。

据我所知，通过此回调无法访问日期信息，因此很难显示特定于单击日期的工具提示。
无法通过此回调访问 X 和 Y 点击信息，因此几乎不可能将提示放在点击日期旁边。

非常感谢所有帮助！

谢谢，

蒂姆

score 7 · Accepted Answer

这就像应用于 Qtip 的 css。

$.fn.qtip.styles.tipstyle = {
    width: 400,
    padding: 0,
    background: '#FFFFFF',
    color: 'black',
    textAlign: 'center',
    border: {
        width: 3,
        radius: 4
    },
    tip: 'bottomMiddle',
    name: 'dark'
}

这是 dayClick 功能：

dayClick: function(date, allDay, jsEvent, view) {
    if (typeof $(this).data("qtip") !== "object") {
        $(this).qtip({
            content: {
                prerender: true,
                text: "Hello World"
            },
            position: {corner: {tooltip: 'bottomMiddle', target: 'topMiddle'}},
            style: {
                name: 'tipstyle'
            },
            show: {
                when: {event: 'click'},
                ready: true
            },
            hide: {
                fixed: true
            }
        });
    }
}

dayClick 函数中的 if 语句确保不会在每次单击同一日期时创建 Qtip。

可能会出现的一个小问题是，如果您想在 dayClick 函数中访问一些事件数据。但是同样也有解决方法。

干杯，狮心

score 2 · Accepted Answer

我现在正在使用 fullCalendar 和 Qtip 一个星期，对我来说 knepe 的解决方案应该在理想情况下工作。

您可以首先检查该函数是否实际被调用。尝试类似：

$('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
         alert(date);
        }
});

如果单击某一天会为您提供该日期的警报，那么问题出在 Qtip 实现上。如果您没有收到警报，则问题出在 fullCalendar 实现上。

正如 knepe 所建议的，“显示：点击”应该显示 Qtip。但如果不是，请尝试：

show: { when: { event: 'click' } }

最后，别忘了查看文档：http: //craigsworks.com/projects/qtip/docs/reference/#show

score 2 · Accepted Answer

如果弹出窗口不适合您，请尝试使用旧版本的 jquery。

我尝试使用 jquery-1.4，它现在可以工作了。我尝试使用 jquery-1.2.6 并且效果很好。

请参阅有关使用旧 jquery 使 qtips 与 fullcalendar 一起使用的讨论

score 1 · Accepted Answer

我看到了两种可行的可能性。一、你div给文档加一个不可见的，20px乘以20px左右。在当天点击回调中，您将其定位在相关的一天表格单元格的中间（通过获取它$('td.fc-day' + dayNr)）并使其可见（您也可以将其定位在鼠标指针上，也许）。然后调用click()它以使工具提示出现。

第二种可能性：您调用qtip每个表格单元格（按$('div.fc-content').find('td')左右）并且根本不使用dayClick。dayClick或者，您结合这两种想法并在回调中触发 qtip 的事件。

我想我会选择一种可能性，因为它涉及的事件监听器更少。但是，它假定您具有相同的工具提示，无论具体日期如何（但也可以在显示之前配置工具提示）。

希望这有任何意义。

score 1 · Accepted Answer

不知道你想在工具提示中显示什么，但你不能使用这个：

$('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
        $(this).qtip({ content: 'some html content' });
    }
});

在回调中，“this”是被<td>点击的日期。也许做一个函数来根据“日期”呈现 html 并从 qtip 触发器中调用它：

$(this).qtip({ content: yourQtipRenderer(date) });

score 1 · Accepted Answer

老实说，我没有使用过 qTip，但根据其文档，“显示”选项确定何时显示工具提示，它似乎默认设置为“鼠标悬停”，因此请尝试将其更改为“点击”，例如这：

$('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
        $(this).qtip({ content: 'some html content', show: 'click' });
    }
});

javascript - 在 FullCalendar dayClick 上触发 jQuery Qtip

6 回答 6

Related

Reference