在FullCalendar日觸發jQuery Qtip點擊

Question

我有一個jquery fullcalendar。我想要觸發jquery QTip（或其他jquery解決方案（例如lightbox）），當我點擊一天以顯示選項列表時。這個問題類似於this question already posted，但是有足夠的差異來證明一個新的問題。

有這個一個event callback，但我不能確定如何將此與jQuery Qtip整合...

$('#calendar').fullCalendar({ 
    dayClick: function(date, allDay, jsEvent, view) { 

     if (allDay) { 
      alert('Clicked on the entire day: ' + date); 
     }else{ 
      alert('Clicked on the slot: ' + date); 
     } 

     alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY); 

     alert('Current view: ' + view.name); 

     // change the day's background color just for fun 
     $(this).css('background-color', 'red'); 

    } 
}); 

這顯然帶來了警示，並改變單擊的單元格紅色的顏色。

這是另一個示例，顯示QTip被整合到懸停在事件上。

$('#calendar').fullCalendar({ 
    ... 
    eventRender: function(event, element, view) 
    { 
     element.qtip({ content: "My Event: " + event.title }); 
    } 
    ... 
}); 

此示例顯示了用於觸發QTIP的懸停回調。

現在我只需要這兩個例子結合起來......

UPDATE 26/05/2010

克雷格在Qtip論壇上使用viewDisplay回調作爲替代DayClick回調建議這似乎是造成各種問題的原因。 （鎖定瀏覽器是最突出的）。

Here is the post:

下面是代碼：

viewDisplay: function() { 
        var calendar = $(this); 

       $(this).qtip({ 
        content: 'TEST', 
        position: { 
       my: 'top center', 
       at: 'top center' 
        }, 
        show: 'click', 
        hide: 'click', 
        style: { 
       tip: true 
        } 
       }) 
     }, 

此方法顯示被點擊時的一天的工具提示。但是有一些問題。

1. 據我所知，通過此回調沒有日期信息可訪問，因此很難顯示特定於所點擊日期的工具提示。
2. 通過此回調沒有X和Y點擊信息，因此幾乎不可能將提示放在點擊日期旁邊。

所有幫助非常感謝！

感謝，

添

Answer 1

這正好爲CSS被應用到Qtip。

$.fn.qtip.styles.tipstyle = { 
    width: 400, 
    padding: 0, 
    background: '#FFFFFF', 
    color: 'black', 
    textAlign: 'center', 
    border: { 
     width: 3, 
     radius: 4 
    }, 
    tip: 'bottomMiddle', 
    name: 'dark' 
} 

這是dayClick功能：

dayClick: function(date, allDay, jsEvent, view) { 
    if (typeof $(this).data("qtip") !== "object") { 
     $(this).qtip({ 
      content: { 
       prerender: true, 
       text: "Hello World" 
      }, 
      position: {corner: {tooltip: 'bottomMiddle', target: 'topMiddle'}}, 
      style: { 
       name: 'tipstyle' 
      }, 
      show: { 
       when: {event: 'click'}, 
       ready: true 
      }, 
      hide: { 
       fixed: true 
      } 
     }); 
    } 
} 

的，如果dayClick函數內聲明可以確保Qtip不創建每次你點擊相同的日期。

可能出現的一個小問題是，如果您想訪問dayClick函數中的某些事件數據。但同樣可以解決這個問題。

歡呼聲中，獅心王

Answer 2

我看到，可以先制定出兩種可能性。一，你在文檔中添加一個看不見的div，20px乘20px左右。在當天的點擊回調中，您將該位置置於問題表格單元格中間（通過$('td.fc-day' + dayNr)獲取），並使其可見（也可以將其放置在鼠標指針處）。然後在它上面調用click()使工具提示出現。

第二種可能性：您在每個表格單元格上調用qtip（大約等於$('div.fc-content').find('td')），根本不使用dayClick。或者，您將這兩個想法結合起來並觸發dayClick回撥中的qtip事件。

我想去可能性之一，我猜，因爲它涉及更少的事件監聽器。但是，它假定您具有相同的工具提示，無論具體日期如何（但工具提示也可以在顯示之前進行配置）。

希望是有道理的。

Answer 3

並不確切地知道你要在工具提示中顯示什麼，但你不能用這個：

$('#calendar').fullCalendar({ 
    dayClick: function(date, allDay, jsEvent, view) { 
     $(this).qtip({ content: 'some html content' }); 
    } 
}); 

在回調「這個」是點擊的一天<td>。也許做一個功能的基礎上，「日期」來渲染HTML，並從qtip觸發稱之爲：

$(this).qtip({ content: yourQtipRenderer(date) }); 

Answer 4

我沒有被使用qTip是誠實的，但根據它的文檔「顯示」選項確定當顯示工具提示，它似乎被設置爲「鼠標懸停」爲默認，所以儘量將其更改爲「點擊」，像這樣：

$('#calendar').fullCalendar({ 
    dayClick: function(date, allDay, jsEvent, view) { 
     $(this).qtip({ content: 'some html content', show: 'click' }); 
    } 
}); 

Answer 5

我與fullCalendar和Qtip工作了一個星期，現在，對我來說，膝蓋的解決方案應該在理想的情況下工作。

您可以先檢查函數是否真的被調用。 試着這麼做：

$('#calendar').fullCalendar({ 
    dayClick: function(date, allDay, jsEvent, view) { 
     alert(date); 
     } 
}); 

如果點擊每天爲您提供了該日期警報，那麼問題在於Qtip實施。如果您沒有收到警報，問題是使用fullCalendar實現。

正如膝蓋所示，'show：click'應顯示Qtip。但是，如果不是，請嘗試：

show: { when: { event: 'click' } } 

最後，不要忘記檢查文檔： http://craigsworks.com/projects/qtip/docs/reference/#show

Answer 6

如果彈出不爲你工作，嘗試使用jquery的舊版本。

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

見a discussion about using older jquery for making qtips work with fullcalendar