jQuery - Урок 12. Плагин resizable - меняем размеры элемента

Плагин resizable позволяет менять размеры элемента. Попробуйте вручную уменьшить или увеличить желтый блок:

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

Итак, в архиве jquery-ui-1.7.2.custom (возможно у вас другая версия), возьмите папку CSS и переместите ее туда же, где у вас лежит папка JS. Теперь подключим файл стилей к нашей html-странице. Это можно сделать вручную (прописав путь к файлу) или скопировав ссылку с текстового документа "Ссылка на CSS оформление", который обычно также находится в архиве:

<html> <head> <title>jQuery плагин resizable</title> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css"> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" src="script.js"></script> </head> ... </html>

Теперь, наряду с нашей страницей стилей, мы можем использовать оформление, предоставляемое библиотекой. Но вернемся к нашему примеру. Итак, на html-странице определим какой-нибудь div:

Зададим ему первоначальные размеры на странице style.css:

#les12_ex1{ width:250px; height:150px; border:1px solid red; background:yellow; }

А на странице script.js укажем, что эти размеры можно менять:

$(document).ready(init); function init(){ $(function(){ $("#les12_ex1").resizable(); }); }

Вот собственно и все, наш пример работает. Но, как и у остальных плагинов UI, у плагина resizable есть ряд параметров. Давайте их рассмотрим:

alsoResize - позволяет одновременно менять размеры у нескольких элементов.

Пример:

Теперь все элементы с классом res могут изменять размеры.

animate - позволяет использовать при изменении размеров анимационный эффект.

Пример:

animateDuration - позволяет задать продолжительность анимационного эффекта в миллисекундах или используя значения: "slow" (медленно), "normal" (нормально), "fast" (быстро).

Пример:

animateEasing - позволяет задать эффект анимации (можно использовать при условии подключения дополнительного плагина jQuery Easing).

Пример:

aspectRatio - позволяет при изменении размеров сохранять пропорции соотношения сторон.

Пример:

cancel - запрещает изменение размеров элементов, указанных в параметре. По умолчанию установлено ":input,option".

Пример:

Пример, хоть и не имеет смысла, но отображает суть.

containment - ограничивает возможность изменения размеров элемента. В качестве значения могут выступать: селекторы, элементы DOM или значения "parent" и "document".

Пример:

Теперь желтый блок можно увеличить только до размеров синей рамки (родительский div).

delay - определяет задержку начала изменения размеров элемента в миллисекундах.

Пример:

distance - определяет количество пикселей, на которое переместиться указатель мыши, прежде, чем начнется изменение размеров элемента.

Пример:

ghost - устанавливает полупрозрачный вспомогательный элемент при изменении размеров элемента.

Пример:

helper - устанавливает класс контуру элемента при его перемещении.

Пример:

maxHeight, maxWidth, minWidth - устанавливает соответственно максимальную (минимальную) высоту и ширину изменяемого элемента.

Пример:

Следующие три параметра связаны с событиями:

start - событие наступает с началом изменения размеров элемента.

resize - событие наступает во время изменения размеров.

stop - событие наступает при окончании изменения размеров.

При использовании этих параметров мы можем определить функцию, которая принимает два аргумента – event (объект события) и ui (специальный объект, содержащий информацию о значениях ширины и высоты начальных (originalSize) и конечных размеров (size) элемента).

Свойства этих аргументов:
- event.type - название события,
- ui.originalSize.width - ширина элемента до его изменения,
- ui.originalSize.height - высота элемента до его изменения,
- ui.size.width - текущая ширина элемента,
- ui.size.height - текущая высота элемента.

Пример:

$("#les12_ex1").resizable({ stop: function(event, ui) { $("#les12_res").text('Итоговые размеры: '+ui.size.width+', '+ui.size.height); } });

Так же, как и у плагинов draggable и droppable, у плагина resizable есть четыре метода, которые позволяют менять его работу после инициализации: destroy, disable, enable и option. Принцип работы у них такой же, поэтому останавливаться на этом еще раз не будем.

Предыдущий урок Вернуться в раздел Следующий урок

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

Код кнопки:

Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.