jQuery UI Datepicker с подвыпившим jQuery

Есть идеи, как реализовать всплывающие подсказки tipsy поверх пользовательского интерфейса jQuery Datepicker? В основном я хочу получить всплывающую подсказку, когда пользователь переходит на определенную дату в Datepicker. Datepicker будет отображаться встроенным и всегда видимым.

Спасибо!


person remedix    schedule 19.02.2010    source источник


Ответы (1)


Это звучит довольно круто,

Вот мое решение. Прочитайте комментарии.

(function($){


/** 
 * Returns a dictionary, where the keys are the day of the month, 
 * and the value is the text.
 * @param year - The year of the events.
 * @param month - The month of the events.
 * @param calendarID - Events for a specific calendar.
 */
function getMonthEvents(year, month, calendarId){
  return {11: "My birthday.", 23: "My anniversary" };
}

// Receives January->1
function addTipsys(year, month, calendarId){
   var theEvents = getMonthEvents(year, month, calendarId);
   var theDateLinks = $('#' + calendarId + ' .ui-datepicker-calendar a');
   for(eventDay in theEvents){
      // Minus one, because the date in the tipies are regular dates (1-31)
      // and the links are 0-based.
      theDateLinks.eq(eventDay-1)  // select the right link
         .attr('original-title', theEvents[eventDay])  // set the text
         .tipsy();   // init the tipsy, set your properties.
   }
}

// Because the the event `onChangeMonthYear` get's called before updating 
// the items, we'll add our code after the elements get rebuilt. We will hook 
// to the `_updateDatepicker` method in the `Datepicker`.
// Saves the original function.
var _updateDatepicker_o = $.datepicker._updateDatepicker;
// Replaces the function.
$.datepicker._updateDatepicker = function(inst){ 
   // First we call the original function from the appropiate context.
   _updateDatepicker_o.apply(this, [inst]); 
   // No we can update the Tipsys.
   addTipsys(inst.drawYear, inst.drawMonth+1, inst.id);
};

// Finally the calendar initializer.
$(function(){
   // Creates the date picker, with your options.
   $("#datepicker").datepicker();
   // Gets the date and initializes the first round of tipsies.
   var currentDate = $('#datepicker').datepicker('getDate');
   // month+1 because the event considers January->1
   // Last element is null, because, it doesn't actualy get used in the hanlder.
   addTipsys(currentDate.getYear(), currentDate.getMonth()+1, 'datepicker');
});

})(jQuery);

Неудобства:

  1. Метод _updateDatepicker вызывается также, когда пользователь выбирает день из видимого месяца или когда вы устанавливаете дату через datepicker('setDate', theDate), что может быть немного неэффективным.

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

ПРИМЕЧАНИЕ. Мой первый подход заключался в том, чтобы подключиться к событию onChangeMonthYear события ui.datepicker, но поскольку событие срабатывает, перед заменой дат в календаре метод addTipsys добавлял подвыпивших к календарные даты, которые вот-вот будут очищены. Поэтому необходимо вызывать событие addTipsys ПОСЛЕ обновления элементов.

ПРОСТОЙ ХАРАКТЕР: привяжите метод к событию onChangeMonthYear вашего календаря и выполните setTimeout для вызова подвыпивших. Некоторая проверка должна быть сделана.

person guzart    schedule 19.02.2010
comment
Привет, спасибо! Кажется, вы приложили некоторые усилия, и я ценю это. У меня все еще есть некоторые проблемы с реализацией этого. Я продолжаю получать ошибку "год" не определен addTipsys(year, month, inst.id); Возможно, я делаю что-то не так. Не могли бы вы загрузить свои тестовые файлы куда-нибудь, чтобы я мог посмотреть? Еще раз спасибо! - person remedix; 20.02.2010
comment
О, да, плохо... внутри функции $.datepicker._updateDatepicker измените addTipsys(year, month, inst.id) на addTipsys(inst.drawYear, inst.drawMonth+1, inst.id), извините, у меня нет тестовых файлов. Я работал из консоли Firebug. - person guzart; 20.02.2010
comment
Эй, да, это работает! Бесконечно благодарен! Теперь мне нужна подсказка, чтобы оставаться видимой (даже когда пользователь наводит курсор на всплывающую подсказку), пока пользователь не перейдет к другой всплывающей подсказке. Я планирую разместить несколько ссылок во всплывающей подсказке, и, надеюсь, мне удастся это сделать с помощью подвыпившего. В противном случае я буду использовать другой плагин всплывающей подсказки jquery. Еще раз спасибо за помощь дружище! - person remedix; 21.02.2010
comment
Здорово! и вы все равно можете использовать это с любым другим плагином всплывающей подсказки, просто внесите изменения в событие addTipsys. Рад, что смог помочь. - person guzart; 21.02.2010