jquery의 전체 달력 팝업
https://stackoverflow.com/questions/1944238
-
20-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
jquery 전체 캘린더에서 이벤트를 생성하는 동안 팝업(Google 캘린더와 같은 풍선 팝업)을 표시해야 합니다.
풍선으로 표시되고 클릭 이벤트(팝업에서 이벤트를 생성/편집/삭제하는 데 사용하는)를 처리하는 팝업에 가장 적합한 플러그인이 있습니까?
해결책 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(); 마우스 클릭 위치를 계산하고 팝업을 표시하는 자바스크립트를 사용합니다.
다른 팁
나는 사용했다 QTIP FullCalendar와 함께 잘 작동합니다!
$('#calendar').fullCalendar({
...
eventRender: function(event, element, view)
{
element.qtip({ content: "My Event: " + event.title });
}
...
});
FullCalendar의 Eventrender 이벤트에서 QTIP를 정의하고 있는지 확인하십시오. :)
내가 알아 차린 유일한 문제 (jQuery 1.3)는 QTIP 팝업이 사라지면 FullCalendar의 스타일 그리드 뒤에서 희미해진다는 것입니다. 그 후 처음 ~ 몇 프레임이면 괜찮습니다. 또한 이것은 제가 프로젝트에서하고있는 다른 것들에 문제가 될 수 있습니다. 마일리지가 다를 수 있도록 더 이상 디버깅하기에는 너무 게으릅니다. ;피
여기 내 구현이 있습니다. 클릭을 원한다면 Hover, BT 에서이 작업을 수행했습니다. 이벤트 처리기를 변경하십시오.
$('#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는 이미 구성된 콜백을 제공하므로 "Balloon"플러그인 자체는 클릭 이벤트를 처리 할 필요가 없습니다.
$('#calendar').fullCalendar({
eventClick: function(calEvent, jsEvent){
// ... your code here ...
}
});
툴팁 스타일 "풍선"을 찾고 있다면 권장되는 QTIP가 좋은 선택입니다. EventClick 기능을 사용하여 툴팁을 필요로하여 툴팁을 즉시 생성 할 수 있으며, 아마도 다른 곳에서 팁의 내용을 가져올 수 있습니다.
이것을 시도해보십시오 ... Ajax 기반이지만 원하는 경우 제거 할 수 있습니다. 원하는 컨트롤에 이벤트를 바인딩 할 수도 있습니다.
팝업이 귀하에게 적합하지 않으면 이전 버전의 jQuery를 사용해보십시오.
jQuery-1.4로 시도했는데 이제 작동합니다. 나는 jQuery-1.2.6으로 시도했고 완벽하게 작동합니다.
