鼠标悬停而非eventRender上的Fullcalendar Qtip
Fullcalendar Qtip on mouseover instead of eventRender
我在将Qtip附加到eventMousever事件而不是fullcalendar中的eventRender事件时遇到问题。
我之所以要这样做,是因为拥有数据的服务器在另一个国家/地区,延迟导致在加载日历之前预取所有qtip文本的时间过长(最多8秒)。我编写了返回所需qtip信息的ajax函数,但问题是eventRender函数在qtip信息出现之前运行。因此,在我看来,最合乎逻辑的解决方案是在eventMouseover事件中附加qtip(通过ajax发送qtip文本请求,然后将qtip附加到元素),但我找不到如何从eventMouseover事件中访问事件元素。(我已经尝试将qtip附加到mouseover事件的$(this),但什么也没发生(也没有错误)。
我也尝试了另一种方法。加载日历后,我在后台获取所有工具提示,然后尝试.fullCalendar("rerenderEvents"),但这并没有按预期工作->例如,除非您更改视图/更改月份,否则新的工具提示将不会出现,只有在那时,新工具提示(在后台获取)才会出现,所以我认为rerenderEvent不起作用。
关于我如何解决这个问题有什么建议吗?
事件渲染的代码(有效):
eventRender: function (event, element) {
if (event.qtip_id) {
element.qtip({
content: {
title: $('#' + event.qtip_title_id).html(),
text: $('#' + event.qtip_id).html()
},
position: {
my: 'bottom center',
at: 'top center',
//target: 'mouse',
adjust: { mouse: false },
viewport: $(window),
},
style: {
classes: 'bigger_font qtip-light qtip-shadow'
},
show: {
delay: 500
},
hide: {
fixed: true
}
});
}
呈现日历后,在后台获取所有工具提示的代码:
for (i = 0; i<all_events.length; i++) {
if (all_events[i].qtip_id) {
//alert(all_events[i].title);
myevent = {
title: all_events[i].title,
url: all_events[i].url,
color: all_events[i].color,
form_id: all_events[i].form_id,
priority: all_events[i].priority,
qtip_id: all_events[i].qtip_id,
qtip_title_id: all_events[i].qtip_title_id,
qtip_dealer: all_events[i].qtip_dealer,
qtip_country_id: all_events[i].qtip_country_id,
qtip_customer_id: all_events[i].qtip_customer_id,
qtip_customer_name: all_events[i].qtip_customer_name,
qtip_id: all_events[i].qtip_id,
qtip_id_id: all_events[i].qtip_id_id
};
$.ajax({
type: 'POST',
url: 'ajax/calendar_generate_qtip.php',
data: myevent,
dataType: 'html',
success: function(data) {
$('#qtip_holder').html($('#qtip_holder').html() + data);
}
}).fail(function() {
});
}
}
$('#calendar').fullCalendar('rerenderEvents');
所以我的问题是:有可能在整个日历中的eventMouseover事件中创建和显示qtip吗?(由于eventMouseover无法访问事件的元素,至少我看不到它)。
感谢您的阅读。
附言:我为我蹩脚的英语道歉。
如果您想访问eventMouseover上的事件元素,这是可能的。
从FullCalendar文档中,它清楚地表明,在eventMouseover的回调函数中,"this"被设置为事件的<div>
元素,$(this)提供了与您在eventRender的回调中获得的相同的元素对象。http://fullcalendar.io/docs/mouse/eventMouseover/
你提到
(我尝试将qtip附加到mouseover事件的$(this),但什么也没发生
但我相信这是正常的鼠标悬停事件,而不是回调。
- 如何使用jQuery自动打开页面上的所有链接
- 如何使Javascript动态html表及其上的事件
- 对iPad上的点击事件反应缓慢
- 偶尔结结巴巴地说“;堆叠的”;translate()上的转换(v4.0.0-alpha40)
- 设置滑块分区上的滚动
- Html页面上的多个Base64图像和平滑加载
- 如何确定javascript已经完成了某些操作.ios上的
- 如何从画布上的某个移动事件中获取X和Y
- JsFiddle上的鼠标事件不起作用
- delete关键字在全局变量上的不同行为
- 用Javascript更改我网站上的字体大小
- 激活chrome上的chrome.notifications对象
- TypeError:t(..).on不是fullcalendar上的函数
- Undefined不是Fullcalendar js上的函数
- Fullcalendar检测右键单击议程视图上的空时段
- 鼠标悬停而非eventRender上的Fullcalendar Qtip
- 正在筛选客户端上的FullCalendar事件
- 如何更改传递给FullCalendar对象上的eventClick属性的函数的作用域
- 如何基于className删除fullCalendar上的事件
- FullCalendar月视图上的标题没有正确显示