3

jQueryuilibを使用してWebページを作成しようとしています。私のデザインでは、フォームの上部にある入力フィールドでjQueryuiオートコンプリートを使用しています。このオートコンプリート入力フォームのすぐ下には、いくつかのjQueryスライダーがあります。問題は、オートコンプリートボックスにデータが入力されると、スライダーコントロールのハンドルの後ろに結果が表示されることです。これは、jQueryがスライダーを構築してそれらの一部に3のz-indexを持たせる方法に由来します。jqueryオートコンプリートコントロールのドロップダウン部分のz-indexは常に1に設定されているようです。zを増やしてみました-オートコンプリートされているが、jqueryがオートコンプリートドロップダウン用に作成する要素のz-indexには影響しないように見える入力要素のインデックス。また、独自のJavaScriptを記述して、クラスごとにドロップダウンメニュー要素を取得し（これはulです）、手動で設定してみました。■z-index。これもうまくいかないようです。これは、どういうわけかjQueryコードが私が行っているz-indexの変更を上書きしていることを意味すると思います。これはFirefox、Chrome、Safari、IEの問題であるため、ブラウザのバグではありません。これは、jQueryがドロップダウンボックス（UL要素）を提供する実際のz-indexに問題があります。

誰かがこの問題の解決策を持っていますか？jQueryがコントロールを構築するために自動的に生成する要素をいじるのは一般的にどのようになりますか。

4

3 に答える 3

8

openイベントとcloseイベントを使用してz-indexを変更すると、次のようになりました。

$( "#tags" ).autocomplete({
  source: availableTags,      
  open: function(event, ui) { $(".ui-slider-handle").css("z-index", -1); },
  close: function(event, ui) { $(".ui-slider-handle").css("z-index", 2); }
});

こちらのデモをご覧ください。

于 2010-12-07T07:18:41.073 に答える
2

http://bugs.jqueryui.com/ticket/5238によると、これには 2 つの解決策があるようです。

「z-index を 3 に変更すると、これは完全に修正されるようです。」

CSS でこれを行うことができます。ライブラリ セットの値をオーバーライドするには、「!important」を追加するだけです。

ul.ui-autocomplete {
    z-index: 3 !important;
}

または、「.zIndex() が実際に z-index を計算できるように、オートコンプリート入力で position:relative を設定します。」

于 2012-01-28T20:32:20.360 に答える