Необходимо добавить возможность изменять размеры элемента (или элементов) DOM с помощью указателя мыши.

Опубликовал: admin Среда, Июнь 5, 2013 в категории jQuery, Подборка рецептов | Пока нет комментариев

Решение

Решим эту задачу с помощью плагина Resizable (листинг 18.3.1). Выберем тему оформления "start".

Листинг 1 8 .3 .1 . Использование плагина Resizable

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-18-3-1</title>
<content>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/start/jquery-ui-1.8.9.custom.css" rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-resizable-helper { border: 1px dotted #999; }
</style>
<script type="text/javascript">
$(function(){
$("#resizable").resizable();
});
</script>
</head>
<body>
<h3 class="ui-widget-header">Resizable</h3>
<!--
<button id="getter">Get Option</button>
<button id="setter">Set Option</button>
-->
</body>
</html>

Обсуждение

Сначала подключаем файл стилей css/start/jquery-ui-1.8.9.custom.css одной из многочисленных тем оформления. Вероятно, у вас будет свое собственное оформление, но для изучения примеров лучше воспользоваться готовым решением. Кроме этого мы подключили файл библиотеки — js/jquery-1.4.4.min.js и файл js/jquery-ui1.8.9.custom.min.js, в котором объединена функциональность ядра UI и плагина Resizable. За связь плагина с HTML-разметкой отвечает фрагмент кода, приведенный в листинге 18.3.2.

Листинг 1 8 .3 .2 . Использование плагина Resizable

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

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

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

Листинг 1 8 .3 .3 . Использование плагина Resizable

<script
type="text/javascript">
$(function(){
$("#resizable").resizable({
animate: true, ghost:
true
});
});
</script>

В примере из листинга 18.3.3 мы передали плагину две опции — animate и ghost. В обоих случаях передали логическое значение true. Но, чего же мы этим смогли добиться?

Передав значение true в опции animate, мы добились того, что теперь при изменении размеров элемента будет реализован анимационный эффект.

В случае с ghost: true при изменении размеров элемента будут отображаться его полупрозрачные контуры.

В табл. 18.7 приведены все доступные опции плагина Resizable и их описания.

Таблица 18.7. Опции плагина Resizable

Опция	Описание
disabled	Значение по умолчанию — false. Если установить значение true, то при инициализации функциональность Resizable будет недоступна, однако может быть включена впоследствии, например, при выполнении какоголибо условия
alsoResize	Значение по умолчанию — false. Может принимать селектор jQuery, объект jQuery или элемент. Элементы, определенные в этой опции, также меняют свои размеры
animate	Значение по умолчанию — false. Если установить значение true, то изменение размера будет сопровождаться анимацией
animateDuration	В качестве значения опция принимает строку с предопределенными значениями — ‘slow’, ‘normal’, ‘fast’ или число в миллисекундах, определяющее длительность анимационного эффекта при изменении размера элемента
animateEasing	Опция принимает строку с названием анимационного эффекта. Большое количество разнообразных эффектов доступно при подключении дополнительного плагина jQuery Easing. Значение по умолчанию — ‘swing’
aspectRatio	Значение по умолчанию — false. Если установить true, то при изменении размеров элемента будет сохраняться пропорция в соотношении сторон. Можно также передавать значения в виде 16/9 или 0,75. В этом случае пропорции в соотношении сторон будут установлены в соответствии с указанным значением
autoHide	Значение по умолчанию — false. Если установить значение true, картинка, расположенная в правом нижнем углу элемента, будет показываться только в случае нахождения указателя мыши над элементом
cancel	В качестве значения указывается селектор jQuery. Предотвращает изменение размеров для элементов, указанных в этой опции. Значение по умолчанию — ‘:input,option’
containment	Ограничивает изменение размеров внутри элемента, определенного в этой опции. Значением может быть строка (например ‘parent’, ‘document’), элемент DOM или селектор jQuery. Значение по умолчанию — false
delay	В этой опции можно указать число в миллисекундах, определив задержку старта изменения размеров элемента. Значение по умолчанию — 0. Эта опция помогает предотвратить случайное изменение размеров элемента при щелчке мышью
distance	Значение по умолчанию — 1. Опция определяет число пикселов, на которое переместится указатель мыши, прежде чем начнется изменение размеров элемента. Эта опция помогает предотвратить случайное изменение размеров элемента при щелчке мышью
ghost	Значение по умолчанию — false. Если установить true, то при изменении размеров элемента будут видны его полупрозрачные контуры
grid	В качестве значения принимает массив элементов [x, y], где x и y — числа, определяющие шаг сетки. Изменение размеров будет происходить дискретно, в соответствии с заданными значениями. Значение по умолчанию — false

Таблица 18.7 (окончание)

Опция	Описание
handles	Принимает строку в качестве значения. По умолчанию установлено значение ‘e, s, se’. Допустимы любые из следующих обозначений: n, e, s, w, ne, se, sw, nw, all или их комбинации
helper	Значение по умолчанию — false. Принимает строку с названием CSSкласса, который добавляется к области, демонстрирующей во время перемещения размеры, в которые установится элемент
maxHeight	Число, определяющее максимальную высоту, до которой можно изменять размеры элемента. По умолчанию — null
maxWidth	Число, определяющее максимальную ширину, до которой можно изменять размеры элемента. По умолчанию — null
minHeight	Число, определяющее минимальную высоту, до которой можно изменять размеры элемента. По умолчанию — 10
minWidth	Число, определяющее минимальную ширину, до которой можно изменять размеры элемента. По умолчанию — 10

Resizable, как и остальные плагины из UI jQuery, может реагировать на события. Он имеет четыре опции, в которых можно определить callback-функции, вызываемые при наступлении соответствующего события. Названия опций и описания соответствующих событий для плагина Resizable приведены в табл. 18.8. Пример использования опции stop иллюстрирует листинг 18.3.4.

Таблица 18.8. События плагина Resizable

Опция	Событие	Описание
create	resizecreate	Наступает в момент инициализации
start	resizestart	Наступает при начале изменения размеров элемента
resize	resize	Происходит постоянно во время изменения размеров элемента
stop	resizestop	Наступает по окончании изменения размеров элемента

Листинг 1 8 .3 .4 . Использование плагина Resizable

<script type="text/javascript">
$(function(){
$("#resizable").resizable({ ghost: true,
stop: function(event, ui) {
alert("Событие "
+ event.type);
}
});
});
</script>

В примере из листинга 18.3.4 мы определили в опции stop callback-функцию, которая будет вызвана в момент окончания изменения размеров элемента. Функция может принимать два аргумента. Первый аргумент — это объект события, к свойству type которого можно легко обратиться. Теперь по окончании изменения размеров выбранного элемента мы получим окно предупреждения, где будет выведено название события, вызвавшего эту функцию.

Что касается второго аргумента, то это объект, в свойствах которого содержится весьма полезная информация. В примере из листинга 18.3.5 показано, как можно обратиться к некоторым свойствам этого объекта.

Листинг 1 8 .3 .5 . Использование плагина Resizable

<script
type="text/javascript">
$(function(){
$("#resizable").resizable({
ghost: true,
stop: function(event, ui)
{
alert("Начальные размеры: " + ui.originalSize.width + "x" +
ui.originalSize.height +
"px\nКонечные размеры:
" + ui.size.width +
"x" +
ui.size.height + "px");
}
});
});
</script>

В примере из листинга 18.3.5 мы обращаемся к свойствам объекта ui originalSize и size. Оба свойства также представляют собой объекты, в свойствах width и height которых сохраняются значения ширины и высоты начальных размеров элемента (originalSize) и его конечных размеров (size).

Перечислим основные свойства специального объекта ui:

❒ ui.helper — объект, представляющий изменяемый элемент;

❒ ui.size — объект, в свойствах width и height которого сохраняются текущие ширина и высота элемента;

❒ ui.originalSize — объект, в свойствах width и height которого сохраняются ширина и высота элемента до изменения его размеров;

❒ ui.position — объект, в свойствах top и left которого сохраняется текущее положение элемента;

❒ ui.originalPosition — объект, в свойствах top и left которого сохраняется положение элемента до изменения его размеров.

Кроме перечисленных возможностей, плагин имеет несколько методов, с помощью которых можно управлять им уже после инициализации. Пример использования метода .resizable(‘option’, optionName, [value]) приведен в листинге 18.3.6.

Листинг 1 8 .3 .6 . Использование плагина Resizable

<script type="text/javascript">
$(function(){
$("#resizable").resizable({
animate: true,
ghost: true,
animateDuration: 500
});
$("#getter").click(function(){
alert($("#resizable").resizable("option",
"animateDuration"));
});
$("#setter").click(function(){
$("#resizable").resizable("option",
"animateDuration", 3000);
});
});
</script>

В листинге 18.3.6 мы создаем кнопки с идентификаторами #getter и #setter, с которыми свяжем событие click. При щелчке мышью на кнопке #getter будем вызывать метод .resizable(‘option’, optionName, [value]) с двумя аргументами, получая, таким образом, текущее значение опции animateDuration. А при щелчке мышью на кнопке #setter вызовем тот же самый метод .resizable(‘option’, optionName, [value]), но уже с тремя аргументами. В качестве третьего аргумента передадим значение, которое мы хотим установить для опции animateDuration.

В табл. 18.9 приведены описания всех доступных методов плагина Resizable.

Таблица 18.9. Методы плагина Resizable

Метод	Описание
destroy .resizable(‘destroy’)	Полностью удаляет всю функциональность плагина Resizable. Возвращает элементы в состояние, предшествующее инициализации
disable .resizable(‘disable’)	Временно запрещает использование всей функциональности плагина. Вновь разрешить ее можно с помощью метода enable
enable .resizable(‘enable’)	Разрешает использование всей функциональности плагина, если ранее она была запрещена методом disable
option .resizable(‘option’, optionName, [value])	Устанавливает значение любой опции плагина после инициализации
option .resizable(‘option’, optionName)	С помощью этого метода можно получить значение любой опции плагина после инициализации
widget .resizable(‘widget’)	Обеспечивает доступ к объекту, который представляет собой элемент с возможностью изменения размеров

Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)

Популярное

Категории

Необходимо добавить возможность изменять размеры элемента (или элементов) DOM с помощью указателя мыши.

Решение

Обсуждение

Похожие посты:

Комментировать Cancel reply