jQuery UI API - .position()

Категория

Переопределения методов | Методы | Утилиты

Использование

Описание:Расположить элемент относительно другого элемента.

Возвращает:jQuery

Добавлено в версии:1.8

.position( options )

Parameters Type Описание
options Object
  • my(По умолчанию:"center"）
    Тип: String
    Описание: Определяетдля позиционируемого элементапозицию для выравнивания с целевым элементом: выравнивание "горизонталь вертикаль". Одиночное значение, такое как "right", будет нормализовано в "right center", а "top" — в "center top" (соглашения CSS ниже). Допустимые горизонтальные значения: "left", "center", "right". Допустимые вертикальные значения: "top", "center", "bottom". Например, "left top" или "center center". Каждое измерение также может содержать смещения в пикселях или процентах, например "right+10 top-25%". Процентные смещения отсчитываются относительно позиционируемого элемента.
  • at(По умолчанию:"center"）
    Тип: String
    Описание: Определяетна целевом элементепозицию, с которой выравнивается позиционируемый элемент: выравнивание "горизонталь вертикаль". Подробнее см. возможные значения в опции my. Процентные смещения отсчитываются относительно целевого элемента.
  • of(По умолчанию:null）
    Тип: Selector или Element или jQuery или Event
    Описание: Элемент для позиционирования. Если вы передаёте Selector или объект jQuery, будет использован первый подходящий элемент. Если вы передаёте объект Event, будут использованы свойства pageX и pageY, например "#top-menu".
  • collision(По умолчанию:"flip"）
    Тип: String
    Описание: Когда позиционируемый элемент выходит за пределы окна в каком-либо направлении, переместите его в альтернативное положение. Подобно опциям my и at, эта опция принимает одно значение или пару горизонтального/вертикального значений. Например: "flip", "fit", "fit flip", "fit none".
    • "flip": Переворачивает элемент на противоположную сторону от цели и снова запускает проверку коллизий, чтобы проверить, помещается ли элемент. Будет использована та сторона, на которой видно больше элемента.
    • "fit": Сдвигает элемент от края окна.
    • "flipfit": Сначала примените логику flip, разместив элемент с той стороны, где большая часть элемента будет видна. Затем примените логику fit, обеспечив максимально возможную видимость элемента.
    • "none": Не применять обнаружение коллизий.
  • using(По умолчанию:null）
    Тип: Function()
    Описание: Когда этот параметр указан, фактическая установка свойств делегируется этому колбэку. Он принимает два аргумента: первый — хеш значений позиции top и left, который можно передать в .css() или .animate(); второй предоставляет информацию о позиции и размерах обоих элементов, а также вычисляет их относительные позиции. И target, и element имеют следующие свойства: element, left, top, width, height. Кроме того, есть horizontal, vertical и important, задающие двенадцать возможных направлений, например { horizontal: "center", vertical: "left", important: "horizontal" }.
  • within(По умолчанию:window）
    Тип: Selector, Element или jQuery
    Описание: Элемент, внутри которого нужно позиционировать, что влияет на обнаружение коллизий. Если вы передадите Selector или объект jQuery, будет использован первый подходящий элемент.

jQuery UI .position()Метод позволяет позиционировать элемент относительно окна, документа, другого элемента или курсора/мыши, без учёта смещения относительно родительского элемента.

Примечание: jQuery UI не поддерживает позиционирование скрытых элементов.

Это автономный плагин jQuery, не имеющий зависимостей от других компонентов jQuery UI.

Этот плагин расширяет встроенный метод.position()jQuery. Если jQuery UI не загружен, вызов.position()метод не завершится ошибкой напрямую, потому что метод существует в jQuery. Однако ожидаемое поведение не произойдет.

Примеры

Простой пример использования jQuery UI Position.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>.position() 实例</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  .positionDiv {
    position: absolute;
    width: 75px;
    height: 75px;
    background: green;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<div id="targetElement">
  <div class="positionDiv" id="position1"></div>
  <div class="positionDiv" id="position2"></div>
  <div class="positionDiv" id="position3"></div>
  <div class="positionDiv" id="position4"></div>
</div>
 
<script>
$( "#position1" ).position({
  my: "center",
  at: "center",
  of: "#targetElement"
});
 
$( "#position2" ).position({
  my: "left top",
  at: "left top",
  of: "#targetElement"
});
 
$( "#position3" ).position({
  my: "right center",
  at: "right bottom",
  of: "#targetElement"
});
 
$( document ).mousemove(function( event ) {
  $( "#position4" ).position({
    my: "left+3 bottom-3",
    of: event,
    collision: "fit"
  });
});
</script>
 
</body>
</html>

Другие расширения