Ресайз-виджет

Ресайз-виджетверсия добавлена: 1.0

Описание: Изменение размера элемента с помощью мыши.

Быстрый переходПримеры

Методы

События

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

Тема

Ресайз-виджет использует фреймворк стилей jQuery UI, чтобы определить свой внешний вид. Если необходимы специфические стили для ресайза, следующие имена классов CSS могут быть использованы для переопределений или как ключи для classes параметра:

ui-resizable: Элемент, подлежащий изменению размера. Во время изменения размера к элементу добавляется класс ui-resizable-resizing. Когда установлен параметр autoHide, добавляется класс ui-resizable-autohide.
ui-resizable-handle: Одна из ручек для изменения размера, указанная с помощью параметра handles. Каждая ручка также будет иметь класс ui-resizable-{direction} в соответствии с её позицией.
ui-resizable-ghost: При использовании параметра ghost этот класс применяется к элементу-помощнику с эффектом полупрозрачности.
ui-resizable-helper: Когда используется параметр animate, но не указан параметр helper, этот класс добавляется к сгенерированному помощнику.

Зависимости

Дополнительные замечания:

Этот виджет требует функционального CSS, иначе он не будет работать. Если вы создаёте пользовательскую тему, используйте файл специфического CSS виджета в качестве отправной точки.

Параметры

alsoResize

Type: Selector or jQuery or Element

Default: false

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

Примеры кода:

Инициализация изменяемого элемента с указанным параметром alsoResize:

$( ".selector" ).resizable({
  alsoResize: "#mirror"
});

Получение или установка параметра alsoResize после инициализации:

// Getter
var alsoResize = $( ".selector" ).resizable( "option", "alsoResize" );
 
// Setter
$( ".selector" ).resizable( "option", "alsoResize", "#mirror" );

animate

Type: Boolean

Default: false

Анимирует до конечного размера после изменения размера.

Примеры кода:

Инициализация изменяемого элемента с указанным параметром animate:

$( ".selector" ).resizable({
  animate: true
});

Получение или установка параметра animate после инициализации:

// Getter
var animate = $( ".selector" ).resizable( "option", "animate" );
 
// Setter
$( ".selector" ).resizable( "option", "animate", true );

animateDuration

Type: Number or String

Default: "slow"

Продолжительность анимации при использовании параметра animate.

Поддерживается несколько типов:

Number: Продолжительность в миллисекундах.
String: Имя продолжительности, например "slow" или "fast".

Примеры кода:

Инициализация изменяемого элемента с указанным параметром animateDuration:

$( ".selector" ).resizable({
  animateDuration: "fast"
});

Получение или установка параметра animateDuration после инициализации:

// Getter
var animateDuration = $( ".selector" ).resizable( "option", "animateDuration" );
 
// Setter
$( ".selector" ).resizable( "option", "animateDuration", "fast" );

animateEasing

Type: String

Default: "swing"

Какой easing применять при использовании параметра animate.

Примеры кода:

Инициализация изменяемого элемента с указанным параметром animateEasing:

$( ".selector" ).resizable({
  animateEasing: "easeOutBounce"
});

Получение или установка параметра animateEasing после инициализации:

// Getter
var animateEasing = $( ".selector" ).resizable( "option", "animateEasing" );
 
// Setter
$( ".selector" ).resizable( "option", "animateEasing", "easeOutBounce" );

aspectRatio

Type: Boolean or Number

Default: false

Следует ли ограничивать элемент заданным соотношением сторон.

Поддерживается несколько типов:

Boolean: При установке в true, элемент будет поддерживать свое исходное соотношение сторон.
Number: Заставляет элемент поддерживать определенное соотношение сторон во время изменения размера.

Примеры кода:

Инициализация изменяемого элемента с указанным параметром aspectRatio:

$( ".selector" ).resizable({
  aspectRatio: true
});

Получение или установка параметра aspectRatio после инициализации:

