Плагин Resizable – один из нескольких плагинов, входящих в состав jQuery UI, с помощью которых можно организовать взаимодействие с элементами веб-станиц. Плагин Resizable позволяет изменять размеры выбранных элементов с помощью перемещения указателем мыши. Посмотрите на примере:

А сделать это не так сложно как кажется на первый взгляд. Конечно, если делать с помощью jQuery.

Для начала посетим страницу настраиваемой закачки на сайте jQuery UI, чтобы получить необходимые нам файлы. Щелкаем на ссылке Deselect all component, чтобы не закачивать лишнее, а затем выбираем только то, что нам потребуется – отмечаем чекбокс Resizable и видим, что вместе с ним отметился чекбокс UI Core. Работа плагина Resizable зависит от него, поэтому он необходим.
Кроме этого, справа есть выпадающий список, где можно выбрать понравившуюся тему оформления. Если все готово, кликаем кнопку Download и получаем архив.

В разделе HEAD веб-страницы необходимо подключить несколько файлов, которые есть в архиве:

<link type="text/css" href="css/start/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

Сначала подключаем файл стилей css/start/jquery-ui-1.7.2.custom.css одной из многочисленных тем оформления. Вероятно, Вы будете использовать свое собственное оформление, но для изучения примеров лучше воспользоваться готовым оформлением. Кроме этого мы подключили файл библиотеки – js/jquery-1.3.2.min.js и файл js/jquery-ui-1.7.2.custom.min.js, в котором объединена функциональность ядра UI и плагина Resizable.

Для примера возьмем следующую HTML-разметку:

<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>

И javascript-код, который «привяжет» возможности плагина Resizable к выбранному элементу:

$(function(){
  $("#resizable").resizable();
});

Открыть пример в новом окне

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

$(function(){
  $("#resizable").resizable({
  	animate: true,
  	ghost: true
  });
});

Открыть пример в новом окне

Мы передали плагину две опции – animate и ghost. В обоих случаях передали логическое значение true. Но, что же мы этим смогли добиться?
Передав значение true в опции animate, мы добились того, что теперь при изменении размеров элемента будет использоваться анимационный эффект.
В случае с ghost: true при изменении размеров элемента будут отображаться его полупрозрачные контуры.
Остальные опции, как Вы понимаете, используются таким же образом – главное знать, за что какая отвечает…

alsoResize – по умолчанию имеет значение false. Может принимать селектор jQuery, объект jQuery или элемент. Элементы, определенные в этой опции также меняют свои размеры.
animate – по умолчанию установлено значение false. Если установить значение true, при изменении размера будет использоваться анимация.
animateDuration – в качестве значения опция принимает строку с предопределенными значениями – ’slow’, ‘normal’, ‘fast’ или число в миллисекундах, определяющее длительность анимационного эффекта при изменении размера элемента.
animateEasing – опция принимает строку с названием анимационного эффекта. Большое количество разнообразных эффектов можно использовать при условии подключения дополнительного плагина jQuery Easing. По умолчанию имеет значение ’swing’.
aspectRatio – по умолчанию имеет значение false. Если установить true, при изменении размеров элемента будет сохраняться пропорция в соотношении сторон. Возможно также, передавать значения в виде 16/9 или 0.75. В этом случае пропорции в соотношении сторон будут установлены в соответствии с указанным значением.
cancel – в качестве значения указывается селектор jQuery. Предотвращает изменение размеров для элементов, указанных в этой опции. По умолчанию имеет значение ‘:input,option’.
containment – ограничивает изменение размеров внутри элемента определенного в этой опции. Значением может быть строка (например ‘parent’, ‘document’), элемент DOM или селектор jQuery. По умолчанию установлено значение false.
delay – в этой опции можно указать число в миллисекундах, определив задержку старта изменения размеров элемента. По умолчанию установлено значение 0. Эта опция помогает предотвратить случайное изменение размеров элемента при щелчке мышью.
distance – по умолчанию установлено значение 1. Опция определяет количество пикселей, на которое переместиться указатель мыши, прежде, чем начнется изменение размеров элемента. Эта опция помогает предотвратить случайное изменение размеров элемента при щелчке мышью.
ghost – по умолчанию установлено значение false. Если установить true, при изменении размеров элемента будут видны его полупрозрачные контуры.
grid – в качестве значения принимает массив элементов [x, y], где x и y – числа, определяющие шаг сетки. Изменение размеров будет происходить дискретно, в соответствии с заданными значениями. По умолчанию установлено значение false.
handles – принимает строку в качестве значения. По умолчанию установлено значение ‘e, s, se’. Можно использовать любые из следующих обозначений ‘n, e, s, w, ne, se, sw, nw, all’ или их комбинации.
helper – по умолчанию опция имеет значение false. Принимает строку с названием css-класса, который добавляется к области, демонстрирующей во время перемещения размеры, в которые установится элемент.
maxHeight – число, определяющее максимальную высоту, до которой можно изменять размеры элемента. По умолчанию – null.
maxWidth – число, определяющее максимальную ширину, до которой можно изменять размеры элемента. По умолчанию – null.
minHeight – число, определяющее минимальную высоту, до которой можно изменять размеры элемента. По умолчанию – 10.
minWidth – число, определяющее минимальную ширину, до которой можно изменять размеры элемента. По умолчанию – 10.

