Триггер jQuery Qtip на FullCalendar dayClick

Question

У меня есть jquery fullcalendar .Я хотел бы вызвать jquery QTip (или другое решение jquery (например, лайтбокс)), когда я нажимаю на день, чтобы вызвать список опций.Этот вопрос похож на этот вопрос уже опубликован , однако достаточно отличается, чтобы оправдать новый вопрос.

Для этого существует обратный вызов , но я не уверен, какинтегрируйте это с 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 });
    }
   ...
 });

В этом примере показан обратный вызов hover, используемый для запуска QTIP.

Теперь мне просто нужно объединить эти два примера ...

ОБНОВЛЕНИЕ26.05.2010

Крейг на форумах Qtip предложил использовать обратный вызов viewDisplay в качестве альтернативы обратному вызову DayClick, который, похоже, вызывает всевозможные проблемы.(Блокировка браузера является наиболее заметной).

Вот пост:

Вот код:

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
            }
        });
    }
}

Оператор if внутри функции dayClick гарантирует, что Qtip не создается каждый раз, когда вы нажимаете на одну и ту же дату.

Одна небольшая проблема, которая может возникнуть, - это если вы хотите получить доступ к некоторым данным о событиях внутри функции dayClick. Но опять же, для этого может быть обходной путь.

Cheers, LionHeart

Answer 2

Если всплывающее окно не работает для вас, попробуйте использовать более старую версию jquery.

Я пытался с jquery-1.4, и теперь он работает. Я пробовал с jquery-1.2.6, и он отлично работает.

См. обсуждение использования старого jquery для работы qtips с fullcalendar

Answer 3

Я работаю с fullCalendar и Qtip уже неделю, и мне кажется, что решение Колпа должно работать в идеальном случае.

Сначала вы можете проверить, действительно ли вызывается функция или нет. Попробуйте что-то вроде:

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

Если щелчок по дню дает вам предупреждение с этой датой, то проблема заключается в реализации Qtip. Если вы не получили оповещение, проблема в реализации fullCalendar.

Как подсказывает knepe, 'show: click' должен показывать Qtip. Но если это не так, попробуйте:

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

Наконец, не забудьте проверить документы: http://craigsworks.com/projects/qtip/docs/reference/#show

Answer 4

Честно говоря, я не использовал qTip, но в соответствии с его документацией, опция 'show' определяет, когда показывать всплывающую подсказку, она по умолчанию настроена на 'mouseover', поэтому попробуйте изменить ее на 'click' 'вот так:

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

Answer 5

Не знаю точно, что вы хотите показать во всплывающей подсказке, но вы не можете использовать это:

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

В обратном вызове 'this' - это <td> указанного дня. Может быть, сделать функцию для рендеринга html на основе 'date' и вызвать ее из триггера qtip:

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

Answer 6

Я вижу две возможности, которые могут сработать. Во-первых, вы добавляете невидимый div к документу, 20 пикселей на 20 пикселей или около того. В обратном вызове щелчка дня вы помещаете эту ячейку в середину рассматриваемой ячейки таблицы дня (держите ее с помощью $('td.fc-day' + dayNr)) и делаете ее видимой (возможно, вы также можете расположить ее по указателю мыши). Затем вызовите click(), чтобы всплывающая подсказка появилась.

Вторая возможность: вы вызываете qtip в каждой ячейке таблицы (на $('div.fc-content').find('td') или около того) и не используете dayClick вообще. Или вы объединяете обе идеи и запускаете событие для qtip в обратном вызове dayClick.

Полагаю, я бы выбрал первую возможность, потому что она включает меньше слушателей событий. Однако предполагается, что у вас есть одна и та же всплывающая подсказка независимо от конкретного дня (но подсказку также можно настроить перед ее отображением).

Надеюсь, что это имеет смысл.