trigger jQuery QTIP su Dayclick caso di FullCalendar e quindi creare eventi utilizzando il tasto in esso

Question

CSS applicata per creare un contenuto in tooltip

.cl_root { 
    width: 100%; 
    font-size: 13px; 
    overflow: hidden; 
} 
.cl_root .cl_table { 
    background-color: #FFF; 
    width: 100%; 
    margin-bottom: 8px; 
    max-width: 100%; 
} 
.cl_table .cl-key { 
    vertical-align: top; 
    text-align: left; 
    white-space: nowrap; 
    font-weight: normal; 
    padding: .4em 1em .4em 0; 
    font-weight:bold; 
} 
.cl_table .cl-value{ 
    width: 95%; 
    padding: .4em 0; 
    text-align:left; 
} 
.textbox-fill-input { 
    width:95%; 
    padding:2px; 
    border-width:1px; 
    border-color:#666 #ccC#ccC#666 

} 
.cl-example { 
    FONT-SIZE: 12px; PADDING-TOP: 2px; 
    font-style:italic 
} 
.lk { 
    WHITE-SPACE: nowrap; COLOR: #112abb; CURSOR: pointer; TEXT-DECORATION: underline; 
    float: left;padding-top: 6px;padding-left: 10px; 
} 

.bubble-table { 
    width: 100%; table-layout: fixed;margin-top: 17px;margin-bottom: 4px; 
} 
.bubble-cell-side { 
    WIDTH: 25px; 
} 
.bubble-mid { 
    PADDING-BOTTOM: 0px; PADDING-LEFT: 20px; PADDING-RIGHT: 20px; BACKGROUND: #fff; PADDING-TOP: 0px 
} 
.cl-button-quickAddBTN{ 
    float:left; 
} 
.bubble-closebutton { 
    POSITION: absolute; WIDTH: 15px; BACKGROUND: url(css/images/calendar/combined.gif) 0px -50px; HEIGHT: 15px; TOP: 10px; CURSOR: pointer; RIGHT: 10px 
} 

$.fn.qtip.styles.tipstyle = { 
       width:400, 
       background: '#FFFFFF', 
       color: 'black', 
       textAlign: 'center', 
       border: { 
        width: 2, 
        radius: 3 
       }, 
       tip: { 
        corner:'bottomMiddle', 
        size:{x:12,y:12} 
       }, 
       name: 'light' 
     } 

evento dayclick su fullcalendar

dayClick: function (date, allDay, jsEvent, view) { 

          var d=$.fullCalendar.formatDate(date,"ddd, MMM d"); 
      $('.qtip').remove(); 
      if(typeof $(this).data("qtip") !== "object" && allDay) {        
          $(this).qtip({ 
            content:{ 
            text:'<div id="cl_box"><table class="bubble-table" cellspacing="0" cellpadding="0">'+ 
            '<tbody><tr><td class="bubble-cell-side"><div id="tl1" class="bubble-corner">'+ 
            '<div class="bubble-sprite bubble-tl"></div></div></td><td class="bubble-cell-main">'+ 
            '<div class="bubble-top"></div></td><td class="bubble-cell-side">'+ 
            '<div id="tr1" class="bubble-corner"><div class="bubble-sprite bubble-tr"></div></div> </td></tr>'+ 
            '<tr><td class="bubble-mid" colspan="3"><div style="overflow: hidden" id="bubbleContent1">'+ 
            '<div><div></div><div class="cl_root">'+ 
            '<table cellspacing="0" cellpadding="0" class="cl_table">'+ 
'<tbody><tr><th class="cl-key">Time:</th><td class="cl-value"><div id="bbit-cal-buddle-timeshow">'+d+'</div></td></tr>'+ 
'<tr><th class="cl-key">What:</th><td class="cl-value"><div class="textbox-fill-wrapper"><div class="textbox-fill-mid">'+ 
'<input id="bbit-cal-what" class="textbox-fill-input"></div></div><div class="cl-example">e.g., meeting at room 107</div></td>'+ 
'</tr></tbody></table>'+ 
'<input id="bbit-cal-quickAddBTN" value="Create event" type="button" class="cl-button-quickAddBTN">'+ 
'<span id="bbit-cal-editLink" class="lk">Edit details <strong>&gt;&gt;</strong></span>'+ 
'<input type="hidden" id="box-cl" value="'+date+'">'+ 
'</div></div></div></td></tr></tbody></table>'+ 
'<div id="bubbleClose1" class="bubble-closebutton"></div></div>', 
            }, 

            position: {corner: {tooltip: 'bottomMiddle', target: 'center'}}, 
            style: { 
             name : 'tipstyle' 
             }, 
            adjust: { 
            screen: true // Keep the tooltip within the viewport at all times 
            }, 
            show: { 
             solo: true, 
             when: { event: 'click' }, 
             ready: true 
             }, 
            hide: false,         

          });      



           } 
         } 
<script> 
    $("#bbit-cal-quickAddBTN").live('click',function(){ 
                 alert($("#box-cl").attr('value')); 
            }); 
    $("#bubbleClose1").live('click',function() { 
             $(this).parents('qtip').hide(); 

            }); 
</script> 

Ora, quando clicco su appare un giorno nel calendario "qTip ToolTip" che include due pulsanti Pulsante Chiudi (x) e Crea pulsante evento

Quando faccio clic su creare evento avvisa la data di quel giorno e quando clicco su chiudi il pulsante nasconde quel qTip (inizialmente stavo distruggendo quel qTip) Ma quando clicco di nuovo lo stesso giorno qTip non appare nuovamente Come gestire più qTips che si attiva su dayClick e scompare facendo clic su un pulsante di chiusura o facendo clic su un'altra data. Voglio anche creare evento utilizzando il pulsante createEvent in qTip

Answer 1

L'opzione per hide non sembra corrispondere all'apidoc, hai provato a non impostandolo su hide: false ma invece specificando l'evento che lo nasconde (vedi il documento qtip), per consentire a qtip di mostrare e nascondersi?

Answer 2

I seguenti codici dovrebbero funzionare. e ha anche bisogno di correggere un bug in qtip.js. Uso la versione 1.0.0-rc3 e devo sostituire la linea 1003 da for(i = 0; i < interfaces.length - 1; i++) a for(i = 0; i < interfaces.length; i++).

---

Suggerisco di passare ad altra libreria del tooltip invece di qtip. È sovradimensionato senza uno scopo preciso che causerà molti elementi GHOST HTML. o potrebbe provare qtip2.

<script type="text/javascript"> 
     $(function() { 
     var self; 
     $("#calendar").fullCalendar({ 
      dayClick: function(date, allDay, jsEvent, view) { 
       self = this; 
       var d=$.fullCalendar.formatDate(date,"ddd, MMM d"); 
       if ($(this).data('qtip') == null || $(this).data("qtip").interfaces.length < 1) { 
        $(this).qtip({ 
         content: { 
          text: '<div><table class="bubble-table" cellspacing="0" cellpadding="0">'+ 
             '<tbody><tr><td class="bubble-cell-side"><div class="bubble-corner">'+ 
             '<div class="bubble-sprite bubble-tl"></div></div></td><td class="bubble-cell-main">'+ 
             '<div class="bubble-top"></div></td><td class="bubble-cell-side">'+ 
             '<div class="bubble-corner"><div class="bubble-sprite bubble-tr"></div></div> </td></tr>'+ 
             '<tr><td class="bubble-mid" colspan="3"><div style="overflow: hidden" >'+ 
             '<div><div></div><div class="cl_root">'+ 
             '<table cellspacing="0" cellpadding="0" class="cl_table">'+ 
    '<tbody><tr><th class="cl-key">Time:</th><td class="cl-value"><div >'+d+'</div></td></tr>'+ 
    '<tr><th class="cl-key">What:</th><td class="cl-value"><div class="textbox-fill-wrapper"><div class="textbox-fill-mid">'+ 
    '<input class="textbox-fill-input"></div></div><div class="cl-example">e.g., meeting at room 107</div></td>'+ 
    '</tr></tbody></table>'+ 
    '<input value="Create event" type="button" class="cl-button-quickAddBTN">'+ 
    '<span class="lk">Edit details <strong>&gt;&gt;</strong></span>'+ 
    '<input type="hidden" value="'+date+'">'+ 
    '</div></div></div></td></tr></tbody></table>'+ 
    '<div class="bubble-closebutton">X</div></div>' 
         }, 
         position: { 
          corner: { 
           tooltip: "bottomMiddle", 
           target: "center" 
          } 
         }, 
         adjust: { 
          screen: true 
         }, 
         show: { 
          solo: true, 
          when: {event: "click"}, 
          ready: true 
         }, 
         hide: false 
        }); 
       } 
      } 
     }); 
     $(".cl-button-quickAddBTN").live('click',function(){ 
                alert($("#box-cl").attr('value')); 
           }); 
     $(".bubble-closebutton").live('click',function() { 
              $(self).qtip("Destroy"); 

           }); 
     $.fn.qtip.styles.tipstyle = { 
         width:400, 
         background: '#FFFFFF', 
         color: 'black', 
         textAlign: 'center', 
         border: { 
          width: 2, 
          radius: 3 
         }, 
         tip: { 
          corner:'bottomMiddle', 
          size:{x:12,y:12} 
         }, 
         name: 'light' 
       } 
     }); 
     </script> 

Answer 3

È necessario impostare la proprietà pelle del constructio QTIP da "false" a somthing simile al seguente:

Esempio:

hide: show: { 
      target: $(this).find('#bubbleClose1'), 
      when: { event: 'click' }, 
      ready: true 
      }    
}); 

Non ho mai lavorato con QTIP, ma sembra che dovrebbe farlo. Legherà l'evento hide al pulsante di chiusura all'interno della gerarchia di bambini dell'istanza corrente. Qtip può utilizzare una classe di commutazione o qualcosa del genere, per gestire i metodi hide/show. Se questo è il caso, potresti essere in grado di interrompere il pattern. Anche chiamandolo esternamente sotto il vincolo di "live".