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

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

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

Заметка

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

Проверено в:

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

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

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

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

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

Что качать

• 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>

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

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

Опции

Пример

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

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

</script>

События

Пример

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

Методы

Пример

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

</script>

Материалы

• jQuery UI :: resizable