2009-06-13 7 views
1

jQuery UI datepicker 컨트롤 (jQuery UI에 번들 된 버전)이 포함 된 qTip을 표시하려고합니다. 그러나 datepicker의 달력은 qTip 뒤에 열립니다. 필자는 수동으로 달력의 z 순서를 파이어 버그 (firebug)에서 설정하려고 시도했는데, 이는 달력이 q 팁 앞에 열리는 것을 허용합니다. 그러나이 경우 캘린더를 클릭하면 qTip이 페이지 내용의 일부로 닫힙니다.qQuery에 대한 jQuery UI Datepicker

나는 아직도이 문제를 해결하기 위해 노력하고 있지만 물어보고 싶다. datepicker 작동을위한 가능한 모든 해결 방법은 무엇입니까?

답변

2

대신 QTip (툴팁처럼 작동하는 디자인 인 an은 사라지도록 설계되었습니다)을 사용하는 대신 JQuery Dialog 컨트롤을 대신 사용해야합니다.

또는 양식화 된 div에서 JQuery UI 위치 라이브러리를 사용할 수 있습니다 (어쨌든 QTip이 사용하는 것이어야합니다).

1

jQuery UI Datepicker의 z- 색인을 qTip 앞에 표시되도록 변경해야합니다.

"datepicker 및 qTip 닫기"를 클릭하여 문제를 해결하려면 "mouseout"을 닫기 위해 qTip을 구성해야합니다. datepicker는 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' 
      }}  
    }); 
});