qQuery上的jQuery UI Datepicker

我试图显示一个包含jQuery UI datepicker控件（与jQuery UI捆绑在一起的版本）的qTip。然而，datepicker的日历在qTip后面打开。我尝试从firebug手动设置日历的z顺序，这可以让日历在qTip前面打开。然而，在这种情况下，点击日历会产生关闭qTip的效果，因为（我认为）它是页面内容的一部分。qQuery上的jQuery UI Datepicker

我还在努力通过这个，但想问 - 有人遇到过这个问题吗？任何可能的解决方法，让datepicker工作？

来源

2009-06-13 Justin Ethier

而不是使用QTip（它的设计工作方式像一个工具提示，旨在disapear），也许你应该使用JQuery对话框控件。或者，你可以在一个风格化的div上使用JQuery UI位置库（这应该是QTip正在使用的东西）。

来源

2009-06-13 03:45:47

您必须将jQuery UI Datepicker的z-index更改为出现在qTip前面。

要解决“点击datepicker和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' 
      }}  
    }); 
});

来源

2010-03-27 22:37:39 sevens

qQuery上的jQuery UI Datepicker

回答

相关问题