jquery - jquery位置与碰撞。检测到碰撞时添加类

Question

我正在使用带有碰撞的 jquery-ui 的自动完成框来显示输入上方或下方的自动完成。我想要的是在检测到碰撞时向自动完成元素添加一个类，这样我就可以稍微自定义css，如果它高于或低于。这似乎应该很简单，但我似乎无法找到任何方法来实现它。

Answer 1

更好的解决方案是在回调中使用第二个参数。来自 jQueryUi 文档：

第二个提供关于两个元素的位置和尺寸的反馈，以及对它们的相对位置的计算。target 和 element 都具有以下属性：element、left、top、width、height。此外，还有水平、垂直和重要，给你十二个潜在的方向，如{水平：“中心”，垂直：“左”，重要：“水平”}。

正如它所说，第二个参数中有一个水平属性和一个垂直属性，您可以使用它来确定元素是否被翻转。所以你可以这样写：

$("#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

与其使用此处提到的两种解决方案，我更喜欢创建一个自定义翻转处理程序，该处理程序使用默认处理程序并检测是否有更改。

这是我的做法：

$.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)您可以将类添加/删除到其他元素，而不是添加/删除对话框本身的类...