jquery - 衝突のあるjqueryの位置. 衝突が検出されたときにクラスを追加

Question

入力の上または下にオートコンプリートを表示するために、衝突のあるjquery-uiのオートコンプリートボックスを使用しています。私が望むのは、衝突が検出された場合にオートコンプリート要素にクラスを追加して、CSS が上と下にある場合に CSS を少しカスタマイズできるようにすることです。これは簡単にできるように思えますが、それを実現する方法がわかりません。

Answer 1

より良い解決策は、コールバックで 2 番目の引数を使用することです。jQueryUi ドキュメントから:

2 つ目は、両方の要素の位置と寸法に関するフィードバックと、それらの相対位置の計算を提供します。ターゲットと要素の両方に、要素、左、上、幅、高さのプロパティがあります。さらに、水平、垂直、および重要があり、{ 水平: "中央"、垂直: "左"、重要: "水平" } のような 12 の潜在的な方向を示します。

それが言うように、要素が反転されているかどうかを調べるために使用できる、2 番目の引数内に水平方向と垂直方向の属性があります。したがって、次のように書くことができます。

$("#someId").dialog({
      position: {
      my: 'left top',
      at: 'right top',
      collision: 'flip flip',
      of: $('#' + someElementID),
      using: function (obj,info) {
          if (info.vertical != "top") {
              $(this).addClass("flipped");
          } else {
              $(this).removeClass("flipped");
          }
          if (info.horizontal != "left") {
              $(this).addClass("flipped");
          } else {
              $(this).removeClass("flipped");
          }
          $(this).css({
            left: obj.left + 'px',
            top: obj.top + 'px'
          });
      }
},

Answer 2

ここで説明した 2 つのソリューションを使用するよりも、デフォルトのフリップ ハンドラーを使用して変更があるかどうかを検出するカスタム フリップ ハンドラーを作成することをお勧めします。

これが私がやっている方法です：

$.ui.position.custom = {
    left: function(position, data) {
        var initPos = position.left;
        $.ui.position.flip.left(position, data);
        if (initPos != position.left) {
            data.elem.addClass('tooltipFlipLeft');
        } else {
            data.elem.removeClass('tooltipFlipLeft');
        }
    },
    top: function(position, data) {
        var initPos = position.top;
        $.ui.position.flip.top(position, data);
        if (initPos != position.top) {
            data.elem.addClass('tooltipFlipTop');
        } else {
            data.elem.removeClass('tooltipFlipTop');
        }
    }
};

次に、位置関数を使用するときに使用します。

me.position({
    of: opener,
    my: 'right bottom',
    at: 'center top',
    collision: 'custom'
});

ここで関連する唯一の行は、衝突のある行です。

Answer 3

usingのコールバックを使用する必要がありますposition

ここに考えられる解決策があります。ダイアログを開くとします...

$("#someId").dialog({
position: {
    my: 'left top',
    at: 'right top',
    collision: 'flip flip',
    of: $('#' + someElementID),
    using: function (obj) {
        if (obj.left < $('#' + someElementID).offset().left) {
            $(this).addClass("flipped");
        } else {
            $(this).removeClass("flipped");
        }
        //decide if dialog is being opened flipped from buttom to top
        if ((obj.top + 50) < $('#' + someElementID).offset().top) {
            $(this).addClass("flipped_top");
        } else {
            $(this).removeClass("flipped_top");
        }
        $(this).css({
            left: obj.left + 'px',
            top: obj.top + 'px'
        });
    }
},
    ...

ダイアログ自体であるクラスを追加/削除する代わりに$(this)、クラスを他の要素に追加/削除できます...