Плагин Resizable, как и остальные плагины из UI jQuery, может реагировать на события. Он имеет три опции, в которых можно определить callback-функции, вызываемые при наступлении соответствующего события.

Опция start – событие resizestart наступает при начале изменения размеров элемента.
Опция resize – событие resize наступает постоянно во время изменения размеров элемента.
Опция stop – событие resizestop наступает при окончании изменения размеров элемента.

Однако на примере все равно лучше:

$(function(){
  $("#resizable").resizable({
    ghost: true,
    stop:  function(event, ui) {
      alert("Событие " + event.type);
    }
  });
});

Открыть пример в новом окне

В этом примере мы определили в опции stop callback-функцию, которая будет вызвана в момент окончания изменения размеров элемента. Функция может принимать два аргумента. Первый аргумент – это объект события, к свойству type которого можно легко обратиться. Теперь, при окончании изменения размеров выбранного элемента мы получим окно предупреждения, в котором будет выведено название события, вызвавшего эту функцию.
Что касается второго аргумента, то это объект, в свойствах которого содержится весьма полезная информация. Как можно обратиться к некоторым свойствам этого объекта показано в следующем примере:

$(function(){
 $("#resizable").resizable({
  ghost: true,
  stop:  function(event, ui) {
   alert("Начальные размеры: " + ui.originalSize.width +
      "x" + ui.originalSize.height +
      "px\nКонечные размеры: " + ui.size.width +
      "x" + ui.size.height + "px");
  }
 });
});

Открыть пример в новом окне

Здесь мы обращаемся к свойствам объекта ui originalSize и size. Оба свойства также представляют собой объекты, в свойствах width и height которых сохраняются значения ширины и высоты начальных размеров элемента (originalSize) и его конечных размеров (size).

Перечислим основные свойства специального объекта ui:
ui.helper – объект, представляющий изменяемый элемент;
ui.size – объект, в свойствах width и height которого сохраняются текущие ширина и высота элемента;
ui.originalSize – объект, в свойствах width и height которого сохраняются ширина и высота элемента до изменения его размеров;
ui.position – объект, в свойствах top и left которого сохраняется текущее положение элемента;
ui.originalPosition – объект, в свойствах top и left которого сохраняется положение элемента до изменения его размеров;

Кроме перечисленных выше возможностей, плагин имеет несколько методов, с помощью которых можно управлять им уже после инициализации. Добавим в HTML-разметку пару кнопок:

<button id="getter">Get Option</button>
<button id="setter">Set Option>/button>

и попробуем использовать метод .resizable(‘option’, optionName, [value]):

$(function(){
  $("#resizable").resizable({
    animate: true,
    ghost: true,
    animateDuration: 500
  });
  $("#getter").click(function(){
    alert($("#resizable").resizable("option", "animateDuration"));
  });
  $("#setter").click(function(){
    $("#resizable").resizable("option", "animateDuration", 3000);
  });
});

Открыть пример в новом окне

Используем кнопки с идентификаторами #getter и #setter с которыми свяжем событие click. При щелчке мышью на кнопке #getter будем вызывать метод .resizable(‘option’, optionName, [value]) с двумя аргументами, получая, таким образом, текущее значение опции animateDuration. А при щелчке мышью на кнопке #setter вызовем тот же самый метод .resizable(‘option’, optionName, [value]), но уже с тремя аргументами. В качестве третьего аргумента передадим значение, которое мы хотим установить для опции animateDuration.

Все доступные методы плагина Resizable:
destroy – .resizable(‘destroy’) полностью удаляет всю функциональность плагина Resizable. Возвращает элементы в состояние, предшествующее инициализации.
disable – .resizable(‘disable’) временно запрещает использование всей функциональности плагина. Вновь разрешить ее использование можно с помощью метода enable.
enable – .resizable(‘enable’) разрешает использование всей функциональности плагина, если ранее она была запрещена с использованием метода disable.
option – .resizable(‘option’, optionName, [value]) с помощью этого метода можно получить или установить значение любой опции плагина после инициализации.

Все примеры, использованные в статье, можно совершенно запросто получить в этом архиве.