jQuery UI Изменяемый размер События изменения размера

Пользовательский интерфейс jQuery состоит из виджетов графического интерфейса пользователя, визуальных эффектов и тем, реализованных с использованием HTML, CSS и jQuery. jQuery UI отлично подходит для создания интерфейсов пользовательского интерфейса для веб-страниц. Событие изменения размера jQuery UI Resizable запускается во время операции изменения размера.

Синтаксис:

Инициализация изменяемого размера события изменения размера.

$( ".selector" ).resizable({
 resize: function( event, ui ) {}
});

• Привязка прослушивателя событий к событию изменения размера.

   $( ".selector").on("resize", function(event, ui) {});

• Ограничение изменения высоты до 27 пикселей.

   $( ".selector" ).изменяемый размер({
   изменить размер: функция (событие, пользовательский интерфейс) {
     ui.size.height = Math.round( ui.size.height / 27) * 27;
   }
  });

Параметры: принимает функцию обратного вызова с двумя параметрами.

событие: принимает значение типа события.

ui: принимает значения типа объекта, показанные ниже.

• element: объект jQuery, представляющий элемент, размер которого нужно изменить.
• helper: объект jQuery, представляющий помощника, размер которого изменяется.
• originalElement: объект jQuery, представляющий исходный элемент до его упаковки.
• originalPosition: позиция, представленная как {left, top} до изменения размера объекта
• originalSize: размер, представленный как {ширина, высота} до изменения размера изменяемого размера.
• position: текущая позиция, представленная как {left, top}. Значения могут быть изменены, чтобы изменить положение элемента. Полезно для пользовательской логики изменения размера.
• размер: Текущий размер, представленный как {ширина, высота}. Значения могут быть изменены, чтобы изменить положение элемента. Полезно для пользовательской логики изменения размера.

Ссылка на CDN: во-первых, добавьте сценарии пользовательского интерфейса jQuery, необходимые для вашего проекта.

<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css”>
<script src=”//code.jquery.com/jquery-1.12.4.js”></script>
<script src=”//code.jquery.com/ui/1.12.1/jquery-ui.js”></script>

Пример: этот пример демонстрирует события изменения размера пользовательского интерфейса jQuery.

Выход:

Ссылка: https://api.jqueryui.com/resizable/#event-resize