Инициируйте jQuery Qtip на FullCalendar dayClick
У меня есть 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 });
}
...
});
Этот пример показывает обратный вызов при наведении курсора, используемый для инициирования QTIP.
Теперь я просто должен объединить эти два примера...
ОБНОВЛЕНИЕ 26.05.2010
Craig на форумах 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
}
})
},
Этот метод показывает подсказку, когда день нажат. Несколько проблем как бы то ни было.
- Насколько я могу сказать, что нет никакой информации о дате, доступной посредством этого обратного вызова, мешая показывать подсказку, характерную для нажатой даты.
- Нет никакой информации о щелчке X и Y, доступной посредством этого обратного вызова, делающего его почти невозможна поместить подсказку рядом с нажатой датой.
Вся справка очень ценится!
Спасибо,
Tim
5 ответов
Это похоже на 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. Но опять же, для этого может быть обходной путь.
Ура, LionHeart
Я вижу две возможности, которые могут сработать. Во-первых, вы добавляете в документ невидимый div, 20px на 20px или около того. В обратном вызове щелчка дня, вы позиционируете его в середине соответствующей ячейки таблицы дней (получите его с помощью $('td.fc-day' + dayNr)) и делаете его видимым (вы также можете позиционировать его на указателе мыши, возможно). Затем вызовите click() на нем, чтобы появилась всплывающая подсказка.
Второй вариант: Вы вызываете qtip на каждой ячейке таблицы (по $('div.fc-content').find('td') или около того) и не используете dayClick вообще. Или вы комбинируете обе идеи и запускаете событие для qtip в обратном вызове dayClick.
Я бы выбрал первый вариант, потому что он предполагает меньшее количество слушателей событий. Однако он предполагает, что у вас будет одинаковая всплывающая подсказка независимо от конкретного дня (но всплывающая подсказка может быть настроена и до того, как вы ее покажете).
Надеюсь, это имеет смысл.
Я не использовал qTip, если честно, но, согласно документации, опция 'show' определяет, когда показывать всплывающую подсказку, похоже, что по умолчанию для нее установлено значение 'mouseover', поэтому попробуйте изменить его на 'click ', например:
$('#calendar').fullCalendar({
dayClick: function(date, allDay, jsEvent, view) {
$(this).qtip({ content: 'some html content', show: 'click' });
}
});
Не знаю, что именно вы хотите показать в подсказке, но не можете ли вы использовать следующее:
$('#calendar').fullCalendar({
dayClick: function(date, allDay, jsEvent, view) {
$(this).qtip({ content: 'some html content' });
}
});
В обратном вызове 'this' - это Я работаю с fullCalendar и Qtip уже неделю, и мне кажется, что решение knepe должно работать в идеальном случае. Вы можете сначала проверить, действительно ли вызывается функция или нет.
Попробуйте сделать что-то вроде : Если при нажатии на день вы получаете оповещение с этой датой, то проблема заключается в реализации Qtip. Если вы не получите оповещение, то проблема в реализации FullCalendar. Как предложил knepe, 'show: click' должен показывать Qtip. Но если это не так, попробуйте : Наконец, не забудьте проверить документацию:
http://craigsworks.com/projects/qtip/docs/reference/#show дня, на который кликнули. Может быть, сделать функцию для рендеринга html на основе "даты" и вызвать ее из триггера qtip:
$(this).qtip({ content: yourQtipRenderer(date) });
$('#calendar').fullCalendar({
dayClick: function(date, allDay, jsEvent, view) {
alert(date);
}
});
show: { when: { event: 'click' } }
Похожие вопросы: