Position :: Позиционирование
Описание: Позиционирует элемент относительно другого элемента.Description: Position an element relative to another.
Пример странички Позиционирование Дефолтное (по умолчанию, Default functionality):
можно посмотреть здесь.
Пример странички Позиционирование, Цикл картинок (Cycling images):
можно посмотреть здесь.
Теория
Тесты по теории можно посмотреть здесь.
.position( options )
Type:
Default:
Returns: jQuery
version added: 1.8
Position an element relative to another.
• .position( options )
◦ options
Type: Object
my (default: "center")
Type: String
Defines which position on the element being positioned to align with the target element: "horizontal vertical" alignment. A single value such as "right" will be normalized to "right center", "top" will be normalized to "center top" (following CSS convention). Acceptable horizontal values: "left", "center", "right". Acceptable vertical values: "top", "center", "bottom". Example: "left top" or "center center". Each dimension can also contain offsets, in pixels or percent, e.g., "right+10 top-25%". Percentage offsets are relative to the element being positioned.
at (default: "center")
Type: String
Defines which position on the target element to align the positioned element against: "horizontal vertical" alignment. See the my option for full details on possible values. Perecentage offsets are relative to the target element.
of (default: null)
Type: Selector or Element or jQuery or Event
Which element to position against. If you provide a selector or jQuery object, the first matching element will be used. If you provide an event object, the pageX and pageY properties will be used. Example: "#top-menu"
collision (default: "flip")
Type: String
When the positioned element overflows the window in some direction, move it to an alternative position. Similar to my and at, this accepts a single value or a pair for horizontal/vertical, e.g., "flip", "fit", "fit flip", "fit none".
◾ "flip": Flips the element to the opposite side of the target and the collision detection is run again to see if it will fit. Whichever side allows more of the element to be visible will be used.
◾ "fit": Shift the element away from the edge of the window.
◾ "flipfit": First applies the flip logic, placing the element on whichever side allows more of the element to be visible. Then the fit logic is applied to ensure as much of the element is visible as possible.
◾ "none": Does not apply any collision detection.
using (default: null)
Type: Function()
When specified, the actual property setting is delegated to this callback. Receives two parameters: The first is a hash of top and left values for the position that should be set and can be forwarded to .css() or .animate().
The second provides feedback about the position and dimensions of both elements, as well as calculations to their relative position. Both target and element have these properties: element, left, top, width, height. In addition, there's horizontal, vertical and important, giving you twelve potential directions like { horizontal: "center", vertical: "left", important: "horizontal" }.
within (default: window)
Type: Selector or Element or jQuery
Element to position within, affecting collision detection. If you provide a selector or jQuery object, the first matching element will be used.
Позиционирует элемент относительно другого элемента.
• .position( options )
◦ options
Type: Object (Объект)
my (default: "center") (мой элемент)
Type: String
Defines which position on the element being positioned to align with the target element: "horizontal vertical" alignment. A single value such as "right" will be normalized to "right center", "top" will be normalized to "center top" (following CSS convention). Acceptable horizontal values: "left", "center", "right". Acceptable vertical values: "top", "center", "bottom". Example: "left top" or "center center". Each dimension can also contain offsets, in pixels or percent, e.g., "right+10 top-25%". Percentage offsets are relative to the element being positioned. Определяет, какая позиция в позицируемом элементе будет использована для выравнивания с элементом-целью: "horizontal vertical" (горизонтальное вертикальное) выравнивание. Простое значение, такое, как, например "right" (право) будет нормализовано на значение "right center" (право центр), "top" (верх) будет нормализовано на значение "center top" (центр верх) (следуя нормам CSS). Принимаются горизонтальные значения: "left" (лево), "center" (центр), "right" (право). Принимаются вертикальные значения: : "top" (верх), "center" (центр), "bottom" низ). Пример: "left top" (лево верх) или "center center" (центр центр). Каждая размерность может также содержать смещение в пикселях или процентах, например: "right+10 top-25%". Смещения в процентах рассчитываются относительно позиционируемого элемента.
at (default: "center") (на элементе)
Type: String (Строка)
Defines which position on the target element to align the positioned element against: "horizontal vertical" alignment. See the my option for full details on possible values. Perecentage offsets are relative to the target element. Определяет, какая позиция в элементе-цели будет использована для выравнивания с позицируемом элементом: "horizontal vertical" (горизонтальное вертикальное) выравнивание. См выше опцию my (мой элемент), те же опции можно использовать и для at (на элементе). Смещения в процентах рассчитываются относительно элемента-цели.
of (default: null) (относительно элемента)
Type: Selector or Element or jQuery or Event (Селектор или Элемент или Объект jQuery или Событие)
Which element to position against. If you provide a selector or jQuery object, the first matching element will be used. If you provide an event object, the pageX and pageY properties will be used. Example: "#top-menu" Относительно какого элемента позиционироваться. Если вы используете Селектор или Объект jQuery, будет использован первый подходящий элемент. Если вы используете Событие, будут использованы аттрибуты pageX и pageY. Например: "#top-menu".
collision (default: "flip") (коллизия)
Type: String (Строка)
Когда позицируемый элемент выходит за пределы окна в определенном направлении, объект двигается в альтернативную позицию. Похожий на my (мой элемент) и at (на элементе), collision (коллизия) принимает простое значение или пару для горинталь/вертикаль, примеры: "flip", "fit", "fit flip", "fit none".
◾ "flip" (прыгнуть): Перепрыгивает через элемент на противоположную сторону элемента-цели и функционал определения коллизии запускается снова, чтобы посмотреть, возможна ли теперь установка. Какая сторона позволяет большей части элемента быть видимой, та и используется.
◾ "fit" (установить): Отодвигает элемент от края окна.
◾ "flipfit" (прыгнуть-установить): сначала запускается логика "flip" (прыгнуть), размещая элемент на стороне, которая позволяет большей части элемента быть видимой. Затем запускается логика "fit" (установить) для обеспечения максимальной видимости элемента.
◾ "none" (не определять коллизию): Не запускает какой-либо механизм определения коллизии.
using (default: null) (использовать)
Type: Function() (Функция)
When specified, the actual property setting is delegated to this callback. Receives two parameters: The first is a hash of top and left values for the position that should be set and can be forwarded to .css() or .animate().
Когда определена, актуальный набор аттрибутов передается колбаку (функции обратного вызова). Получает два параметра:
1. Хэш значений top (верх) и left (лево) для позиционирования, который может быть установлен и передан к .css() или к .animate().
2. Второй параметр хранит информацию о позиции и размерах обоих элементов, а также расчеты их относительного позицирования. И элемент-цель, и позицируемый элемент имеют эти атрибуты: element (элемент), left (лево), top (верх), width (ширина), height (высота). В дополнении еще есть такие параметры как horizontal (горизонталь), vertical (вертикаль) and important (важность). Это дает потенциальную возможность для 12-ти направлений, таких как, например: { horizontal: "center", vertical: "left", important: "horizontal" }.
within (default: window) (внутри)
Type: Selector or Element or jQuery (Селектор или Элемент или Объект jQuery)
Элемент для позицирования внутри, имитируя обнаружениеколлизии. Если вы передаете Селектор или Объект jQuery, первый элемент будет использован.
Overview (Обзор)
The jQuery UI .position() method allows you to position an element relative to the window, document, another element, or the cursor/mouse, without worrying about offset parents.
Note: jQuery UI does not support positioning hidden elements.
This is a standalone jQuery plugin and has no dependencies on other jQuery UI components.
This plugin extends jQuery's built-in .position() method. If jQuery UI is not loaded, calling the .position() method may not fail directly, as the method still exists. However, the expected behavior will not occur.
Метод .position() плагина jQuery UI позволяет вам позиционировать элемент относительно окна, документа, другого элемента, курсора мыши, без переживаний по поводу смещений родительских элементов.
Обратите внимание: jQuery UI не поддерживает позиционирование спрятанных элементов.
Это стоящий отдельно плагин jQuery и не зависит от других компонентов jQuery UI.
Плагин расширяет встроенный метод jQuery .position(). Если jQuery UI не загружено, вызов .position() может и не вызвать ошибку, так как метод по-прежнему существует. Однако, ожидаемое поведение метода не будет иметь место в данном случае.
Example: A simple jQuery UI Position example.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>position demo</title> <style> .positionDiv { position: absolute; width: 75px; height: 75px; background: green; } </style></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> |
Примеры Позиционирования на этом сайте: Дефолтное, Цикл картинок.