// Getter
var aspectRatio = $( ".selector" ).resizable( "option", "aspectRatio" );
 
// Setter
$( ".selector" ).resizable( "option", "aspectRatio", true );

autoHide

Type: Boolean

Default: false

Следует ли скрывать маркеры, когда пользователь не наводит курсор на элемент.

Примеры кода:

Инициализация изменяемого элемента с указанным параметром autoHide:

$( ".selector" ).resizable({
  autoHide: true
});

Получение или установка параметра autoHide после инициализации:

// Getter
var autoHide = $( ".selector" ).resizable( "option", "autoHide" );
 
// Setter
$( ".selector" ).resizable( "option", "autoHide", true );

cancel

Type: Selector

Default: "input,textarea,button,select,option"

Предотвращает начало изменения размера на указанных элементах.

Примеры кода:

Инициализация изменяемого элемента с указанным параметром cancel:

$( ".selector" ).resizable({
  cancel: ".cancel"
});

Получение или установка параметра cancel после инициализации:

// Getter
var cancel = $( ".selector" ).resizable( "option", "cancel" );
 
// Setter
$( ".selector" ).resizable( "option", "cancel", ".cancel" );

classes

Type: Object

Default:

{
  "ui-resizable-se": "ui-icon ui-icon-gripsmall-diagonal-se"
}

Укажите дополнительные классы для добавления к элементам виджета. Любые классы, указанные в разделе Тема, могут использоваться в качестве ключей для переопределения их значения. Чтобы узнать больше об этом параметре, ознакомьтесь со статьей статьей о параметре classes.

Примеры кода:

Инициализация изменяемого элемента с указанным параметром classes, изменяющим тему для класса ui-resizable:

$( ".selector" ).resizable({
  classes: {
    "ui-resizable": "highlight"
  }
});

Получение или установка свойства параметра classes после инициализации, здесь чтение и изменение темы для класса ui-resizable:

// Getter
var themeClass = $( ".selector" ).resizable( "option", "classes.ui-resizable" );
 
// Setter
$( ".selector" ).resizable( "option", "classes.ui-resizable", "highlight" );

containment

Type: Selector or Element or String

Default: false

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

Поддерживается несколько типов:

Selector: Изменяемый элемент будет ограничен ограничивающим прямоугольником первого элемента, найденного селектором. Если элемент не найден, ограничение установлено не будет.
Element: Изменяемый элемент будет ограничен ограничивающим прямоугольником этого элемента.
String: Возможные значения: "parent" и "document".

Примеры кода:

Инициализация изменяемого элемента с указанным параметром containment:

$( ".selector" ).resizable({
  containment: "parent"
});

Получение или установка параметра containment после инициализации:

// Getter
var containment = $( ".selector" ).resizable( "option", "containment" );
 
// Setter
$( ".selector" ).resizable( "option", "containment", "parent" );

delay

Type: Number

Default: 0

Допуск, в миллисекундах, для начала изменения размера. Если указано, изменение размера не начнется до тех пор, пока мышь не будет перемещена за пределы продолжительности. Это может помочь предотвратить непреднамеренное изменение размера при щелчке по элементу. (версия устарела: 1.12)

Примеры кода:

Инициализация изменяемого элемента с указанным параметром delay:

$( ".selector" ).resizable({
  delay: 150
});

Получение или установка параметра delay после инициализации:

// Getter
var delay = $( ".selector" ).resizable( "option", "delay" );
 
// Setter
$( ".selector" ).resizable( "option", "delay", 150 );

disabled

Type: Boolean

Default: false

Отключает изменяемый элемент, если установлен в true.

Примеры кода:

Инициализация изменяемого элемента с указанным параметром disabled:

$( ".selector" ).resizable({
  disabled: true
});

Получение или установка параметра disabled после инициализации:

// Getter
var disabled = $( ".selector" ).resizable( "option", "disabled" );
 
