Динамически позиционирующие элементы с использованием jQuery

Question

Я работаю с панелью меню, каждый элемент меню является изображением, когда пользователь накладывает мышью на пункт меню, появится подменю div.

Я хочу разместить div непосредственно под соответствующим элементом изображения (без пробелов и div будет навис над всеми элементами) с выравниванием правой стороны, то есть правый верхний угол div должен находиться под нижним правым углом изображения.

Потому что я не могу и не хочу жестко кодировать положение divs, я хочу сделать это динамически.

Теперь у меня есть это:

$('img').each(function(){      
    jQuery(this).mouseenter(function(){ 
    var menuItem = $('#' + this.id + '_menu'); //get the needed div 
    var imgRight = this.offset() + this.width(); 


    }); 
}); 

Answer 1

Метод offset() имеет top и left свойства, то нужно использовать их, например:

var imgRight = this.offset().left + this.width(); 
var imgTop = this.offset().top + this.height(); 

После этого, вам придется дать absolute позиционирование в DIVs, чтобы разместить их под изображениями:

menuItem.css({ 
    position:'absolute', 
    top: imgTop, 
    left: imgLeft, 
    zIndex:5000 
}); 

Так что ваш код становится:

$('img').each(function(){      
    jQuery(this).mouseenter(function(){ 

    var menuItem = $('#' + this.id + '_menu'); //get the needed div 
    var imgRight = this.offset().left + this.width(); 
    var imgTop = this.offset().top + this.height(); 

    menuItem.css({ 
     position:'absolute', 
     top: imgTop, 
     left: imgLeft, 
     zIndex:5000 
    }); 

    // now show the corresponding div 
    menuItem.show('slow'); 

    }); 
}); 

Дополнительная информация:

http://api.jquery.com/offset/

Answer 2

Вы не должны жестко закодировать или вычислить положение этих элементов. Любой из следующих правил CSS должен достичь вашей цели: position: relative; right: 0 или float: right:.

Было бы неплохо увидеть некоторые из ваших разметки для дополнительного тестирования. www.jsfiddle.net - отличный ресурс для этого.

Answer 3

Есть 2 способа сделать это: правильный путь или способ обмана ... Правильный способ: вам нужно получить верхнюю и клиентскую высоту действующего объекта - высота клиента не может просто вызвать его - но сверху означает, что вы должны получить на все родительские объекты тоже - использовать это:

function J_pos(o) 
{ 
    var x,y; 
    y=o.offsetTop; 
    x=o.offsetLeft; 
    o=o.offsetParent; 
    while(o) 
    { 
     y+=o.offsetTop; 
     x+=o.offsetLeft; 
     o=o.offsetParent; 
    } 
    return [x,y]; 
}; 

Теперь верхнюю и клиент высоту вы делаете это:

<div style=top:"+(p[0]+obj.clientHeight)+";left:"+p[1]> 

чит-путь (не так динамический - но быстрый): положить тег как <span> вокруг объекта управления (mouseover). Сделайте его позиционным. Разместить запрос <div> внутри него:

<div id="ABC" style="position:absolute;left:0;display:none"> 

Теперь при наведении курсора мыши поместить document.getElementById("ABC").style.display="" и bottom:0 - бэби-бум посыпанный. Недостатком этого является то, что вы должны вручную сделать это для каждого экземпляра, но если у вас есть только 3 или около того хорошо лото.