Масштабирование элементов

Веб-программирование --- jQuery UI --- Масштабирование элементов (взаимодействие Resizable)

Взаимодействие Resizable добавляет в элемент манипуляторы, перемещая которые, пользователь может масштабировать элемент путем изменения его размеров. Некоторые браузеры автоматически предоставляют такую возможность для текстовых областей, но взаимодействие Resizable обеспечивает возможность подобного масштабирования для любого элемента в документе. Пример применения данного вида взаимодействия, которое реализуется с помощью метода resizable(), приведен ниже:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css">
    <style type="text/css">
        #astor, #lily {text-align: center; width: 150px; float: left; margin: 20px}
        #astor img, #lily img {display: block; margin: auto}
    </style>
    <script type="text/javascript">
$(function() {
	
    $('#astor').resizable({
        alsoResize: "#astor img"
    });
	
});
    </script>
</head>
<body>
    <div id="astor" class="ui-widget">
        <div class="ui-widget-header">Астра</div>
        <div class="ui-widget-content" style="padding:10px">
             <img src="http://professorweb.ru/downloads/jquery/astor.png" />
        </div>
    </div>
    <div id="lily" class="ui-widget">
        <div class="ui-widget-header">Лилия</div>
        <div class="ui-widget-content" style="padding:10px">
             <img src="http://professorweb.ru/downloads/jquery/lily.png" />
        </div>
    </div>
</body>
</html>

Запустить пример

В этом примере создаются два элемента div, каждый из которых содержит элемент img и текст. В сценарии один из них выбирается, и к нему применяется метод resizable() (с использованием параметра alsoResize, который будет описан далее). Библиотека jQuery UI добавляет к выбранному элементу манипулятор, позволяющий изменять вертикальный и горизонтальный размеры элемента, как видно на рисунке. На рисунке элемент представлен с увеличенной высотой и уменьшенной шириной:

Использование манипулятора для изменения размеров элемента

Настройка взаимодействия Resizable

Для настройки взаимодействия Resizable используются свойства, описанные в таблице ниже. Взаимодействие Resizable зависит от взаимодействия Draggable. Это означает, что в дополнение к настройкам, приведенным в таблице, можно использовать настройки взаимодействия Draggable, в том числе такие, как delay, distance, grid и containment.

Свойства взаимодействия Resizable
Свойство	Описание
alsoResize	Селектор, используемый для выбора элементов, размеры которых должны изменяться одновременно с размерами элемента, к которому применено взаимодействие Resizable. Значение по умолчанию — false, оно означает отсутствие таких элементов
aspectRatio	Если значение этой опции равно true, то изменение размеров элемента будет происходить с сохранением пропорции соотношения сторон. Значение по умолчанию — true
autoHide	Если значение этой опции равно true, то манипуляторы становятся видимыми лишь тогда, когда указатель мыши располагается над элементом. Значение по умолчанию - false
ghost	Если значение этой опции равно true, то при изменении размеров элемента будут видны полупрозрачные контуры, отображающие новые размеры элемента. Значение по умолчанию — true
handles	Определяет, где будут располагаться манипуляторы. Поддерживаемые значения приведены далее
maxHeight	Определяет максимальную высоту, до которой можно изменить размеры элемента. Значение по умолчанию — null, оно означает отсутствие ограничений
maxWidth	Определяет максимальную ширину, до которой можно изменить размеры элемента. Значение по умолчанию — null
minHeight	Определяет минимальную высоту, до которой можно изменить размеры элемента
minWidth	Определяет минимальную высоту, до которой можно изменить размеры элемента

Одновременное изменение размеров других элементов

По моему мнению, наиболее употребительной при настройке взаимодействия Resizable является опция alsoResize. С ее помощью можно определить дополнительные элементы, размеры которых будут изменяться одновременно с размерами элемента, к которому был применен метод resizable(). Я использую эту опцию главным образом для того, чтобы обеспечить синхронное изменение размеров элементов вместе с размерами их родительских элементов.

Мы уже использовали эту возможность в предыдущем примере, определив одновременное изменение размеров элементов img и div. Прежде всего, посмотрим, что происходит, если опция alsoResize не используется. Соответствующий код приведен в примере ниже:

$(function() {
    $('#astor').resizable();
});

Если опция alsoResize не используется, то изменяются только размеры элемента div. Размеры содержащихся в нем элементов остаются неизменными. Что при этом происходит, показано на рисунке:

Изменение размеров элемента без изменения размеров его содержимого

Иногда именно такой результат и требуется получить, но лично я использую опцию alsoResize почти во всех случаях применения взаимодействия Resizable. В этом параметре мне нравится то, что выбор подходящих элементов не ограничивается содержимым того элемента, размеры которого изменяются. С помощью этой опции можно указать любой другой элемент, как показано в примере ниже:

$(function() {
	
    $('#astor').resizable({
        alsoResize: "img, #lily"
    });
	
});

В этом сценарии выбор элементов расширен с целью включения других элементов div и img. Таким образом, при изменении размеров одного элемента div jQuery UI будет изменять размеры сразу четырех элементов. Результат представлен на рисунке:

Одновременное изменение размеров нескольких элементов

Ограничение допустимых пределов для изменения размеров элементов

Можно ограничить пределы изменения размеров масштабируемых элементов, применив опции maxHeight, maxWidth, minHeight и minWidth. Значениями этих опций могут быть числа, выражающие количество пикселей, или null. Пример использования этих настроек приведен ниже:

$(function() {
	
    $('#astor').resizable({
        alsoResize: "#astor img",
        maxWidth: 200,
        maxHeight: 150
    });
	
});

По умолчанию для опций minHeight и minWidth используется значение 10 пикселей. При меньших значениях jQuery UI не сможет отобразить манипуляторы, а это означает, что пользователь не будет в состоянии вновь увеличить размеры элемента. Поэтому меньшие значения следует использовать с осторожностью.

Размещение манипуляторов

С помощью опции handles можно определить, какие края и углы разрешено перемещать для изменения размеров элемента. В качестве значения этой опции можно указать all (перемещаемыми являются все края и углы) или любую комбинацию компасных точек (n, е, s, w, ne, se, nw, sw), определяющих отдельные края и углы.

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

Пример использования опции handles приведен ниже:

$(function() {
	
    $('#astor').resizable({
        alsoResize: "#astor img"
    });
	
	$('#lily').resizable({
        alsoResize: "#lily img",
		handles: "n, s, e, w"
    });
	
});

В этом сценарии к обоим элементам div применено взаимодействие Resizable, и для одного из них определен нестандартный набор манипуляторов: