Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Модуль 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>
Помощь сайту
Yandex-деньги: 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов