Вам бонус- начислено 1 монета за дневную активность. Сейчас у вас 1 монета

Масштабирование элементов - Взаимодействие Resizable

Лекция



Привет, Вы узнаете о том , что такое масштабирование элементов - взаимодействие resizable, Разберем основные их виды и особенности использования. Еще будет много подробных примеров и описаний. Для того чтобы лучше понимать что такое масштабирование элементов - взаимодействие resizable , настоятельно рекомендую прочитать все из категории Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend).

Взаимодействие 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 используются свойства, описанные в таблице ниже. Взаимодействие Resizable зависит от взаимодействия Draggable. Об этом говорит сайт https://intellect.icu . Это означает, что в дополнение к настройкам, приведенным в таблице, можно использовать настройки взаимодействия 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. Размеры содержащихся в нем элементов остаются неизменными. Что при этом происходит, показано на рисунке:

Масштабирование элементов - Взаимодействие Resizable

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

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

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

Масштабирование элементов - Взаимодействие Resizable

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

Можно ограничить пределы изменения размеров масштабируемых элементов, применив опции 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, и для одного из них определен нестандартный набор манипуляторов:

Масштабирование элементов - Взаимодействие Resizable

Прочтение данной статьи про масштабирование элементов - взаимодействие resizable позволяет сделать вывод о значимости данной информации для обеспечения качества и оптимальности процессов. Надеюсь, что теперь ты понял что такое масштабирование элементов - взаимодействие resizable и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)

Из статьи мы узнали кратко, но содержательно про масштабирование элементов - взаимодействие resizable
создано: 2016-10-11
обновлено: 2021-03-13
132371



Рейтиг 9 of 10. count vote: 2
Вы довольны ?:


Найди готовое или заработай

С нашими удобными сервисами без комиссии*

Как это работает? | Узнать цену?

Найти исполнителя
$0 / весь год.
  • У вас есть задание, но нет времени его делать
  • Вы хотите найти профессионала для выплнения задания
  • Возможно примерение функции гаранта на сделку
  • Приорететная поддержка
  • идеально подходит для студентов, у которых нет времени для решения заданий
Готовое решение
$0 / весь год.
  • Вы можите продать(исполнителем) или купить(заказчиком) готовое решение
  • Вам предоставят готовое решение
  • Будет предоставлено в минимальные сроки т.к. задание уже готовое
  • Вы получите базовую гарантию 8 дней
  • Вы можете заработать на материалах
  • подходит как для студентов так и для преподавателей
Я исполнитель
$0 / весь год.
  • Вы профессионал своего дела
  • У вас есть опыт и желание зарабатывать
  • Вы хотите помочь в решении задач или написании работ
  • Возможно примерение функции гаранта на сделку
  • подходит для опытных студентов так и для преподавателей



Комментарии


Оставить комментарий
Если у вас есть какое-либо предложение, идея, благодарность или комментарий, не стесняйтесь писать. Мы очень ценим отзывы и рады услышать ваше мнение.
To reply

Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)

Термины: Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)