jQuery UI Datepicker与jQuery tipsy

前端之家收集整理的这篇文章主要介绍了jQuery UI Datepicker与jQuery tipsy前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有关如何在jQuery的UI Datepicker上实现 tipsy工具提示的任何想法?基本上我想在用户在Datepicker中的特定日期移动时获得工具提示. Datepicker将以内联方式显示并始终可见.

谢谢!

解决方法

听起来很酷,

这是我的解决方案.阅读评论.

  1. (function($){
  2.  
  3.  
  4. /**
  5. * Returns a dictionary,where the keys are the day of the month,* and the value is the text.
  6. * @param year - The year of the events.
  7. * @param month - The month of the events.
  8. * @param calendarID - Events for a specific calendar.
  9. */
  10. function getMonthEvents(year,month,calendarId){
  11. return {11: "My birthday.",23: "My anniversary" };
  12. }
  13.  
  14. // Receives January->1
  15. function addTipsys(year,calendarId){
  16. var theEvents = getMonthEvents(year,calendarId);
  17. var theDateLinks = $('#' + calendarId + ' .ui-datepicker-calendar a');
  18. for(eventDay in theEvents){
  19. // Minus one,because the date in the tipies are regular dates (1-31)
  20. // and the links are 0-based.
  21. theDateLinks.eq(eventDay-1) // select the right link
  22. .attr('original-title',theEvents[eventDay]) // set the text
  23. .tipsy(); // init the tipsy,set your properties.
  24. }
  25. }
  26.  
  27. // Because the the event `onChangeMonthYear` get's called before updating
  28. // the items,we'll add our code after the elements get rebuilt. We will hook
  29. // to the `_updateDatepicker` method in the `Datepicker`.
  30. // Saves the original function.
  31. var _updateDatepicker_o = $.datepicker._updateDatepicker;
  32. // Replaces the function.
  33. $.datepicker._updateDatepicker = function(inst){
  34. // First we call the original function from the appropiate context.
  35. _updateDatepicker_o.apply(this,[inst]);
  36. // No we can update the Tipsys.
  37. addTipsys(inst.drawYear,inst.drawMonth+1,inst.id);
  38. };
  39.  
  40. // Finally the calendar initializer.
  41. $(function(){
  42. // Creates the date picker,with your options.
  43. $("#datepicker").datepicker();
  44. // Gets the date and initializes the first round of tipsies.
  45. var currentDate = $('#datepicker').datepicker('getDate');
  46. // month+1 because the event considers January->1
  47. // Last element is null,because,it doesn't actualy get used in the hanlder.
  48. addTipsys(currentDate.getYear(),currentDate.getMonth()+1,'datepicker');
  49. });
  50.  
  51. })(jQuery);

不便之处:

>当用户从可见月份中选择一天,或者通过datepicker(‘setDate’,theDate)设置日期时,也会调用_updateDatepicker方法,这可能效率不高.
>它依赖于Datepicker的私有函数,如果在将来的版本中他们决定更改它的功能,或者更改名称,则此代码将中断.虽然由于功能的性质,我不认为很快就会发生这种情况.

注意:
我的第一种方法是挂钩ui.datepicker的onChangeMonthYear事件,但由于事件被触发,在替换日历中的日期之前,addTipsys方法会将tipsy添加到即将获得的日历日期清除.因此需要在元素刷新后调用addTipsys事件.

很容易:将方法挂钩到日历的onChangeMonthYear事件,然后执行setTimeout来调用tipsy.需要进行一些验证.

猜你在找的jQuery相关文章