UI позиционирование
Опубликовано: 27.10.2018
Материал из JQuery
Position
Описание
Эта утилита jQuery UI, позволяющая удобно позиционировать элементы (в часности UI-виджеты) относительно окна (window), документа (document), других элементов и даже курсора. С ее помощью нельзя позиционировать скрытые элементы (hidden). Эта утилита является независимой и не требует подключения к странице других UI модулей (даже ядра jQuery UI).
Допустим, что необходимо расположить элемент с id=el1 в левом нижнем углу элемента с id=target так, чтобы первый спускался на пол своей высоты (пример с синем квадратиком в примере выше):
$ ( "#el1" ) .position ( { my : "right center" , // место на позиционируемом элементе at : "right bottom" , // место на элементе относительно которого будет позиционирование of : "#target" // элемент относительно которого будет позиционирование } ) ;Список свойств
↓ название :тип
Определяет точку на позиционируемом элементе, относительно которой будет происходить выравнивание (например " нижний левый край элемента должен будет оказаться в центре документа (или другого элемента)").Задается строкой формата "по_горизонтали по_вертикали", возможные значения "right|center|left bottom|center|top". Если одно из значений не указывается (например просто "left" или просто "top"), то недостающее считается "center" (т.е. "left center" и "center top").
Определяет точку на элементе, относительно которого будут позиционировать. Относительно этой точки и будет происходить выравнивание (например "центр определенного элемента должен будет оказаться в нижнем правом углу документа (или другого элемента))".Задается строкой формата "по_горизонтали по_вертикали", возможные значения "right|center|left bottom|center|top". Если одно из значений не указывается (например просто "left" или просто "top"), то недостающее считается "center" (т.е. "left center" и "center top")..
В этом свойстве задается элемент, относительно которого будет происходить позиционирование (документ, окно, элемент страницы). Если передается event , то позиционирование будет происходить относительно его свойств pageX и pageY.В этом свойстве задается сдвиг по горизонтали и вертикали (в пикселях). Например "50 50" (left top). Если задать одно значение, то оно будет применено как по вертикали так и по горизонтали.
Если позиционируемый элемент оказывается частично или полностью выходящим за рамки окна, это свойство определяет его альтернативную позицию.
Заданная в этом параметре функция будет вызываться в момент позиционирования элемента. Ей будет передан один параметр — объект с полями top и left, которые содержат расстояния (в пикселях), на которое необходимо сместить позиционируемый элемент, чтобы он расположился относительно второго элемента, так как это было задано.
