9

是否可以指定 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

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

4

3 回答 3

4

这是一个快速的 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或centerforx和top、bottom、centerfor y。

于 2014-04-07T22:14:02.543 回答
4

关于修改后的问题：

是否可以指定 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
});

这是演示。

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

于 2014-04-09T11:40:04.423 回答
2

您的要求非常适合这种独特的情况。

我没有现成的解决方案供您使用，而是提供如何解决问题的建议。

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

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

这个新函数的用法如下所示：

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

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

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

于 2014-04-07T21:45:38.823 回答