弹出的jQuery中

Question

完整的日历我需要显示一个弹出（弹出气球在谷歌日历），同时在与jQuery的完整的日历事件。

，它展示了作为气囊弹出任何最好的插件，也负责处理点击事件（我使用创建/编辑/删除弹出事件）？

Answer 1

我写我自己弹出，显示采用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编程来计算鼠标点击的位置，并显示弹出。

Answer 2

的qTip插件可以处理的提示任意内容包括分配事件处理程序来获得更丰富的功能的能力和诸如此类的东西。

见demos。

Answer 3

的“气球”插件本身并不需要处理click事件，如fullcalender已经提供了一个配置的回调...

$('#calendar').fullCalendar({ 
     eventClick: function(calEvent, jsEvent){ 
      // ... your code here ... 
     } 
    }); 

如果您正在寻找提示式“气球”， Qtip建议是个不错的选择。您可以根据需要使用eventClick函数即时创建工具提示，也许可以从其他位置获取提示的内容。

Answer 4

试试这个...它是基于AJAX的，但如果你想..你也可以绑定您的活动的控制你愿意，你可以将其删除。

jquery ajax tooltip

Answer 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弹出窗口淡入时，它开始在fullCalendar风格的网格后面淡入。之后，第一〜几帧，它没事。另外，这可能是我在项目中进行的其他一些事情的问题。我懒得进一步调试，所以你的里程可能会有所不同。 ; p

Answer 6

如果弹出窗口不适用于您，请尝试使用旧版本的jquery。

我试着用jquery-1.4，它现在可以工作。我试着用jquery-1.2.6，它完美的作品。

见a discussion about using older jquery for making qtips work

Answer 7

这里是我的实现。我这样做悬停，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}