Пример
$(document).ready(function() {
$("#tabs").tabs();
//Код первой вкладки (стандартное использование)
$("#res1").resizable();
//Код второй вкладки (ограничение размеров растягивания)
$("#res2").resizable({maxHeight:300,maxWidth:400,minHeight:130,minWidth:130});
//Код третьей вкладки (обратная связь с пользователем)
$("#res3").resizable({ghost:true});
$("#res4").resizable({helper:'helper'});
//Код четвертой вкладки (разное)
$("#res5").resizable({aspectRatio:true});
$("#res6").resizable({animate:true,helper:'helper'});
$("#res7").resizable({autoHide:true});
});
С помощью метода resizable Вы можете сделать выбранный элемент растягиваемым.
Всем растягиваемым элементам во время создания автоматически назначается класс .ui-resizable.
С помощью опций и событий перечисленных в таблицах далее на данной странице Вы можете настраивать поведение растягиваемых элементов под конкретные нужды.
$(селектор).resizable(опции_или_события)
селектор выбирает элемент, который будет сделан растягиваемым.
опции настраивают дополнительные аспекты поведения растягиваемого элемента. Все доступные опции рассмотрены в таблице далее.
события события связанные с растягиваемыми элементами. Все события рассмотрены в таблице далее.
| Опции | Описание |
|---|---|
| alsoResize | Указывает элемент, который будет синхронно изменять размер с растягиваемым элементом. Значение по умолчанию: false. Пример использования: .resizable({alsoResize:'#resizesinc'}) |
| animate | Если имеет значение true элемент будет растягиваться анимировано. Значение по умолчанию: false. Пример использования: .resizable({animate:true}) |
| aspectRatio | Если имеет значение true элемент будет сохранять изначальные пропорции во время растягивания. Значение по умолчанию: false. Пример использования: .resizable({aspectRatio:true}) |
| autoHide | Если имеет значение true иконка указывающая, что элемент может изменять размер будет скрываться, когда курсор мыши будет находится за
пределами растягиваемого элемента. Значение по умолчанию: false. Пример использования: .resizable({autoHide:true}) |
| containment | Позволяет ограничить изменение размера данного растягиваемого элемента до границ указанного элемента. Значение по умолчанию: false. Пример использования: .resizable({containment:'#contelem'}) |
| delay | Устанавливает задержку (в миллисекундах), в течении которой элемент не будет изменять размер (используется для того, чтобы предотвратить не преднамеренное
изменение размера элемента). Значение по умолчанию: 0. Пример использования: .resizable({delay:1000}) |
| distance | Устанавливает минимальное расстояние (в пикселях), на которое должен быть растянут элемент для того,
чтобы изменения вступили в силу (используется для того, чтобы предотвратить не преднамеренное
изменение размера элемента). Значение по умолчанию: 1. Пример использования: .resizable({distance:30}) |
| ghost | Если имеет значение true при растягивании элемента будет отображаться полупрозрачный элемент помощник. Значение по умолчанию: false. Пример использования: .resizable({ghost:true}) |
| handles | Устанавливает направления, в которые можно растягивать элемент. Возможные значения: n, e, s, w, ne, se, sw, nw, all (север, восток, юг, запад, северо-восток, юго-восток
, юго-запад, северо-запад, любые направления) Значение по умолчанию: e, s, se. Пример использования: .resizable({handles:'n,e,s,w,se'}) |
| helper | Указывает класс, с помощью которого будет оформлен элемент помощник (элемент помощник отображается во время растягивания элемента). Значение по умолчанию: false. Пример использования: .resizable({helper:'helperstyle'}) |
| maxHeight | Устанавливает максимальную высоту, до которой может быть растянут элемент. Значение по умолчанию: null. Пример использования: .resizable({maxHeight:400}) |
| maxWidth | Устанавливает максимальную ширину, до которой может быть растянут элемент. Значение по умолчанию: null. Пример использования: .resizable({maxWidth:400}) |
| minHeight | Устанавливает минимальную высоту, до которой может быть сжат элемент. Значение по умолчанию: 10. Пример использования: .resizable({minHeight:100}) |
| minWidth | Устанавливает минимальную ширину, до которой может быть сжат элемент. Значение по умолчанию: 10. Пример использования: .resizable({minWidth:100}) |
Все обработчики событий принимают два аргумента - стандартный объект event браузера и специальный объект ui.
Объект ui имеет следующие свойства:
Синтаксис
$(селектор).resizable({событие:function(event,ui){Код обработчика}})
//или
$(селектор).bind("resizeсобытие",function(event,ui){Код обработчика})
Обратите внимание: например для того, чтобы привязать к растягиваемому элементу с id='test' обработчик события create, который выводит сообщение "привет" необходимо будет написать следующий код: $("#test").resizable({create:function(event,ui){alert("Привет")}}).
| События | Описание |
|---|---|
| create | Определяет функцию, код которой будет выполнен, когда растягиваемый элемент будет создан. |
| start | Определяет функцию, код которой будет выполнен, когда пользователь начнет растягивать (или сжимать) элемент. |
| resize | Определяет функцию, код которой будет выполнятся, во время растягивания (или сжатия) элемента. |
| stop | Определяет функцию, код которой будет выполнен, когда пользователь перестанет растягивать (или сжимать) элемент. |