Tetikleyici jQuery Qtip'te FullCalendar dayClick

Question

jquery fullcalendar var. Bir seçenekler listesine ulaşmak için bir günü tıkladığımda jquery QTip (veya başka bir jQuery çözümü) (ışık kutusu gibi) tetiklemek isterim. Bu soru this question already posted'a benzer, ancak yeni bir soruya yetecek kadar farklı.

$('#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'); 

    } 
}); 

Bu açıkça uyarıları getirir ve tıklanan hücre kırmızı rengini değiştirir ...

bunun için bir event callback yoktur ama jQuery qtip ile bu nasıl entegre emin değilim.

Burada, QTip'in etkinliklerde gezinmek için entegre edilmesini gösteren başka bir örnek verilmiştir. Bu örnek, QTIP'yi tetiklemek için kullanılan vurgulu geri arama durumunu gösterir.

Şimdi sadece bu iki örneği birleştirmek gerekir

...

GÜNCELLEME qtip forumlarında 26/05/2010

Craig DayClick callback'inde alternatif olarak viewDisplay geri arama kullanarak önerdi her türlü soruna yol açıyor gibi görünüyor. (Tarayıcıyı en göze çarpan şekilde kilitlemek).

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

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

Bu yöntem, günde tıklandığında bir araç ipucu gösterilir: Burada

Here is the post:

kodudur. Ancak birkaç sorun.

1. Bu geri bildirimle erişilebilen bir tarih bilgisi olmadığını söyleyebildiğim kadarıyla, tıklatılan tarihe özgü bir araç ipucu göstermeyi zorlaştırır.
2. Bu geri bildirimle erişilebilen bir X ve Y tıklama bilgisi bulunmaz ve bu sayede bahşiş tarihini tıklatmanız mümkün değildir.

Tüm yardımlar çok takdir edilmektedir!

sayesinde

Tim

Answer 1

qtip uygulanacak.

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

Ve bu dayClick fonksiyonudur:

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 işlevi içinde deyimi qtip aynı tarihte tıklayın everytime oluşturulan olmadığından emin yaparsa.

Bazı küçük problemler, daydat işlevindeki bazı etkinlik verilerinize erişmek istiyorsanız. Ama yine bunun için de geçici bir çözüm olabilir.

Alkış, Aslanyürekli

Answer 2

ben işe yarayabilecek iki ihtimal görüyorum. Bir, belgeye görünmez bir div eklersiniz, 20px kere 20px veya benzeri. Geri arama tıklatıldığında, söz konusu gün tablo hücresinin ortasında konumlandırırsınız ($('td.fc-day' + dayNr) aracılığıyla tutun) ve görünür hale getirin (ayrıca fare imlecinde konumlandırabilirsiniz). Sonra araç ipucunun görünmesi için üzerinde click()'u arayın.

İkinci olasılık: Her tablo hücresinde ($('div.fc-content').find('td') veya benzeri) qtip numaralı telefonu arayın ve hiç dayClick'u kullanmayın. Ya da, her iki fikri birleştirir ve olayı dayClick geri aramada qtip için tetiklersiniz.

Daha az olay dinleyicisi içerdiğinden, olasılık için bir tane daha giderim.Ancak, belirli bir güne bakılmaksızın aynı araç ipuçlarına sahip olduğunuzu varsayar (ancak araç ipucu bunu göstermeden önce de yapılandırılabilir).

Bu, herhangi bir anlam ifade eder.

Answer 3

Eğer araç ipucu göstermek istediğim şey tam olarak bilmiyorum, ama bu kullanamazsınız: callback'inde 'bu' tıklanan günün <td> olduğu ise

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

.

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

Answer 4

dürüst olmak gerekirse qtip kullanılarak edilmemiştir, ancak belgelerine göre 'şov' seçeneği belirler: Belki 'date' dayalı html işlemek ve qtip tetikleyici onu aramak için bir işlev yapmak

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

Answer 5

Ben, şimdi bir hafta boyunca fullCalendar ve qtip ile çalışıyorum ve: araç ipucunu ne zaman gösterileceğini, gibi, varsayılan olarak 'mouseover' olarak ayarlandıktan sonra bu yüzden 'tık' değiştirmeyi deneyin gibi görünüyor bana knepe çözümü ideal durumda çalışmalıdır.

Önce işlevin gerçekten aranıp aranmadığını kontrol edebilirsiniz.

bir günde tıklayarak sana o tarihle bir uyarı verirse

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

, o zaman sorun qtip uygulamasıyla yatıyor: gibi bir şey deneyin. Bir uyarı almazsanız, sorun fullCalendar uygulamasıyla ilgilidir.

Knepe tarafından önerildiği gibi, 'show: tıkla' Qtip'i göstermelidir. Değilse Ama deneyin:

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

Son olarak, belgeler kontrol etmeyi unutmayın: Bu css olarak gider http://craigsworks.com/projects/qtip/docs/reference/#show

Answer 6

açılan sizin için işe yaramazsa, jquery eski bir sürümünü kullanmayı deneyin.

jquery-1.4 ile çalıştım ve şimdi çalışıyor. Jquery-1.2.6 ile çalıştım ve mükemmel çalışıyor.

sana bahsettik ilk çözüm anlamaya çalışıyorum