Как создать свой сайт → Уроки jQuery → Урок 12. Плагин resizable

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:
<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> <body> <div id="les12_ex1"></div> </body> </html>
Зададим ему первоначальные размеры на странице 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 - позволяет одновременно менять размеры у нескольких элементов.

    Пример:
    $("#les12_ex1").resizable({ alsoResize: '.res' });
    Теперь все элементы с классом res могут изменять размеры.


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

    Пример:
    $("#les12_ex1").resizable({ animate: true });


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

    Пример:
    $("#les12_ex1").resizable({ animate: true, animateDuration: 'slow' });


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

    Пример:
    $("#les12_ex1").resizable({ animate: true, animateEasing: 'swing' });


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

    Пример:
    $("#les12_ex1").resizable({ aspectRatio: true });


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

    Пример:
    $("#les12_ex1").resizable({ cancel: '#les12_ex1' });
    Пример, хоть и не имеет смысла, но отображает суть.


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

    Пример:
    $("#les12_ex1").resizable({ containment: 'parent' });
    Теперь желтый блок можно увеличить только до размеров синей рамки (родительский div).


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

    Пример:
    $("#les12_ex1").resizable({ delay: 1000 });


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

    Пример:
    $("#les12_ex1").resizable({ distance: 100 });


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

    Пример:
    $("#les12_ex1").resizable({ ghost:true });


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

    Пример:
    $("#les12_ex1").resizable({ helper: 'ramka_green' });


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

    Пример:
    $("#les12_ex1").resizable({ maxHeight: 200, maxWidth: 400, minWidth: 100, minHeight:50 });


Следующие три параметра связаны с событиями:
  • 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. Принцип работы у них такой же, поэтому останавливаться на этом еще раз не будем.



Предыдущий урок Вернуться в раздел Следующий урок 
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.