彈出的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}