// Setter
$( ".selector" ).resizable( "option", "disabled", true );

distance

Type: Number

Default: 1

Допуск, в пикселях, для начала изменения размера. Если указано, изменение размера не начнется до тех пор, пока мышь не будет перемещена за пределы расстояния. Это может помочь предотвратить непреднамеренное изменение размера при щелчке по элементу. (версия устарела: 1.12)

Примеры кода:

Инициализация изменяемого элемента с указанным параметром distance:

$( ".selector" ).resizable({
  distance: 30
});

Получение или установка параметра distance после инициализации:

// Getter
var distance = $( ".selector" ).resizable( "option", "distance" );
 
// Setter
$( ".selector" ).resizable( "option", "distance", 30 );

ghost

Type: Boolean

Default: false

Если установлено в true, для изменения размера отображается полупрозрачный вспомогательный элемент.

Примеры кода:

Инициализация изменяемого элемента с указанным параметром ghost:

$( ".selector" ).resizable({
  ghost: true
});

Получение или установка параметра ghost после инициализации:

// Getter
var ghost = $( ".selector" ).resizable( "option", "ghost" );
 
// Setter
$( ".selector" ).resizable( "option", "ghost", true );

grid

Type: Array

Default: false

Привязывает изменяемый элемент к сетке, каждые x и y пикселей. Значения массива: [ x, y ].

Примеры кода:

Инициализация изменяемого элемента с указанным параметром grid:

$( ".selector" ).resizable({
  grid: [ 20, 10 ]
});

Получение или установка параметра grid после инициализации:

// Getter
var grid = $( ".selector" ).resizable( "option", "grid" );
 
// Setter
$( ".selector" ).resizable( "option", "grid", [ 20, 10 ] );

Маркеры

Тип: Строка или Объект

По умолчанию: "e, s, se"

Какие маркеры можно использовать для изменения размера.

Поддерживаются несколько типов:

Строка: Запятая, разделяющий список из следующих: n, e, s, w, ne, se, sw, nw, all. Необходимые маркеры будут автоматически сгенерированы плагином.
Объект:
Поддерживаются следующие ключи: { n, e, s, w, ne, se, sw, nw }. Значение любого указанного ключа должно быть jQuery-селектором, соответствующим дочернему элементу изменявшегося размера для использования в качестве маркера. Если маркер не является дочерним элементом, можно передать DOM-элемент или допустимый jQuery-объект напрямую.

Примечание: При создании собственных маркеров каждый маркер должен иметь класс ui-resizable-handle, а также соответствующий класс ui-resizable-{direction}, например, ui-resizable-s.

Примеры кода:

Инициализируйте изменяемый размер с указанным параметром handles:

$( ".selector" ).resizable({
  handles: "n, e, s, w"
});

Получить или установить параметр handles, после инициализации:

// Getter
var handles = $( ".selector" ).resizable( "option", "handles" );
 
// Setter
$( ".selector" ).resizable( "option", "handles", "n, e, s, w" );

helper

Тип: Строка

По умолчанию: false

Имя класса, которое будет добавлено к элементу-прокси для выделения изменения размера во время перетаскивания маркера изменения размера. После завершения изменения размера размер исходного элемента устанавливается.

Примеры кода:

Инициализируйте изменяемый размер с указанным параметром helper:

$( ".selector" ).resizable({
  helper: "resizable-helper"
});

Получить или установить параметр helper, после инициализации:

// Getter
var helper = $( ".selector" ).resizable( "option", "helper" );
 
// Setter
$( ".selector" ).resizable( "option", "helper", "resizable-helper" );

maxHeight

Тип: Число

По умолчанию: null

Максимальная высота, до которой изменяемый размер должен быть разрешен.

Примеры кода:

Инициализируйте изменяемый размер с указанным параметром maxHeight:

$( ".selector" ).resizable({
  maxHeight: 300
});

