всплывающее окно для полного календаря в jquery
-
20-09-2019 - |
Вопрос
Мне нужно показать всплывающее окно (balloon popup, как в google calendar) при создании события в полном календаре jquery.
Какие-нибудь лучшие плагины для всплывающего окна, которое отображается в виде воздушного шара, а также которое обрабатывает события щелчка (которые я использую для создания / редактирования / удаления событий из всплывающего окна)?
Решение 3
Я написал собственное всплывающее окно, которое отображается с использованием 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>
позвонить в $('#addEvent').css({ left: xPos, top: yPos }).show().fadeIn();
с некоторым JavaScript для расчета положения щелчка мыши и отображения всплывающего окна.
Другие советы
я использовал QTip с FullCalendar, и он отлично работает!
$('#calendar').fullCalendar({
...
eventRender: function(event, element, view)
{
element.qtip({ content: "My Event: " + event.title });
}
...
});
Просто убедитесь, что вы определяете свой qtip в событии eventRender fullCalendar.:)
Единственная проблема, которую я заметил (с JQuery 1.3), заключается в том, что когда всплывающее окно qtip исчезает, оно начинает исчезать за стилизованной сеткой FullCalendar.После первых нескольких кадров все в порядке.Кроме того, это вполне может быть проблемой с некоторыми другими вещами, которые происходят в моем проекте.Мне слишком лень заниматься дальнейшей отладкой, поэтому ваш результат может отличаться.;п
Тот Самый qTip плагин может обрабатывать произвольный контент во всплывающих подсказках, включая возможность назначать обработчики событий и еще много чего для расширения функциональности.
Смотрите на демо-версии.
Вот моя реализация.я сделал это при наведении, но если вы хотите щелкнуть, просто измените обработчик событий
$('#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}
Плагину «воздушный шар» не требуется обрабатывать событие щелчка, поскольку Fullcalender уже предоставляет настроенный обратный вызов для этого...
$('#calendar').fullCalendar({
eventClick: function(calEvent, jsEvent){
// ... your code here ...
}
});
Если вы ищете всплывающие подсказки в виде «воздушных шаров», рекомендуемый Qtip — хороший выбор.Вы можете создавать всплывающую подсказку на лету с помощью функции eventClick по мере необходимости, возможно, получая содержимое подсказки откуда-то еще.
Попробуй это...Он основан на ajax, но вы можете удалить его, если хотите.вы также можете привязать свои события к нужным вам элементам управления.
Если всплывающее окно у вас не работает, попробуйте использовать более старую версию jquery.
Я попробовал с jquery-1.4, и теперь он работает.Я попробовал jquery-1.2.6, и он отлично работает.
Видеть обсуждение использования старого jquery для работы qtips