Может ли jQuery копировать границы элемента (положение, размер, поля и т. д.) в другой элемент?

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

Например, я мог бы начать с <select> определенного размера, возможно, в зависимости от его содержимого, т. е. авто ширина/высота. Я хочу создать новый <div>, который появляется в той же позиции и имеет тот же размер.

Я пробовал копировать элемент float, clear, position, width, height, margins и padding, но это немного громоздко. Кроме того, хотя это работает в Firefox, я сталкиваюсь с некоторыми странными проблемами при тестировании на Webkit. Прежде чем я потрачу гораздо больше времени на выяснение этого, я хотел бы знать, есть ли какая-то функциональность jQuery или пользовательского интерфейса jQuery, которая уже заботится о том, что я хочу делать.

Я понимаю, что этот вопрос похож на существующий, но мой имеет важное отличие в том, что ему нужно работать с элементами разных типов, что исключает clone в качестве решения.


javascript html jquery bounds jquery-ui
person DNS    schedule 06.10.2010    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Это НЕ эффективно, не проверено и не завершено. И это, вероятно, похоже на то, что вы уже делаете. Но я все же решил опубликовать это:

var positioningProps = ["float","position","width","height","left","top","marginLeft","marginTop","paddingLeft","paddingTop"];
var select = $("#mySelect");
var div = $("<div>").hide().before(select);
// don't do this kind of loop in production code
// http://www.vervestudios.co/jsbench/
for(var i in positioningProps){
    div.css(positioningProps[i], select.css(positioningProps[i])||"");
}
select.hide();
person David Murdoch    schedule 06.10.2010

arrow_upward
3
arrow_downward

Как насчет того, чтобы просто скопировать смещение элемента и абсолютно расположить его на странице?

Скажем, у вас есть элемент ввода где-то на странице с размерами 100x25px.

<input type="text" id="firstname" style="width: 100px; height: 20px" />

И вы хотели поместить div прямо поверх него (и скрыть ввод).

// Store the input in a variable
var $firstname = $("#firstname");

// Create a new div and assign the width/height/top/left properties of the input
var $newdiv = $("<div />").css({
    'width': $firstname.width(),
    'height': $firstname.height(),
    'position': 'absolute',
    'top': $firstname.offset().top,
    'left': $firstname.offset().left
});

// Add the div to the body
$(body).append($newdiv);
person Marko    schedule 06.10.2010
comment
Этот подход имеет проблемы с плавными макетами. Если элемент вставляется перед #firstName, который перемещает firstName вниз, страница newdiv не выстроится должным образом. - person David Murdoch; 06.10.2010
comment
Вероятно, это правда, в ситуациях с жидкой компоновкой требуется другое решение. - person Marko; 06.10.2010

arrow_upward
1
arrow_downward

Вы можете узнать границы элементов, используя этот плагин для jQuery. Было бы просто установить любые интересующие вас свойства для другого объекта.

http://code.google.com/p/jquery-ui/source/browse/branches/labs/powella/coverslide/res/js/jquery/jquery.bounds.js?r=2698

/*
 * jQuery.bounds
 * author: Andrew Powell
*/

(function($){

        $.fn['bounds'] = function() 
        {
                var t = this, e = t[0];
                if (!e) return;

                var offset = t.offset(), pos = { width:e.offsetWidth, height:e.offsetHeight, left: 0, top: 0, right: 0, bottom: 0, x: 0, y: 0 };

                pos.left = offset.left; 
                pos.top = offset.top;

                //right and bottom
                pos.right = (pos.left + pos.width);
                pos.bottom = (pos.top + pos.height);
                pos.x = pos.left;
                pos.y = pos.top;
                pos.inner = {width: t.width(), height: t.height()};

                $.extend(pos, {toString: function(){ var t = this; return 'x: ' + t.x + ' y: ' + t.y + ' width: ' + t.width + ' height: ' + t.height + ' right: ' + t.right + ' bottom: ' + t.bottom; }});

                return pos;
        };

})(jQuery);
person superlogical    schedule 10.02.2012
comment
Это не работает, если установлено левое/верхнее поле или левое/верхнее заполнение. pos.left больше не является offset.left. Ограниченный прямоугольник будет смещен вправо на величину поля/границы/отступа. - person chubbsondubs; 29.02.2012