Получить или установить параметр maxHeight, после инициализации:

// Getter
var maxHeight = $( ".selector" ).resizable( "option", "maxHeight" );
 
// Setter
$( ".selector" ).resizable( "option", "maxHeight", 300 );

maxWidth

Тип: Число

По умолчанию: null

Максимальная ширина, до которой изменяемый размер должен быть разрешен.

Примеры кода:

Инициализируйте изменяемый размер с указанным параметром maxWidth:

$( ".selector" ).resizable({
  maxWidth: 300
});

Получить или установить параметр maxWidth, после инициализации:

// Getter
var maxWidth = $( ".selector" ).resizable( "option", "maxWidth" );
 
// Setter
$( ".selector" ).resizable( "option", "maxWidth", 300 );

minHeight

Тип: Число

По умолчанию: 10

Минимальная высота, до которой изменяемый размер должен быть разрешен.

Примеры кода:

Инициализируйте изменяемый размер с указанным параметром minHeight:

$( ".selector" ).resizable({
  minHeight: 150
});

Получить или установить параметр minHeight, после инициализации:

// Getter
var minHeight = $( ".selector" ).resizable( "option", "minHeight" );
 
// Setter
$( ".selector" ).resizable( "option", "minHeight", 150 );

minWidth

Тип: Число

По умолчанию: 10

Минимальная ширина, до которой изменяемый размер должен быть разрешен.

Примеры кода:

Инициализируйте изменяемый размер с указанным параметром minWidth:

$( ".selector" ).resizable({
  minWidth: 150
});

Получить или установить параметр minWidth, после инициализации:

// Getter
var minWidth = $( ".selector" ).resizable( "option", "minWidth" );
 
// Setter
$( ".selector" ).resizable( "option", "minWidth", 150 );

Методы

destroy()Возвращает: jQuery (только для плагина)

Полностью удаляет функциональность изменения размера. Это вернёт элемент в состояние до инициализации.

Этот метод не принимает аргументы.

Примеры кода:

Вызвать метод destroy:

$( ".selector" ).resizable( "destroy" );

disable()Возвращает: jQuery (только для плагина)

Отключает изменение размера.

Этот метод не принимает аргументы.

Примеры кода:

Вызвать метод disable:

$( ".selector" ).resizable( "disable" );

enable()Возвращает: jQuery (только для плагина)

Включает изменение размера.

Этот метод не принимает аргументы.

Примеры кода:

Вызвать метод enable:

$( ".selector" ).resizable( "enable" );

instance()Возвращает: Объект

Получает экземпляр объекта изменения размера. Если у элемента нет связанного экземпляра, возвращается undefined.

В отличие от других методов виджета, instance() можно безопасно вызывать для любого элемента после загрузки плагина изменения размера.

Этот метод не принимает аргументы.

Примеры кода:

Вызвать метод instance:

$( ".selector" ).resizable( "instance" );

option( optionName )Возвращает: Объект

Получает значение, в настоящее время связанное с указанным параметром optionName.

Примечание: Для параметров, значения которых являются объектами, можно получить значение определенного ключа, используя нотацию точек. Например, "foo.bar" получит значение свойства bar параметра foo.

optionName

Тип: Строка

Имя параметра для получения.

Примеры кода:

Вызвать метод:

var isDisabled = $( ".selector" ).resizable( "option", "disabled" );

option()Возвращает: Объект

Получает объект, содержащий пары ключ/значение, представляющие текущий хэш параметров изменения размера.

Эта сигнатура не принимает аргументы.

Примеры кода:

Вызвать метод:

var options = $( ".selector" ).resizable( "option" );

option( optionName, value )Возвращает: jQuery (только для плагина)

Устанавливает значение параметра изменения размера, связанного с указанным параметром optionName.

Примечание: Для параметров, значения которых являются объектами, можно установить значение только одного свойства, используя нотацию точек для optionName. Например, "foo.bar" обновит только свойство bar параметра foo.

