jQuery UI相对于两个元素的位置

jQuery UI position relative to two elements

本文关键字：两个 元素 位置 UI 相对于 jQuery      更新时间：2023-09-26

是否可以指定jQuery UI的位置，其中X坐标相对于element1，Y坐标相对于element 2？

示例1:我想弹出一个对话框，使其水平居中，但垂直居中在其他元素上。

示例2:我的DOM中有两个项，我想将第三个项放在这两个项的外角。我知道我可以选择它们中的每一个的位置，并从一个使用x，从另一个使用y，但这样做会更好

jQuery('#UpperRight').postion({ 
    my : 'right top',
    at : 'right',
    of : '#rightMostItem',    
    at : 'top',
    of : '#topMostItem'
}) // double parameters don't work of course

或

jQuery('#UpperRight').position({ 
    my : 'right IGNORE',
    at : 'right IGNORE',
    of : '#rightMostItem'})
 .postion({ 
    my : 'IGNORE top',
    at : 'IGNORE top',
    of : '#topMostItem'
}); // where IGNORE overrides the default center

到目前为止，所有的尝试都被"中心"作为默认值，不允许使用"我在一个方向上的当前位置"作为基础。任何好主意都很好！

这是一个快速的jquery插件，如果我正确理解你的问题，它可以做你想做的事情。

http://jsfiddle.net/S4N5g/5/

插件代码：

$.fn.positionRelative = function(config) {
    var element = this;
    var config = config || {};
    var x = config.x || false;
    var y = config.y || false;    
    var of = config.of || false;
    var css = {}, positionX, positionY;
    
    if (x !== false) {
        
        var offsetX = of.offset().left;
        if (x === 'left') {
            positionX = offsetX;
        } else if(x === 'center') {
            
            var elWidth = element.width();
            var elOffsetWidth = elWidth / 2;
            
            positionX = offsetX + (of.width() /  2);
            positionX = positionX - elOffsetWidth;
            
        } else if(x === 'right') {
            positionX = offsetX + of.width();
        }
        css['left'] = positionX + 'px';
    }
    if (y !== false) {
        var offsetY = of.offset().top;
        
        if (y === 'top') {
            positionY = offsetY;
        } else if(y === 'center') {
            
            var elHeight = element.height();
            var elOffsetHeight = elHeight / 2;
            
            positionY = offsetY + (of.height() /  2);
            positionY = positionY - elOffsetHeight;
            
        } else if(y === 'bottom') {
            positionY = offsetY + of.height();
        }        
        css['top'] = positionY + 'px';        
    }
    css['position'] = 'absolute';
    element.css(css);
    return this;
}

用法：

//Usage
$('.popup').positionRelative({
    x: 'center',
    of: $('.element1')
}).positionRelative({
    y: 'center',
    of: $('.element2')
});

也可以对x使用选项left、right或center，对y使用选项top、bottom和center。

关于修订后的问题：

是否可以指定jQuery UI的位置，其中X坐标为相对于元素1，Y坐标相对于元素2？

可以手动使用.offset()、.outerWidth()和.css()功能来实现所需的结果，如下所示：

  • 使用偏移函数获取参考元素的x和y坐标非常简单

  • 然后，您可以通过添加宽度/高度来计算参考元素的水平中心、垂直中心、右侧和底部坐标（见下文）

  • 一旦你有了参考坐标，将目标元素与这些坐标对齐（见下文）

参考元素的左侧、顶部、宽度和高度的剩余坐标：

horizontal center = left + width / 2
  vertical center = top  + height / 2
            right = left + width
           bottom = top  + height

使用CSS:将目标元素角与给定的x和y坐标对齐

             align left with x => left: x
              align top with y => top:  y
            align right with x => left: x - width
           align bottom with y => top:  y - height
align horizontal center with x => left: x - width / 2
  align vertical center with y => top:  y - height / 2

以下是将元素的水平中心/垂直中心与元素1的水平中心和元素2的垂直中心对齐的示例代码：

var x1 = $("#div-1").offset().left + Math.floor($("#div-1").outerWidth() / 2);
var y1 = $("#div-2").offset().top + Math.floor($("#div-2").outerHeight() / 2);
var x2 = x1 - Math.floor($("#dialog").outerWidth() / 2);
var y2 = y1 - Math.floor($("#dialog").outerHeight() / 2);
$("#dialog").css({
    left: x2,
    top: y2
});

这是演示。

根据以上信息，可以编写自己的通用函数。

您的需求非常特定于这种独特的情况。

我没有现成的解决方案，但有一个如何解决问题的建议

我的建议是实现一个自定义的jQuery函数（例如position2），它将根据您想要的选项计算位置。由于每个人都可以浏览（和抓取）jQuery UI代码，因此可以查看position函数的实现，并将大部分代码复制到新的jQuery函数中。

重要不能在options对象中使用相同的属性名称。

这个新功能的用法看起来是这样的：

$("#element").position2({
    my: "right top",
    atX: "right",
    ofX: "#rightMostItem",
    atY: "top",
    ofY: "#topMostItem"
});

我知道这个解决方案不是最简单的，但我怀疑是否已经构建了满足您需求的解决方案。

哦。。。如果你选择实现它，不要忘记在这里发布你的代码供其他人使用。

相关文章：