Триггер jQuery qВведите событие Dayclick в FullCalendar, а затем создайте в нем кнопку "Событие"

Теперь, когда я нажимаю на день в календаре, появляется "qTip ToolTip", который включает в себя две кнопки "Закрыть" (x) и "Создать кнопку события"

Когда я нажимаю создать событие, он предупреждает о дате того дня и когда я нажимаю кнопку закрыть, он скрывает этот qTip (изначально я уничтожал этот qTip). когда я снова нажимаю на тот же день qTip не появляется снова. Как обрабатывать несколько qTips, которые запускаются на dayClick и исчезают либо нажав кнопку закрытия, либо нажав на другую дату. Я также хочу создать событие, используя createEvent в qTip

Ответы

Ответ 1

Вам нужно установить свойство hide конструктора qTip с "false" на somthing, как показано ниже:

Пример:

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

Я никогда не работал с qTip, но, похоже, это должно делать. Он привяжет событие hide к кнопке закрытия внутри иерархии дочерних элементов текущего экземпляра. Qtip может использовать класс toggle или что-то еще, чтобы обрабатывать методы hide/show. Если это так, вы можете нарушить шаблон. Даже призывая его внешне под обязательством "жить".

Ответ 2

Ваша опция для скрыть, похоже, не соответствует apidoc, вы пытались не скрыть ее: false, но вместо этого указав событие, которое скрывает его (см. qtip doc), чтобы qtip выполнял все показания и скрывал

Ответ 3

Следующие коды должны работать. а также необходимо исправить ошибку в qtip.js. Я использую версию 1.0.0-rc3, и мне нужно заменить строку 1003 от for(i = 0; i < interfaces.length - 1; i++) до for(i = 0; i < interfaces.length; i++).

Я предлагаю изменить другую библиотеку tooltip вместо qtip. Он разработан без особых целей, что приведет к появлению многих элементов HTML GHOST. или может попробовать 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>

Триггер jQuery qВведите событие Dayclick в FullCalendar, а затем создайте в нем кнопку "Событие"

CSS, применяемый для создания содержимого в подсказке

событие dayclick на fullcalendar

Ответы

Ответ 1

Ответ 2

Ответ 3