Модуль UI Resizable — изменение размеров

Модуль UI Resizable позволяет изменять размеры элементов с помощью мыши. Для загрузки модуля переходим на страницу http://jqueryui.com/download. Оставляем установленными флажки UI Core, Resizable, 1.7.2, выбираем тему из списка (например, UI lightness), а затем щелкаем на кнопке Download. Распаковываем архив в отдельную папку. Из этого архива для работы модуля необходимы следующие файлы:

Все указанные файлы необходимо подключить к скрипту в том порядке, в котором они перечислены. В качестве примера рассмотрим функциональные возможности модуля с параметрами, принятыми по умолчанию (листинг 12.12).

Листинг 12.12. Модуль UI Resizable, изменение размеров

<!doctype html>
<html>
<head>
<title>Модуль UI Resizable. Изменение размеров</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet"
      href="css/ui-lightness/jquery-ui-1.7.2.custom.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<style>
body { font-size:10pt; font-family:Verdana, sans-serif; }
#resizable { width:300px; height:150px; padding:15px; }
</style>
<script>
$(document).ready(function() {
   $("#resizable").resizable();
});
</script>
</head>
<body>
   <div id="resizable" class="ui-widget-content">
      Размеры этого блока можно изменять с помощью мыши.
   </div>
</body>
</html>

Для того чтобы можно было изменять размеры элемента, необходимо указать это с помощью метода resizable(). После применения метода исходный HTML-код элемента будет выглядеть так.

<div id="resizable" class="ui-widget-content ui-resizable">
   Размеры этого блока можно изменять с помощью мыши.
<div class="ui-resizable-handle ui-resizable-e" unselectable="on">
</div>
<div class="ui-resizable-handle ui-resizable-s" unselectable="on">
</div>
<div class="ui-resizable-handle ui-resizable-se ui-icon
ui-icon-gripsmall-diagonal-se" style="z-index: 1001"
unselectable="on"></div>
</div>

Метод resizable() имеет следующий формат:

resizable([<Объект с опциями>])

Параметр <Объект с опциями> представляет собой объект, состоящий из пар "опция/значение". Могут быть указаны следующие опции.

[<Шаг по горизонтали>, <Шаг по вертикали>]

Рассмотрим пример.

grid: [40, 60]

Значение по умолчанию — false.

Значение по умолчанию — false.

Можно также передать объект со свойствами (n, e, s, w, ne, se, sw, nw). В качестве значения свойств указывается ссылка (селектор jQuery) на элемент. Значение по умолчанию — "e,s,se".

Чтобы изменить или получить значения опций после инициализации, необходимо использовать второй формат метода resizable(). Для этого в первом параметре указывается значение "option", во втором — название опции, а в третьем — новое значение.

$("#resizable").resizable("option", "containment", "document");

Если необходимо получить значение опции, то третий параметр указывать не нужно. В качестве примера получим значение опции maxHeight.

alert($("#resizable").resizable("option", "maxHeight"));

Второй формат метода resizable() позволяет также управлять элементом. Для этого в первом параметре указываются следующие значения:

Обработать события, происходящие с элементом, можно двумя способами.

resizable({
   <Событие>: <Функция обратного вызова>
});

или

bind(<Событие>, <Функция обратного вызова>)

В параметре <Событие> могут быть указаны следующие события (в скобках указано значение для метода bind()).

В параметре <Функция обратного вызова> указывается ссылка на функцию следующего формата.

function <Название функции>([<Объект event>[, <Объект UI>]]) {
   // ...
}

Через параметр <Объект UI> доступны следующие свойства.

Пример использования различных опций и обработки событий приведен в листинге 12.13.

Листинг 12.13. Модуль UI Resizable, различные параметры настройки и события

<!doctype html>
<html>
<head>
<title>Модуль UI Resizable. Различные настройки</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet"
      href="css/ui-lightness/jquery-ui-1.7.2.custom.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<style>
body { font-size:10pt; font-family:Verdana, sans-serif; }
.resizable { width:300px; height:150px; padding:15px; }
.cls1 { border:1px dotted #000000; z-index:5000; }
</style>
<script>
$(document).ready(function() {
   $("#resizable").resizable({
      maxHeight: 600, // Максимальная высота
      maxWidth: 1200, // Максимальная ширина
      minHeight: 100, // Минимальная высота
      minWidth: 100, // Минимальная ширина
      containment: "parent", // Ограничение границами родителя
      // Показывать маркер, только когда курсор расположен
      // над элементом
      autoHide: true,
      aspectRatio: true, // Пропорциональное изменение размеров
      stop: function(e, ui) {
         var msg="<b>Размеры до:</b> ширина - " +
                  ui.originalSize.width;
         msg += ", высота - " + ui.originalSize.height + "<br>";
         msg += "<b>Размеры после:</b> ширина - " + ui.size.width;
         msg += ", высота - " + ui.size.height + "<br>";
         $("#div1").html(msg);
      }
   });
   $("#resizable2").resizable({
      animate: true, // Изменение размеров с анимацией
      animateDuration: 1000, // Продолжительность
      animateEasing: "swing", // Эффект замедления
      helper: "cls1" // Стилевой класс для помощника
   });
   $("#resizable3").resizable({ alsoResize: "#resizable4" });
   $("#resizable4").resizable({
      // Изменение размера захватом за любую границу
      handles: "all",
      // Захватом за нижнюю границу изменить размер нельзя
      cancel: ".ui-resizable-s"
   });
});
</script>
</head>
<body>
<div style="width:900px; height:500px; border:1px solid #000000">
<div id="resizable" class="resizable ui-widget-content">
Пропорциональное изменение размеров в пределах родительского элемента
<div id="div1"></div></div>
</div><br><br>
<div id="resizable2" class="resizable ui-widget-content">
Использование помощника при изменении размеров<br>
Изменение размеров производится с анимацией</div><br><br>
<div id="resizable3" class="resizable ui-widget-content">
Синхронное изменение размеров с нижним элементом</div><br><br>
<div id="resizable4" class="resizable ui-widget-content">
Изменить размер можно захватом за любую границу,
кроме нижней</div><br><br>
</body>
</html>
Предыдущая статья Все статьи Следующая статья