0

我有一个设置，我使用 Jquery UI 日历和 Qtip 来显​​示与每个月的每一天相关联的文本。

我像这样启动 UI 组件：

$('#datepicker').datepicker({                
        dateFormat: 'dd/mm/yy',
        beforeShowDay: highlightDays,
        showOtherMonths: true,
        numberOfMonths: 2
    });

在此之后，我启动了 qtips：

$('#datepicker').find("td").each(function(){
        $(this).qtip({    
          content:  {   text: tips[$(this).attr('title')]  },
          show: {   solo: true  },    
          hide: 'unfocus'
        });
    })

我将需要显示的信息保留在我从数据库中填充的称为“提示”的数组中。问题是每当我更改月份或单击日期时，qtip 将不再显示。

我尝试了这种解决方法，但它不起作用：

$('#datepicker').datepicker({                
        dateFormat: 'dd/mm/yy',
        beforeShowDay: highlightDays,
        showOtherMonths: true,
        numberOfMonths: 2,
        onChangeMonthYear: function(year, month, inst){
             $('#datepicker').find("td").each(function(){
                $(this).qtip({    
                  content:  {   text: tips[$(this).attr('title')]  },
                  show: {   solo: true  },    
                  hide: 'unfocus'
                });
            })
        }
    });

即使用户单击日元素并更改月份，我如何保留 qtips 的任何想法？

更新#1

这是一个复制问题的小提琴http://jsfiddle.net/ZKtAZ/3/（更新的小提琴）

更新#2

正如 EmirCalabuch 建议的那样尝试“开启”，但仍按月更改它无法正常工作http://jsfiddle.net/ZKtAZ/9/。

我可能会说一些愚蠢的话，但是当日历更改月份时，它实际上是在重置整个日期选择器，这可能是它不起作用的原因。

更新#3

我找到了一个解决方案，您可以在这里找到http://jsfiddle.net/ZKtAZ/11/。

实际上，我必须将单击事件绑定到日期选择器，以便它在月份更改时设置适当的操作。

在启动选择器时，使用这段代码解决了点击日期的问题：

onSelect: function (date, inst) {
        inst.inline = false;
    }

使用此答案在这里找到了解决方案https://stackoverflow.com/a/2312825/1168944

谢谢大家的时间和贡献。

4

1 回答 1

1

jQuery UI datepicker 具有（至少是最新版本）内部工具提示支持，因此您不需要添加 qtip。要将工具提示文本应用于特定日期，在beforeShowDay函数上，只需返回一个三元素数组（您当前返回两个）。第三个元素是您希望在悬停该日期时显示的工具提示文本（如果有的话）。

我在这里发布了一个小提琴，展示了它的样子：http: //jsfiddle.net/CFMru/

关于您的问题，在onChangeMonthYear()实际创建日期选择器的表之前调用该方法，因此您无法在其上设置 qtip。如果您仍想使用 qtip 作为工具提示，我认为最好的办法是使用live()or拦截悬停事件on()，检查是否需要在当前日期显示工具提示，然后静态显示工具提示。使用on()或live()保证即使在尚不存在的 DOM 元素上也会调用您的代码：

$('#datepicker tbody td').on('mouseenter', function() {
    // Reconstruct the hovered date
    var closest_datepicker = $(this).closest('div.ui-datepicker-group');
    var month = closest_datepicker.find('span.ui-datepicker-month').text();
    var year = closest_datepicker.find('span.ui-datepicker-year').text();
    var day = $(this).text();

    // Look for the date in the array

    // Show the tooltip
    $(this).qtip({show: {ready: true}, hide: {fixed : true}, content: 'Your content' });
}

// Attach a mouseleave event as well to hide the tooltip
$('#datepicker tbody td').on('mouseleave', function() {
    // Destroy the tooltip, it will be recreated when hovered again
    $(this).qtip("destroy");
}
于 2013-08-03T09:37:15.253 回答