好的,这是我的问题。 使用jQuery UI位置。可以将元素相对于屏幕上的另一元素定位。它在要定位的元素上设置左侧和顶部css属性,将其定位在屏幕上。
我想要做的不是设置左侧和顶部,而是想要设置右侧和底部,这样如果定位元素增大或缩小,它将以正确的方向增长/缩小。
让我详细说明一下。
好吧,我想要的是如果一个元素位于它的右侧,那么我想设置right
css属性而不是left
,如果一个元素位于其底部,那么我想要设置bottom
而不是top
。我可以使用jQuery UI Position的using
属性来做到这一点,但我遇到了碰撞检测的问题。如果碰撞检测设置为flip
并且元素被翻转,我想检测到这一点,并确定是否需要设置right
而不是left
和bottom
而不是top
。查看下面的代码,以便更好地了解我正在尝试做的事情。
$('#somediv').position({
my: 'right bottom',
at: 'right top',
of: $('#someotherdiv'),
offset: '0 5',
collision: 'flip flip',
using: function(pos) {
// Figure out the right and bottom css properties
var right = $(window).width() - pos.left - $(this).outerWidth(true);
var bottom = $(window).height() - pos.top - $(this).outerHeight(true);
// Position the element so that right and bottom are set.
$(this).css({left: '', right: right, top: '', bottom: bottom});
}
});
除非div从碰撞检测中翻转,否则效果很好。如果它被水平翻转,我想设置left
而不是right
,如果它被垂直翻转,我想设置top
而不是bottom
。
理想的解决方案是,如果有一种方法可以告诉(在using
函数中)元素是否被翻转以及在什么方向上。那么,任何人都有任何想法来弄清楚是否使用碰撞检测翻转了一个元素?
答案 0 :(得分:3)
好的,想通了......这是我试图解释我是如何工作的。
你需要做的是在using
函数中再次调用position。无碰撞检测一次调用一次,碰撞检测一次。如果位置发生变化,则会翻转。以下是一些带注释的示例代码。
$('#somediv').position({
my: 'right bottom',
at: 'right top',
of: $('#someotherdiv'),
offset: '0 5',
collision: 'flip flip',
using: function (pos1) {
// OK, we got a position once inside the pos1 variable,
// let's position it again this time without collision detection.
$(this).position({
my: 'right bottom',
at: 'right top',
of: $('#someotherdiv'),
offset: '0 5',
collision: 'none none',
using: function(pos2) {
var hpos = 'right';
var vpos = 'bottom';
// Check to see if it was flipped horizontal
if (pos1.left != pos2.left) {
/* It was flipped horizontally so position is now
my: 'left bottom',
at: 'left top'
*/
hpos = 'left';
}
// Check to see if it was flipped vertical
if (pos1.top != pos2.top) {
/* It was flipped vertically */
vpos = 'top';
}
// Figure out the right and bottom css properties
var right = $(window).width() - pos1.left - $(this).outerWidth(true);
var bottom = $(window).height() - pos1.top - $(this).outerHeight(true);
// Set the horizontal position
if (hpos == 'right') {
$(this).css({left: '', right: right});
} else {
$(this).css({left: pos1.left, right: ''});
}
// Set the vertical position
if (vpos == 'bottom') {
$(this).css({top: '', bottom: bottom});
} else {
$(this).css({top: pos1.top, bottom: ''});
}
}
});
}
});
如果有人有更高效的想法,请告诉我。感谢。