optionName

Тип: Строка

Имя параметра для установки.
value

Тип: Объект

Значение для установки параметра.

Примеры кода:

Вызвать метод:

$( ".selector" ).resizable( "option", "disabled", true );

option( options )Возвращает: jQuery (только для плагина)

Устанавливает один или несколько параметров для изменения размера.

options

Тип: Объект

Карта пар параметр-значение для установки.

Примеры кода:

Вызвать метод:

$( ".selector" ).resizable( "option", { disabled: true } );

События

create( event, ui )Тип: `resizecreate`

Срабатывает при создании resizable.

event

Тип: Event
ui

Тип: Объект

Примечание: Объект ui пустой, но включён для согласованности с другими событиями.

Примеры кода:

Инициализируйте resizable с указанным обратным вызовом create:

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

Привяжите обработчик событий к событию resizecreate:

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

resize( event, ui )Тип: `resize`

Это событие срабатывает во время изменения размера, при перетаскивании маркера изменения размера.

event

Тип: Event
ui

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

Примеры кода:

Инициализируйте resizable с указанным обратным вызовом resize:

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

Привяжите обработчик событий к событию resize:

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

Ограничьте изменение высоты 30-пиксельными приращениями:

$( ".selector" ).resizable({
  resize: function( event, ui ) {
    ui.size.height = Math.round( ui.size.height / 30 ) * 30;
  }
});

start( event, ui )Тип: `resizestart`

Это событие срабатывает в начале операции изменения размера.

event

Тип: Event
ui

Тип: Объект
- element
  
  Тип: jQuery
  
  Объект jQuery, представляющий изменяемый элемент
- helper
  
  Тип: jQuery
  
  Объект jQuery, представляющий вспомогательный элемент, который изменяется в размерах
- originalElement
  
  Тип: jQuery
  
  Объект jQuery, представляющий исходный элемент до обертывания
- originalPosition
  
  Тип: Объект
  
  Положение, представленное как { left, top } до изменения размера resizable
- originalSize
  
  Тип: Объект
  
  Размер, представленный как { width, height } до изменения размера resizable
- position
  
  Тип: Объект
  
  Текущее положение, представленное как { left, top }
- size
  
  Тип: Объект
  
  Текущий размер, представленный как { width, height }

Примеры кода:

Инициализируйте resizable с указанным обратным вызовом start:

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

Привяжите обработчик событий к событию resizestart:

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

stop( event, ui )Тип: `resizestop`

Это событие срабатывает в конце операции изменения размера.

event

Тип: Event
ui

Тип: Объект
- element
  
  Тип: jQuery
  
  Объект jQuery, представляющий изменяемый элемент
- helper
  
  Тип: jQuery
  
  Объект jQuery, представляющий вспомогательный элемент, который изменяется в размерах
- originalElement
  
  Тип: jQuery
  
  Объект jQuery, представляющий исходный элемент до обертывания
- originalPosition
  
  Тип: Объект
  
  Положение, представленное как { left, top } до изменения размера resizable
- originalSize
  
  Тип: Объект
  
  Размер, представленный как { width, height } до изменения размера resizable
- position
  
  Тип: Объект
  
  Текущее положение, представленное как { left, top }
- size
  
  Тип: Объект
  
  Текущий размер, представленный как { width, height }

Примеры кода:

Инициализируйте resizable с указанным обратным вызовом stop:

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

Привяжите обработчик событий к событию resizestop:

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

Пример:

Простой jQuery UI Resizable.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>resizable demo</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/smoothness/jquery-ui.css">
  <style>
  #resizable {
    width: 100px;
    height: 100px;
    background: #ccc;
}  </style>
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
  <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
</head>
<body>
 
<div id="resizable"></div>
 
<script>
$( "#resizable" ).resizable();
</script>
 
</body>
</html>

Ресайз-виджет