JqueryUI — Должность

В этой главе мы увидим один из служебных методов jqueryUi, метод position () . Метод position () позволяет вам позиционировать элемент относительно другого элемента или события мыши.

Пользовательский интерфейс jQuery расширяет метод .position () из ядра jQuery таким образом, чтобы вы могли описать, как вы хотите расположить элемент так же, как вы бы естественным образом описали его для другого человека. Вместо того, чтобы работать с числами и математикой, вы работаете со значимыми словами (такими как левый и правый) и отношениями.

Синтаксис

Ниже приведен синтаксис метода position () —

.position( options )

Где options имеет тип Object и предоставляет информацию, которая определяет, как должны быть расположены элементы упакованного набора. В следующей таблице перечислены различные параметры, которые можно использовать с этим методом —

top, or bottom right.

"right", or "left center"

#top-menu

"flip", "fit", "fit flip", "fit none"

{horizontal: "center", vertical: "left", important: "horizontal" }

Этот параметр указывает местоположение обернутых элементов (перемещаемых элементов) для выравнивания с целевым элементом или местоположением. По умолчанию его значение равно центру .

Вариант — мой

Этот параметр указывает местоположение обернутых элементов (перемещаемых элементов) для выравнивания с целевым элементом или местоположением. По умолчанию его значение равно центру .

Два из этих значений используются для указания местоположения: сверху, слева, снизу, справа и по центру , разделенных пробелом, где первое значение является горизонтальным значением, а второе — вертикальным . То, считается ли указанное отдельное значение горизонтальным или вертикальным, зависит от того, какое значение вы используете (например, верхняя часть берется как вертикальная, а правая — горизонтальная).

пример

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

Вариант — при

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

пример

Это имеет тип Selector или Element или jQuery или Event. Он идентифицирует целевой элемент, относительно которого обернутые элементы должны быть переставлены, или экземпляр Event, содержащий координаты мыши, чтобы использовать в качестве целевого местоположения. По умолчанию его значение равно нулю .

Вариант — из

Это имеет тип Selector или Element или jQuery или Event. Он идентифицирует целевой элемент, относительно которого обернутые элементы должны быть переставлены, или экземпляр Event, содержащий координаты мыши, чтобы использовать в качестве целевого местоположения. По умолчанию его значение равно нулю .

пример

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

Вариант — столкновение

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

Принимает два (горизонтальное и вертикальное) следующего:

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

fit — удерживает элемент в нужном направлении, но регулирует положение так, чтобы он подходил.

flipfit — сначала применяет логику отражения, размещая элемент на той стороне, которая позволяет видеть больше элемента. Затем применяется логика подбора, чтобы убедиться, что элемент виден как можно больше.

none — отключение обнаружения столкновений.

Если указано одно значение, оно применяется к обоим направлениям.

пример

Эта опция является функцией, которая заменяет внутреннюю функцию, которая изменяет положение элемента. Вызывается для каждого обернутого элемента с единственным аргументом, который состоит из хэша объекта со свойствами left и top, установленными в вычисленную целевую позицию, и элемента, установленного в качестве контекста функции. По умолчанию его значение равно нулю .

Вариант — использование

Эта опция является функцией, которая заменяет внутреннюю функцию, которая изменяет положение элемента. Вызывается для каждого обернутого элемента с единственным аргументом, который состоит из хэша объекта со свойствами left и top, установленными в вычисленную целевую позицию, и элемента, установленного в качестве контекста функции. По умолчанию его значение равно нулю .

пример

Эта опция является элементом Selector, Element или jQuery и позволяет вам указать, какой элемент использовать в качестве ограничительной рамки для обнаружения столкновений. Это может пригодиться, если вам нужно разместить позиционированный элемент в определенном разделе вашей страницы. По умолчанию его значением является окно .

Вариант — в пределах

Эта опция является элементом Selector, Element или jQuery и позволяет вам указать, какой элемент использовать в качестве ограничительной рамки для обнаружения столкновений. Это может пригодиться, если вам нужно разместить позиционированный элемент в определенном разделе вашей страницы. По умолчанию его значением является окно .

пример

В следующем примере демонстрируется использование метода position .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI position method Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .positionDiv {
            position: absolute;
            width: 75px;
            height: 75px;
            background: #b9cd6d;
         }
         #targetElement {
            width: 300px;
            height: 500px;
            padding-top:50px;
         }
      </style>
      
      <script>
         $(function() {
            // Position the dialog offscreen to the left, but centered vertically
            $( "#position1" ).position({
               my: "center",
               at: "center",
               of: "#targetElement"
            });
            $( "#position2" ).position({
               my: "left top",
               at: "left top",
               of: "#targetElement"
            });
            $( "#position3" ).position({
               my: "right-10 top+10",
               at: "right top",
               of: "#targetElement"
            });
            $( document ).mousemove(function( event ) {
               $( "#position4" ).position({
                  my: "left+3 bottom-3",
                  of: event,
                  collision: "fit"
               });
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "targetElement">
         <div class = "positionDiv" id = "position1">Box 1</div>
         <div class = "positionDiv" id = "position2">Box 2</div>
         <div class = "positionDiv" id = "position3">Box 3</div>
         <div class = "positionDiv" id = "position4">Box 4</div>
      </div>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле positionmethodexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

В этом примере мы видим, что —

Поле 1 выровнено по центру (по горизонтали и вертикали) элемента div.

Блок 2 выровнен по левому верху (по горизонтали и вертикали) элемента div.

Поле 3 отображается в верхнем правом углу окна, но оставьте некоторые отступы, чтобы сообщение выделялось больше. Это делается с использованием горизонтальных и вертикальных значений my или at .

Для поля 4 значение в качестве объекта события. Это событие связано с указателем и перемещается вместе с событием мыши.