1

jQuery UI datepicker コントロール (jQuery UI にバンドルされているバージョン) を含むqTipを表示しようとしています。ただし、日付ピッカーのカレンダーは qTip の背後で開きます。カレンダーの z オーダーを firebug から手動で設定してみました。これにより、qTip の前でカレンダーを開くことができます。ただし、この場合、カレンダーをクリックすると、qTip がページのコンテンツの一部であるため、qTip を閉じる効果があります。

私はまだこれに取り組んでいますが、質問したかったのですが、以前にこの問題に遭遇した人はいますか? 日付ピッカーを機能させるための回避策はありますか?

4

2 に答える 2

1

jQuery UI Datepicker の z-index を変更して、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'
          }}       
    });
});
于 2010-03-27T22:37:39.483 に答える