Функция положения jQuery / объект - PullRequest
2 голосов
/ 27 января 2012

Я видел этот похожий код на двух сайтах, теперь используемых в корреляции с ползунком jquery

function reCenterButton() {
    $(".button").position({
        "my": "center center",
        "at": "center center",
        "of": $("#button-box")
    });
};

Может кто-нибудь сказать мне, что пары "имя / значение" означают в объекте функции позиции

видел это здесь http://jsfiddle.net/william/RSkpH/1/
и здесь http://css -tricks.com / examples / ButtonMaker /

Кажется, я не могу найти его при поиске документации дляposition () это часть функции слайдера?

Ответы [ 2 ]

2 голосов
/ 27 января 2012

jQuery UI Position предоставляет способ позиционирования элементов относительно окна, документа или другого элемента.

Относительно параметров:

  • из : элемент, относительно которого будут расположены совпавшие элементы (для которого .position () - .button)

  • my : выравниваниеправило, которое будет использоваться для позиционируемого элемента (.button)

  • при : правило выравнивания, которое будет использоваться для целевой элемент (#button-box)

Итак, в вашем примере элемент .button будет центрирован с элементом #button-box.

Другой пример:

$('#menu').position({
    my: 'left top',
    at: 'left bottom',
    of: '#selectMenu'
});

Это можно использовать для позиционирования пользовательского выпадающего виджета.#selectMenu - это «выбор», а #menu - список опций, который появляется при нажатии кнопки выбора.

Это позволит расположить список опций прямо под кнопкой выбора.

enter image description here

2 голосов
/ 27 января 2012

Это новое в jQuery UI 1.8. Вы можете использовать его для быстрого позиционирования.

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

my (String)

Определяет, какая позиция на позиционируемом элементе должна быть выровнена с целевым элементом: горизонтальное вертикальное выравнивание. Одно значение, такое как «right», будет по умолчанию «right center», «top» будет по умолчанию «center top» (в соответствии с соглашением CSS). Допустимые значения: «сверху», «по центру», «снизу», «слева», «справа». Пример: «левый верх» или «центральный центр»

при (строка)

Определяет, какое положение на целевом элементе выравнивать позиционированный элемент по отношению к: «горизонтальному вертикальному» выравниванию. Одно значение, такое как «right», будет по умолчанию «right center», «top» будет по умолчанию «center top» (в соответствии с соглашением CSS). Допустимые значения: «сверху», «по центру», «снизу», «слева», «справа». Пример: «левый верх» или «центральный центр»

из (селектор, элемент, jQuery, событие)

Элемент для позиционирования против. Если вы предоставите селектор, будет использован первый соответствующий элемент. Если вы предоставите объект jQuery, будет использован первый элемент. Если вы предоставите объект события, будут использованы свойства pageX и pageY. Пример: "# top-menu"

смещение (строка)

Добавьте эти левые верхние значения к вычисленной позиции, например. «50 50» (слева вверху) Одно значение, например «50», будет применяться к обоим.

столкновение (строка)

Когда позиционированный элемент переполняет окно в каком-либо направлении, переместите его в альтернативную позицию. Подобно my и at, он принимает одно значение или пару для горизонтального / вертикального, например. "перевернуть", "подогнать", "подогнать перевернуть", "подогнать без".

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

  • соответствует , поэтому элемент удерживается в нужном направлении, но перемещается так, чтобы он соответствовал.

  • нет не обнаруживать столкновения.

с использованием (Функция)

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

Дополнительная информация

...