UI resizable — плагин, который изменяет размеры

Подготовил: Евгений Рыжков Дата публикации: 14.06.2010

плагин, который изменяет размерыПлагин дает возможность изменять размеры любого элемента. Можно захватить любую из границ элемента или за ранее опреденный угол, и изменить размеры блока перетаскиванием этой границы (угла) мышью.

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

Заметка

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

Проверено в:

  • IE 6-8
  • Firefox 3
  • Opera 9.5-10
  • Safari 4

Кому хочется еще примеров идем на страничку с примерами.

Где это применить

Например, для появляющихся окон, размеры которых зачастую по умолчанию подгоняются так, чтобы пользователи с разрешением 1024x768 видели его полностью. В то время как у остальных пользователей не используются площади больших мониторов. Вот им-то и удобно будет растянуть себе подобные окна.

Или для гибких интерфейсов, вид которых пользователь настраивает сам.

Что качать

  • jquery.js — библиотека jQuery (рекомендую не ниже версии 1.3.2 — 55Kb)
  • jquery-ui-custom.js (~26.7 Kb) — собираем плагин из модулей. Выбираем:
    • в UI Core: Core, Widget, Mouse
    • в Interactions: Resizable

Быстрый старт

В HTML коде имеем обычный блок. К его id или class будем привязывать инициалицацию плагина.

<div id="resizable">тут какой-то контент</div>

В стилях обязательно задем этому блоку position: relative/absolute. Если нет желания раскапывать исходники плагина, тогда копируем кусок стилей с именами классов самого плагина:

#resizable {
	[..]
	position: relative; /* нужно обязательно для позиционирования границ, за которые будет тянуть пользователь */
}
/* стили, используемые плагином
----------------------------------*/
.ui-resizable-handle {
	position: absolute;
	font-size: 0.1px;
	z-index: 99999;
	display: block;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
	display: none;
}
.ui-resizable-n { /* верхняя граница */
	cursor: n-resize;
	display: none;
}
.ui-resizable-s { /* нижняя граница */
	cursor: s-resize;
	display: none;
}
.ui-resizable-e { /* правая граница */
	cursor: e-resize;
	display: none;
}
.ui-resizable-w { /* левая граница */
	cursor: w-resize;
	display: none;
}
.ui-resizable-se { /* правый нижний уголок */
	cursor: se-resize;
	width: 7px;
	height: 7px;
	right: 1px;
	bottom: 1px;
	background: url(path-to/resize-rb.gif); /* углам и границам можно задать любой фон */
}
.ui-resizable-sw { /* левый нижний уголок */
	cursor: sw-resize;
	width: 7px;
	height: 7px;
	left: 1px;
	bottom: 1px;
	background: url(path-to/resize-lb.gif);
}
.ui-resizable-nw { /* левый верхний уголок */
	cursor: nw-resize;
	display: none;
}
.ui-resizable-ne { /* правый верхний уголок */
	cursor: ne-resize;
	display: none;
}

В завершении подключаем библиотеки и иницилизируем resize нужного нам элемента:

<script type="text/javascript" src="path-to/jquery-1.4.2.js"></script>
<script type="text/javascript" src="path-to/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript">
jQuery(function() {
		jQuery("#resizable").resizable();
	});

</script>

Теперь размеры блока можно менять.

А теперь подробнее

Опции

disabled активность фукции масштабирования:
  • false — доступна (по умолчанию)
  • true — не доступна
alsoResize селектор элемента, который будет масштабироваться синхронно (по умолчанию отключено)
animate происходит анимация по заверщению выбора новых размеров элемента (по умолчанию отключено)
animateDuration скорость анимации (по умолчанию отключено "slow")
animateEasing эффект анимации (по умолчанию отключено "swing")
aspectRatio сохранение пропорций элемента
  • false — отключено (по умолчанию)
  • true — включено
autoHide показ элементов, за которые можно потянуть только при наведении курсора мыши на элемент с изменяемыми размерами
  • false — отключено (по умолчанию)
  • true — включено
cancel запрещает масштабирование указанных тегов. Так например можно запретить масштабирование, если оно применено например к div или любому другому тегу. По умолчанию — это :input,option
containment задает принудительно размеры блоку, ориентруясь на указанный элемент в опциях. Возможные значения:
  • parent
  • document
  • контретный элемент (по id или классу)
  • селектор
P.S. не очень понял зачем это нужно да и рабоатет как-то странно
delay задержка в милисекундах, после которой будет доступна функция масштабирования. Т.е. зажимаем мышь на границе элемента, ждем эту самую задержку, потом тянем. Задержка сделана для избежания случайного масштабирования элементов. По умолчанию 0.
distance на скольок изначально нужно изменить размеры объекта чтобы появилась возможность масштабировать элемент. Сделана для избежания случайного масштабирования элементов. По умолчанию 1.
ghost показ полупозрачного "призрака" объекта. помогает пользователю понять как будет выглядеть элемент после масштабирования
  • false — отключено (по умолчанию)
  • true — включено
grid задает шаг масштабирования в пикселях по осям x и y в виде массива [x,y]
handles задает, какие границы элемента сможет использовать пользователь для масштабирования — строка зарезервированных значений через запятую (n, e, s, w, ne, se, sw, nw, all). По умолчанию — 'e, s, se
helper задает класс, который добавится proxy элементам во время изменения размеров. Например, можно изменяюмую область закрасить в какой-нибудь цвет. При этом размер самого элемента меняется тольок после того, как пользователь отпустит зажатую клавишу мыши. Этот механизм помогает сравнить текущие и новые размеры элемента.
maxHeight, maxWidth, minHeight, minWidth задаем минимально допустимые размеры элемента в px

Пример

Зададим чтобы тянуть блок можно было только за нижний правый или левый углы, плюс макимальная ширина элемента была 350px:

<script type="text/javascript">
jQuery(function() {
		jQuery("#resizable").resizable({handles: "se, sw", minWidth: "350"});
	});

</script>

События

start начало изменения размеров
resize во время изменения размеров
stop окончание изменения размеров

Пример

<script type="text/javascript">
jQuery("#resizable" ).resizable({
   start: function(event, ui) { [что-то делаем] }
});
</script>

Методы

destroy удаление возможности изменения размеров у элемента
disable отключение возможности изменения размеров у элемента
enable включение возможности изменения размеров у элемента
option чтение или установка опций плагина
widget возвращает элемент .ui-resizable

Пример

<script type="text/javascript">
jQuery(function() {
		jQuery("#resizable").resizable("destroy");
	});

</script>

Материалы

Показать комментарии