gatillo jQuery en Dayclick caso de FullCalendar y luego crear eventos mediante botón en ella

Question

CSS aplicada para crear un contenido en la descripción de

.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' 
     } 

caso dayclick en 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> 

Ahora, cuando hago clic en un día en el calendario aparece "qTip ToolTip" que incluye dos botones Botón Cerrar (x) y Crear Evento Botón

Cuando hago clic en creo el evento alerta la fecha de ese día y cuando hago clic en botón de cierre oculta esa punta (inicialmente estaba destruyendo esa sugerencia) Pero cuando vuelvo a hacer clic en el mismo día qToque no aparece de nuevo Cómo manejar múltiples qTips que disparadores en díaHaga clic y desaparece haciendo clic en un botón de cerrar o haciendo clic en otra fecha También quiero crear Evento usando el botón createEvent en qTip

Answer 1

Su opción para ocultar no parece coincidir con la apidoc, ¿no lo intentó? configurándolo para ocultarlo: falso pero en su lugar especificando el evento que lo oculta (ver el qtip doc), para dejar que qtip haga todo lo que se muestra y se esconde?

Answer 2

Los siguientes códigos deberían funcionar. y también necesita arreglar un error en qtip.js. Uso la versión 1.0.0-rc3, y necesito reemplazar la línea 1003 de for(i = 0; i < interfaces.length - 1; i++) a for(i = 0; i < interfaces.length; i++).

---

Sugiero cambiar a otra biblioteca de información sobre herramientas en lugar de qtip. Está sobrediseñado sin un buen propósito que causará muchos elementos HTML de GHOST. o podría intentar 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

Tiene que establecer la propiedad piel del constructio QTIP de "falso" a algo como lo siguiente:

Ejemplo:

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

nunca he trabajado con QTIP, pero parece que esto debería hacer. Vinculará el evento hide al botón Cerrar dentro de la jerarquía de elementos secundarios de la instancia actual. Qtip puede estar usando una clase de alternar o algo así, para manejar los métodos ocultar/mostrar. Si este es el caso, puede estar interrumpiendo el patrón. Incluso llamándolo externamente bajo el enlace de "en vivo".