JqueryUI - Позиция

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

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

Синтаксис

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

.position( options )

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

Sr.No.	Вариант и описание
1	мой Этот параметр указывает расположение обернутых элементов (тех, которые перемещаются) для выравнивания с целевым элементом или местоположением. По умолчанию его значениеcenter. Option - my Этот параметр указывает расположение обернутых элементов (тех, которые перемещаются) для выравнивания с целевым элементом или местоположением. По умолчанию его значениеcenter. Два из этих значений используются для указания местоположения: сверху, слева, снизу, справа и по центру , разделенных пробелом, где первое значение - этоhorizontal значение, а второй - vertical. Считается ли указанное единственное значениеhorizontal или же verticalзависит от того, какое значение вы используете (например, верхний край считается вертикальным, а правый - горизонтальным). Example `top, or bottom right.`
2	в Этот параметр имеет тип String и указывает расположение целевого элемента, относительно которого необходимо выровнять перемещенные элементы. Принимает те же значения, что и моя опция. По умолчанию его значениеcenter. Option - at Этот параметр имеет тип String и указывает расположение целевого элемента, относительно которого необходимо выровнять перемещенные элементы. Принимает те же значения, что и моя опция. По умолчанию его значениеcenter. Example `"right", or "left center"`
3	из Это тип Selector, Element, jQuery или Event. Он определяет целевой элемент, относительно которого должны быть перемещены обернутые элементы, или экземпляр события, содержащий координаты мыши, для использования в качестве целевого местоположения. По умолчанию его значениеnull. Option - of Это тип Selector, Element, jQuery или Event. Он определяет целевой элемент, относительно которого должны быть перемещены обернутые элементы, или экземпляр события, содержащий координаты мыши, для использования в качестве целевого местоположения. По умолчанию его значениеnull. Example `#top-menu`
4	столкновение Эта опция имеет тип String и определяет правила, которые должны применяться, когда позиционируемый элемент выходит за пределы окна в любом направлении. По умолчанию его значениеflip. Option - collision Эта опция имеет тип String и определяет правила, которые должны применяться, когда позиционируемый элемент выходит за пределы окна в любом направлении. По умолчанию его значениеflip. Принимает два (по горизонтали, а затем по вертикали) из следующих: flip- Переворачивает элемент на противоположную сторону и снова запускает обнаружение столкновений для подгонки. Если ни одна из сторон не подходит, центр используется как запасной вариант. fit - Сохраняет элемент в желаемом направлении, но регулирует положение так, чтобы оно соответствовало. flipfit- Сначала применяется логика переворота, размещая элемент с той стороны, которая позволяет большей части элемента быть видимой. Затем применяется логика подбора, чтобы обеспечить видимость как можно большей части элемента. none - Отключает обнаружение столкновений. Если указано одно значение, оно применяется к обоим направлениям. Example `"flip", "fit", "fit flip", "fit none"`
5	с помощью Эта опция - функция, заменяющая внутреннюю функцию, изменяющую положение элемента. Вызывается для каждого обернутого элемента с одним аргументом, который состоит из хэша объекта с левым и верхним свойствами, установленными на вычисленную целевую позицию, и элементом, установленным как контекст функции. По умолчанию его значениеnull. Option - using Эта опция - функция, заменяющая внутреннюю функцию, изменяющую положение элемента. Вызывается для каждого обернутого элемента с одним аргументом, который состоит из хэша объекта с левым и верхним свойствами, установленными на вычисленную целевую позицию, и элементом, установленным как контекст функции. По умолчанию его значениеnull. Example `{horizontal: "center", vertical: "left", important: "horizontal" }`
6	в пределах Этот параметр является элементом «Селектор», «Элемент» или «jQuery» и позволяет указать, какой элемент использовать в качестве ограничивающей рамки для обнаружения столкновений. Это может пригодиться, если вам нужно разместить позиционированный элемент в определенном разделе вашей страницы. По умолчанию его значениеwindow. Option - within Этот параметр является элементом «Селектор», «Элемент» или «jQuery» и позволяет указать, какой элемент использовать в качестве ограничивающей рамки для обнаружения столкновений. Это может пригодиться, если вам нужно разместить позиционированный элемент в определенном разделе вашей страницы. По умолчанию его значениеwindow.

пример

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

<!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 , то из значения устанавливаются в качестве объекта события. Это событие связано с указателем и перемещается вместе с событием мыши.