qTip 上的 jQuery UI 日期选择器答案

【问题标题】：jQuery UI Datepicker on a qTipqTip 上的 jQuery UI 日期选择器
【发布时间】：2009-06-13 03:26:27
【问题描述】：

我正在尝试显示一个 qTip，其中包含一个 jQuery UI 日期选择器控件（与 jQuery UI 捆绑在一起的版本）。然而，日期选择器的日历在 qTip 后面打开。我尝试从 firebug 手动设置日历的 z 顺序，这确实允许日历在 qTip 前面打开。但是，在这种情况下，单击日历具有关闭 qTip 的效果，因为（我假设）它是页面内容的一部分。

我仍在努力解决这个问题，但想问一下 - 以前有没有人遇到过这个问题？让日期选择器工作的任何可能的解决方法？

【问题讨论】：

标签： jquery jquery-ui qtip

【解决方案1】：

也许你应该使用 JQuery Dialog 控件，而不是使用 QTip（它被设计为像 Tooltip 一样工作，一个被设计为消失）。

或者，您可以在风格化的 div 上使用 JQuery UI Position 库（无论如何，这应该是 QTip 使用的）。

【讨论】：

【解决方案2】：

您必须更改 jQuery UI Datepicker 的 z-index 以显示在 qTip 前面。

要解决“单击日期选择器和 qTip 关闭”的问题，您需要将 qTip 配置为在“mouseout”上关闭。日期选择器位于 qTip 内部，因此一旦您越过 qTip 气泡，一旦您不“鼠标移出”qTip 内容，您就可以与内部的内容进行交互（在这种情况下单击日期）。

总之，这是我使用的qTip配置JS，“隐藏”部分也是你要注意的部分。

    $(document).ready(function()
{   
    $("img.calendarIcon-calendarView").qtip({

       content: { 
            url: 'ajaxContent/caledarInclude.html'
            },

        style: {
            name: 'dark',
            tip: 'topMiddle',
            width: { max: 1000 },
            border: {radius: 6, width: 4}
                },

        show: { 
            effect: { 
                type: 'slide', 
                length: 300  
                }
            },

        hide: { 
            when: 'mouseout', 
            fixed: true,
            delay: 750,
            effect: { 
                type: 'slide', 
                length: 300 
                }
            },

       position: {
          corner: {
             target: 'bottomMiddle',
             tooltip: 'topMiddle'
          }}       
    });
});

【讨论】：