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

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

  • jquery-ui-1.7.2.custom.css и каталог images (папка css\ui-lightness);
  • jquery-1.3.2.min.js (папка js);
  • jquery-ui-1.7.2.custom.min.js (папка js).

Все указанные файлы необходимо подключить к скрипту в том порядке, в котором они перечислены. В качестве примера рассмотрим функциональные возможности модуля с параметрами, принятыми по умолчанию (листинг 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([<Объект с опциями>])

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

  • maxHeight — максимально возможная высота элемента при изменении размера; значение по умолчанию — null.
  • maxWidth — максимально возможная ширина элемента при изменении размера; значение по умолчанию — null.
  • minHeight — минимально возможная высота элемента при изменении размера; значение по умолчанию — 10.
  • minWidth — минимально возможная ширина элемента при изменении размера; значение по умолчанию — 10.
  • delay — позволяет задать задержку в миллисекундах перед началом изменения размера. Используется для предотвращения нежелательного изменения размера при случайном щелчке на элементе. Значение по умолчанию — 0.
  • distance — расстояние в пикселях, после прохождения которого начинается изменение размера. Используется для предотвращения нежелательного изменения размера при случайном щелчке на элементе. Значение по умолчанию — 1.
  • aspectRatio — позволяет задать пропорциональное изменение размеров элемента. Если указано значение true, то размер будет изменяться пропорционально первоначальным размерам. В качестве значения можно также указать вещественное число (например, 2.0) или пропорцию (например, 2/1). Значение по умолчанию — false.
  • grid — устанавливает шаг изменения размера по горизонтали и вертикали (в пикселях). В качестве значения указывается массив с двумя элементами.
[<Шаг по горизонтали>, <Шаг по вертикали>]

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

grid: [40, 60]

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

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

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

  • helper — позволяет указать стилевой класс для вспомогательного элемента, который будет изменять размеры вместо оригинала. По окончании изменения размера оригинал примет размеры вспомогательного элемента; значение по умолчанию — false.
  • ghost — если указано значение true, то в качестве вспомогательного элемента будет использоваться полупрозрачная копия оригинала. По окончании изменения размера оригинал примет размеры вспомогательного элемента; значение по умолчанию — false.
  • animate — если указано значение true, то изменение размеров будет производиться с анимацией; значение по умолчанию — false.
  • animateDuration — позволяет задать продолжительность анимации. Можно указать количество миллисекунд или одно из значений:
  • fast — 200 миллисекунд;
  • normal — 400 миллисекунд;
  • slow — 600 миллисекунд (значение по умолчанию).
  • animateEasing — позволяет задать эффект замедления из дополнительных модулей или два следующих значения:
  • swing — в начале идет ускорение, а в конце замедление (значение по умолчанию);
  • linear — равномерная скорость движения.
  • autoHide — если указано значение true, то маркер изменения размера (в правом нижнем углу) будет показываться только в случае, когда курсор мыши находится над элементом. Значение по умолчанию — false.
  • alsoResize — позволяет указать еще один элемент, который будет изменять размеры одновременно с основным. В качестве значения можно указать DOM-элемент, селектор или объект jQuery; значение по умолчанию — false.
  • handles — позволяет указать, захватывая какие элементы блока можно будет изменять его размеры. Указываются следующие значения (или их комбинация через запятую):
  • n — верхняя граница;
  • e — правая граница;
  • s — нижняя граница;
  • w — левая граница;
  • nw — верхний левый угол;
  • ne — верхний правый угол;
  • se — нижний правый угол;
  • sw — нижний левый угол;
  • all — все значения сразу.

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

  • cancel — позволяет указать один или несколько элементов внутри блока, захватив которые нельзя будет изменить размеры блока. В качестве значения указывается селектор jQuery. Значение по умолчанию — ":input,option".

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

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

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

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

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

  • disable — временно запрещает изменение размеров;
  • enable — разрешает изменение размеров, если ранее оно было запрещено с помощью метода disable;
  • destroy — удаляет всю функциональность и возвращает все элементы в первоначальное состояние.

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

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

или

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

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

  • start (resizestart) — наступает в начале изменения размеров.
  • resize (resize) — возникает постоянно в процессе изменения размеров.
  • stop (resizestop) — наступает в конце изменения размеров.

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

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

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

  • helper — ссылка (объект jQuery) на вспомогательный элемент.
  • originalPosition — позиция элемента до изменения размеров. Доступны два свойства:
  • top — положение сверху;
  • left — положение слева.
  • position — позиция элемента после изменения размеров. Доступны два свойства:
  • top — положение сверху;
  • left — положение слева.
  • originalSize — размеры элемента до их изменения. Доступны два свойства:
  • width — ширина элемента;
  • height — высота элемента.
  • size — размеры элемента после их изменения. Доступны два свойства:
  • width — ширина элемента;
  • height — высота элемента.

Пример использования различных опций и обработки событий приведен в листинге 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>

Библиотека jQuery UI
Библиотека jQuery UI

Помощь сайту

Yandex-деньги: 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов