Использование функции положения Jquery - PullRequest
Новая
       14

Использование функции положения Jquery

1 голос
/ 07 апреля 2009

Я работаю над тем, что в основном создаст визитную карточку онлайн.

Я пытаюсь выложить теги div с помощью CSS. Затем я хочу получить координаты x и y тегов div относительно их контейнера, чтобы они могли быть переданы в библиотеку PHP GD для создания изображения.

Я пытался использовать функцию .position() в jquery, но она давала относительную позицию.

У кого-нибудь есть указатели, которые могут помочь?

Ответы [ 2 ]

4 голосов
/ 07 апреля 2009

Проверьте плагин jQuery size , чтобы найти правильное положение элемента.

EDIT: Как уже упоминалось в комментариях, плагин размеров был объединен с ядром. Документацию можно найти здесь: смещение и здесь позиция .

Связанный пример может быть расширен следующим образом: замените следующий код 

var x = $("#Company_Name").position().left;
var y = $("#Company_Name").position().top;

$("p:last").text( "Full Name: left: " + x + ", top: " + y );

с этим: 

var $companyname = $("#Company_Name");
var x = $companyname.position().left;
var y = $companyname.position().top;
var ax = $companyname.offset().left;
var ay = $companyname.offset().top;

$("p:last").text( "Full Name: left: " + x + "/" + ax + ", top: " + y + "/" + ay);

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

EDIT2: Я просто понял, что это не работает, как я ожидал. Я написал некоторую функцию для вычисления относительной позиции: 

function toString(obj){
        return "{top: " + obj.top + " left: " + obj.left + "}";
    }

    function getRelativePosition(selector){

        var $parentElem = $("#parentElem");
        var $element = $(selector);

        var elementPosition = $element.position();
        var parentPosition = $parentElem.position();

        return {top: elementPosition.top - parentPosition.top, 
            left: elementPosition.left - parentPosition.left};
    }

  $(document).ready(function(){

        var position = $("#Company_Name").position();
        var relativePosition = getRelativePosition("#Company_Name");

        $("p:last").text("position: " + toString(position) + " relativePosition: " + toString(relativePosition));
    });

Дайте мне знать, если это работает для вас. И кто-то может сказать мне, в чем разница между положением и смещением в jQuery: - \

EDIT3: Чтобы получить положение более чем одного элемента, вы можете вызывать функции с разными идентификаторами или давать им одно и то же имя или один и тот же класс, чтобы можно было выбрать их все. Вот рабочий пример: 

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

function toString(obj){
    return "{top: " + obj.top + " left: " + obj.left + "}";
}

function getRelativePosition(selector){

    var $parentElem = $("#parentElem");
    var $element = $(selector);

    var elementPosition = $element.position();
    var parentPosition = $parentElem.position();

    return {top: elementPosition.top - parentPosition.top, 
        left: elementPosition.left - parentPosition.left};
}

$(document).ready(function(){

$(".cardfield").each(function(i){

    var position = $(this).position();
    var relativePosition = getRelativePosition(this);

    $("p:last").append("element: " + this.id + " position: " + toString(position) + " relativePosition: " + toString(relativePosition) + "<br>");

});
});

</script>
</head>
<body>

<br><br><br><br><br>

<div id="parentElem" style="margin: 0px; top:10px; background-color: #ddd;">
<br><br>
<div class="cardfield" id="Company_Name1">Foo Bar</div>
<br>
<div class="cardfield" id="Company_Name2">Company Name</div>
<div class="cardfield" id="firstname" style="float: right;">Tim</div><br/>
<div class="cardfield" id="lastname" style="float: right;">B&uuml;the</div>
<br><br>
</div>

</p></p>
</body>
</html>

Примечание: я дал всем полям класс "cardfield" и использовал jQuery для их выбора. Затем я использовал функцию каждый для работы с элементами. Внутри функции, которую я дал каждому, «this» относится к текущему объекту.

0 голосов
/ 30 ноября 2012

Для идеального положения элемента с абсолютом 

var position = window.jQuery(this).position();

var parent_pos = window.jQuery(this).parent().position();

var xpos = position.top - parent_pos.top;
var ypos = position.left - parent_pos.left;

если вы полностью указали имя или идентификатор родительского элемента div, вы можете написать следующее: 

var parent_pos = window.jQuery(this).parent('#cardcreate').position();

это прекрасно работает для него.

...