Question

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

示例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

到目前为止，所有尝试都被捕获，“中心”是默认值，不允许使用“我在一个方向上的当前位置”作为基础。任何好的想法都非常好！

Answer 1

这是一个快速的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')
});

您还可以使用left，right或center选项x和top，bottom，center y。

Answer 2

关于修订后的问题：

是否可以指定jQuery UI位置，其中X坐标为相对于element1和Y坐标是相对于element2？

可以使用.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
});

And here is the demo

鉴于上述信息，可以编写自己的通用函数。

Answer 3

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

我没有为您准备好的解决方案，但建议如何解决问题。

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

重要！您无法在options对象中使用相同的媒体资源名称。

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

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

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

哦......如果您选择实施它，请不要忘记在此处发布您的代码供其他人使用。

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

3 个答案:

插件代码：

用法：