Как расположить один элемент относительно другого с помощью jQuery?
У меня есть скрытый div, который содержит панель меню.
У меня есть несколько DIVs, которые включены, чтобы показать меню DIV, когда мышь парит над ними.
есть ли встроенная функция, которая будет перемещать меню DIV в правом верхнем углу активного (наведение мыши) DIV? Я ищу что-то вроде $(menu).position("topright", targetEl);
8 ответов
теперь вы можете использовать:
$("#my_div").position({
my: "left top",
at: "left bottom",
of: this, // or $("#otherdiv")
collision: "fit"
});
быстрое позиционирование (jQuery UI / позиция).
Примечание: для этого требуется jQuery UI (не только jQuery).
вы можете скачать jQuery UI здесь.
tl; dr: (попробуй здесь)
если у вас есть следующий HTML-код:
<div id="menu" style="display: none;">
<!-- menu stuff in here -->
<ul><li>Menu item</li></ul>
</div>
<div class="parent">Hover over me to show the menu here</div>
затем вы можете использовать следующий код JavaScript:
$(".parent").mouseover(function() {
// .position() uses position relative to the offset parent,
var pos = $(this).position();
// .outerWidth() takes into account border and padding.
var width = $(this).outerWidth();
//show the menu directly over the placeholder
$("#menu").css({
position: "absolute",
top: pos.top + "px",
left: (pos.left + width) + "px"
}).show();
});
но это не работает!
это будет работать до тех пор, пока меню и заполнитель имеют один и тот же смещенный родитель. Если они этого не делают, и у вас нет вложенных правил CSS, которые заботятся о том, где в DOM #menu
элемент, использовать:
$(this).append($("#menu"));
непосредственно перед линией, которая позиционирует #menu
элемент.
но это все еще не работает!
у вас может быть какой-то странный макет, который не работает с этим подходом. В этом случае, просто используйте С помощью jQuery.плагин позиции пользовательского интерфейса (как указано в ответ ниже), который обрабатывает все возможные ситуации. Обратите внимание, что вам придется show()
элемент меню перед вызовом position({...})
; в плагин не может размещать скрытые элементы.
обновление заметки 3 года спустя в 2012 году:
(исходное решение архивируется здесь для потомков)
Итак, оказывается, что первоначальный метод, который я имел здесь, был далек от идеала. В частности, он потерпел бы неудачу, если:
- меню смещение родитель не заполнитель смещение родитель
- заполнитель имеет граница / обивка
к счастью, jQuery ввел методы (position()
и outerWidth()
) путь назад в 1.2.6, что делает поиск правильных значений в последнем случае здесь намного проще. В первом случае append
ing элемент меню в заполнитель работает (но нарушит правила CSS, основанные на вложенности).
Это то, что работал для меня в конце.
var showMenu = function(el, menu) {
//get the position of the placeholder element
var pos = $(el).offset();
var eWidth = $(el).outerWidth();
var mWidth = $(menu).outerWidth();
var left = (pos.left + eWidth - mWidth) + "px";
var top = 3+pos.top + "px";
//show the menu directly over the placeholder
$(menu).css( {
position: 'absolute',
zIndex: 5000,
left: left,
top: top
} );
$(menu).hide().fadeIn();
};
вот функция jQuery, которую я написал, которая помогает мне позиционировать элементы.
пример использования:
$(document).ready(function() {
$('#el1').position('#el2', {
anchor: ['br', 'tr'],
offset: [-5, 5]
});
});
приведенный выше код выравнивает нижний правый #el1 с верхним правым #el2. ['cc',' cc'] будет центрировать #el1 в #el2. Убедитесь, что #el1 имеет css position: absolute и z-index: 10000 (или какое-то действительно большое число), чтобы сохранить его сверху.
опция смещения позволяет сдвинуть координаты на заданное число пикселы.
исходный код ниже:
jQuery.fn.getBox = function() {
return {
left: $(this).offset().left,
top: $(this).offset().top,
width: $(this).outerWidth(),
height: $(this).outerHeight()
};
}
jQuery.fn.position = function(target, options) {
var anchorOffsets = {t: 0, l: 0, c: 0.5, b: 1, r: 1};
var defaults = {
anchor: ['tl', 'tl'],
animate: false,
offset: [0, 0]
};
options = $.extend(defaults, options);
var targetBox = $(target).getBox();
var sourceBox = $(this).getBox();
//origin is at the top-left of the target element
var left = targetBox.left;
var top = targetBox.top;
//alignment with respect to source
top -= anchorOffsets[options.anchor[0].charAt(0)] * sourceBox.height;
left -= anchorOffsets[options.anchor[0].charAt(1)] * sourceBox.width;
//alignment with respect to target
top += anchorOffsets[options.anchor[1].charAt(0)] * targetBox.height;
left += anchorOffsets[options.anchor[1].charAt(1)] * targetBox.width;
//add offset to final coordinates
left += options.offset[0];
top += options.offset[1];
$(this).css({
left: left + 'px',
top: top + 'px'
});
}
почему усложнять слишком много? Решение очень простое
css:
.active-div{
position:relative;
}
.menu-div{
position:absolute;
top:0;
right:0;
display:none;
}
jquery:
$(function(){
$(".active-div").hover(function(){
$(".menu-div").prependTo(".active-div").show();
},function(){$(".menu-div").hide();
})
это работает, даже если
- два divs размещены в другом месте
- браузер повторно размера
вы можете использовать плагин jQuery PositionCalculator
этот плагин также включил обработку столкновений (флип), поэтому меню, подобное панели инструментов, можно поместить в видимое положение.
$(".placeholder").on('mouseover', function() {
var $menu = $("#menu").show();// result for hidden element would be incorrect
var pos = $.PositionCalculator( {
target: this,
targetAt: "top right",
item: $menu,
itemAt: "top left",
flip: "both"
}).calculate();
$menu.css({
top: parseInt($menu.css('top')) + pos.moveBy.y + "px",
left: parseInt($menu.css('left')) + pos.moveBy.x + "px"
});
});
для разметки:
<ul class="popup" id="menu">
<li>Menu item</li>
<li>Menu item</li>
<li>Menu item</li>
</ul>
<div class="placeholder">placeholder 1</div>
<div class="placeholder">placeholder 2</div>
вот скрипка:http://jsfiddle.net/QrrpB/1657/
что-то вроде этого?
$(menu).css("top", targetE1.y + "px");
$(menu).css("left", targetE1.x - widthOfMenu + "px");
это работает для меня:
var posPersonTooltip = function(event) {
var tPosX = event.pageX - 5;
var tPosY = event.pageY + 10;
$('#personTooltipContainer').css({top: tPosY, left: tPosX});