我需要在jquery完整日历中创建一个事件时显示一个弹出窗口(如谷歌日历中的气球弹出窗口)。
弹出窗口的任何最佳插件,显示为气球,还处理点击事件(我用来创建/编辑/删除弹出窗口中的事件)?
答案 0 :(得分:5)
我已将QTip与fullCalendar一起使用,效果很好!
$('#calendar').fullCalendar({
...
eventRender: function(event, element, view)
{
element.qtip({ content: "My Event: " + event.title });
}
...
});
确保在fullCalendar的eventRender事件中定义qtip。 :)
我注意到的唯一问题(w / JQuery 1.3)是当qtip popup淡入时,它会在fullCalendar的样式网格后面开始淡入淡出。在第一帧〜几帧后,没关系。此外,这很可能是我在项目中遇到的其他一些问题。我懒得调试它,所以你的里程可能会有所不同。 ; P
答案 1 :(得分:2)
答案 2 :(得分:2)
我编写了自己的弹出框,使用具有绝对位置的div显示。
<div id="addEvent" style="display: none; position: absolute; width: 400px; z-index: 1000;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="PopupContainer">
<div class="header">
<img src="<%= ResolveUrl("~/Content/images/closepopup.gif") %>" id="addCalEventClose"
title="Close" alt="Close" class="cursorhand" />
</div>
<div class="clear" />
<div class="popup">
//Your content goes here
</div>
</div>
<div class="clear" />
<br />
</td>
</tr>
<tr>
<td>
<div style="margin-top: -1px">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="taC">
<img src="<%= ResolveUrl("~/Content/images/balloon_arrow.gif") %>" title="" alt=""
id="addEventBalloon" />
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
使用一些javascripting调用$('#addEvent').css({ left: xPos, top: yPos }).show().fadeIn();
来计算鼠标点击的位置并显示弹出窗口。
答案 3 :(得分:1)
这是我的实施。我是在悬停时做的,如果你想点击,只需更改事件处理程序
$('#calendario').fullCalendar({
events: "/includes/json-events.php",
eventDrop: function(event, delta) {
alert(event.title + ' was moved ' + delta + ' days\n' +
'(should probably update your database)');
},
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
},
eventMouseover: function( event, jsEvent, view ) {
var item = $(this);
if(item.find('.nube').length == 0){
var info = '<span class="nube"><h2>'+event.title+'</h2><img src="'+event.avatar+'" /> <p class="text">'+event.name+'</p><p>'+event.start+' <br /> '+event.end+'</p><p><a href="/post.php?blogid='+event.id+'">read_more</a></p></span>';
item.append(info);
}
if(parseInt(item.css('top')) <= 200){
item.find('.nube').css({'top': 20,'bottom':'auto'});
item.parent().find('.fc-event').addClass('z0');
}
item.find('.nube').stop(true,true).fadeIn();
},
eventMouseout: function( event, jsEvent, view ) {
var item = $(this);
item.find('.nube').stop(true,true).fadeOut();
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventRender: function(event, element) {
}
});
,至少:
.nube{ position: absolute;left:0;top:0}
答案 4 :(得分:0)
“气球”插件本身不需要处理点击事件,因为fullcalender已经为此提供了配置的回调...
$('#calendar').fullCalendar({
eventClick: function(calEvent, jsEvent){
// ... your code here ...
}
});
如果您正在寻找工具提示风格的“气球”,推荐的Qtip是一个不错的选择。您可以根据需要使用eventClick函数动态创建工具提示,也许从其他地方获取提示的内容。
答案 5 :(得分:0)
尝试这个...它是基于ajax的,但如果你愿意,你可以删除它..你也可以将你的事件绑定到你想要的控件。
答案 6 :(得分:-1)
如果弹出窗口不适合您,请尝试使用旧版本的jquery。
我尝试使用jquery-1.4,它现在可以工作了。我尝试使用jquery-1.2.6,它运行得很好。
请参阅a discussion about using older jquery for making qtips work