在jquery中弹出完整日历
我需要在jquery完整日历中创建一个弹出窗口(如谷歌日历中的气球弹出窗口)。
弹出窗口的任何最好的插件,显示为气球,还处理点击事件(我用来创建/编辑/删除弹出窗口中的事件)?
我使用了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
qTip插件可以处理工具提示中的任意内容,包括分配事件处理程序以及提供更丰富function的内容。
看演示 。
我编写了自己的弹出窗口,使用具有绝对位置的div显示。
调用$('#addEvent').css({ left: xPos, top: yPos }).show().fadeIn();
用一些javascripting来计算鼠标点击的位置并显示弹出窗口。
这是我的实施。 我是在hover时做的,如果你想点击,只需更改事件处理程序
$('#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 = ''+event.title+'
'+event.name+'
'+event.start+'
'+event.end+'
'; 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}
“气球”插件本身不需要处理click事件,因为fullcalender已经为此提供了一个配置的回调…
$('#calendar').fullCalendar({ eventClick: function(calEvent, jsEvent){ // ... your code here ... } });
如果您正在寻找工具提示风格的“气球”,推荐的Qtip是一个不错的选择。 您可以根据需要使用eventClick函数动态创建工具提示,也许从其他地方获取提示的内容。
尝试这个…它是基于ajax但你可以删除它,如果你想..你也可以将你的事件绑定到你想要的控件。
jquery ajax工具提示
如果弹出窗口不适合您,请尝试使用旧版本的jquery。
我尝试使用jquery-1.4,它现在可以工作了。 我尝试使用jquery-1.2.6,它完美无缺。
请参阅有关使用旧jquery进行qtips工作的讨论