jQuery UI API - виджет Resizable

Категория

Взаимодействия

Использование

Описание:Используйте мышь для изменения размера элемента.

Добавлено в версии:1.0

Зависимости:

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

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

Быстрая навигация

Параметры Методы Events

Параметры Type Описание Default
alsoResize Селектор, jQuery или Element Один или несколько элементов, размер которых изменяется синхронно с изменяемым по размеру элементом.

Пример кода:

Инициализировать с указаннымиalsoResizeопция resizable:

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

После инициализации получите или задайтеalsoResizeопцию:

// getter
var alsoResize = $( ".selector" ).resizable( "option", "alsoResize" );
 
// setter
$( ".selector" ).resizable( "option", "alsoResize", "#mirror" );
    
 false
animate Boolean После изменения размера анимировать до конечного размера.

Пример кода:

Инициализировать с указаннымиanimateопция resizable:

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

После инициализации получите или задайтеanimateопцию:

// getter
var animate = $( ".selector" ).resizable( "option", "animate" );
 
// setter
$( ".selector" ).resizable( "option", "animate", true );
    
 false
animateDuration Число или строка При использованииanimateопция, продолжительность анимации.

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

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

Пример кода:

Инициализировать с указаннымиanimateDurationопция resizable:

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

После инициализации получите или задайтеanimateDurationопцию:

// getter
var animateDuration = $( ".selector" ).resizable( "option", "animateDuration" );
 
// setter
$( ".selector" ).resizable( "option", "animateDuration", "fast" );
    
 "slow"
animateEasing String При использованииanimateиспользуемая опцияСглаживания。

Пример кода:

Инициализировать с указаннымиanimateEasingопция resizable:

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

После инициализации получите или задайтеanimateEasingопцию:

// getter
var animateEasing = $( ".selector" ).resizable( "option", "animateEasing" );
 
// setter
$( ".selector" ).resizable( "option", "animateEasing", "easeOutBounce" );
    
 "swing"
aspectRatio Boolean или Number Должен ли элемент быть ограничен определённым соотношением сторон.

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

  • Boolean: Если установлено вtrue, элемент сохранит своё исходное соотношение сторон.
  • Number: Принудительно сохранять определённое соотношение сторон элемента при изменении размера.

Пример кода:

Инициализировать с указаннымиaspectRatioопция resizable:

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

После инициализации получите или задайтеaspectRatioопцию:

// getter
var aspectRatio = $( ".selector" ).resizable( "option", "aspectRatio" );
 
// setter
$( ".selector" ).resizable( "option", "aspectRatio", true );
    
 false
autoHide Boolean Скрывать ли маркеры, когда курсор мыши пользователя не находится над элементом.

Пример кода:

Инициализировать с указаннымиautoHideопция resizable:

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

После инициализации получите или задайтеautoHideопцию:

// getter
var autoHide = $( ".selector" ).resizable( "option", "autoHide" );
 
// setter
$( ".selector" ).resizable( "option", "autoHide", true );
    
 false
отмена Селектор Запрещает начало изменения размера на указанных элементах.

Пример кода:

Инициализировать с указаннымиcancelопция resizable:

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

После инициализации получите или задайтеcancelопцию:

// getter
var cancel = $( ".selector" ).resizable( "option", "cancel" );
 
// setter
$( ".selector" ).resizable( "option", "cancel", ".cancel" );
    
 "input, textarea, button, select, option"
containment Селектор, элемент или строка Ограничивает изменение размера пределами указанного элемента или области.

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

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

Пример кода:

Инициализировать с указаннымиcontainmentопция resizable:

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

После инициализации получите или задайтеcontainmentопцию:

// getter
var containment = $( ".selector" ).resizable( "option", "containment" );
 
// setter
$( ".selector" ).resizable( "option", "containment", "parent" );
    
 false
delay Number Время в миллисекундах после нажатия кнопки мыши до начала изменения размера. Если эта опция указана, изменение размера начинается только после того, как мышь перемещается дольше этого времени. Эта опция может предотвратить ненужное изменение размера при щелчке по элементу.

Пример кода:

Инициализировать с указаннымиdelayопция resizable:

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

После инициализации получите или задайтеdelayопцию:

// getter
var delay = $( ".selector" ).resizable( "option", "delay" );
 
// setter
$( ".selector" ).resizable( "option", "delay", 150 );
    
 0
disabled Boolean Если установлено значениеtrue, изменение размера отключено.

Пример кода:

Инициализировать с указаннымиdisabledопция resizable:

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

После инициализации получите или задайтеdisabledопцию:

// getter
var disabled = $( ".selector" ).resizable( "option", "disabled" );
 
// setter
$( ".selector" ).resizable( "option", "disabled", true );
    
 false
distance Number Расстояние в пикселях, на которое мышь должна переместиться после нажатия кнопки мыши, прежде чем начнётся изменение размера. Если эта опция указана, изменение размера начинается только после того, как мышь переместится на расстояние, превышающее указанное. Эта опция может предотвратить ненужное изменение размера при щелчке по элементу.

Пример кода:

Инициализировать с указаннымиdistanceопция resizable:

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

После инициализации получите или задайтеdistanceопцию:

// getter
var distance = $( ".selector" ).resizable( "option", "distance" );
 
// setter
$( ".selector" ).resizable( "option", "distance", 30 );
    
 1
ghost Boolean Если установлено значениеtrue, во время изменения размера показывается полупрозрачный вспомогательный элемент.

Пример кода:

Инициализировать с указаннымиghostопция resizable:

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

После инициализации получите или задайтеghostопцию:

// getter
var ghost = $( ".selector" ).resizable( "option", "ghost" );
 
// setter
$( ".selector" ).resizable( "option", "ghost", true );
    
 false
grid Массив Выравнивает изменяемый элемент по сетке с шагом x и y пикселей. Массив должен иметь вид[ x, y ]。

Пример кода:

Инициализировать с указаннымиgridопция resizable:

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

После инициализации получите или задайтеgridопцию:

// getter
var grid = $( ".selector" ).resizable( "option", "grid" );
 
// setter
$( ".selector" ).resizable( "option", "grid", [ 20, 10 ] );
    
 false
handles Строка или объект Ручки, которые можно использовать для изменения размера.

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

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

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

Пример кода:

Инициализировать с указаннымиhandlesопция resizable:

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

После инициализации получите или задайтеhandlesопцию:

// getter
var handles = $( ".selector" ).resizable( "option", "handles" );
 
// setter
$( ".selector" ).resizable( "option", "handles", "n, e, s, w" );
    
 "e, s, se"
helper String Имя класса, добавляемое к прокси-элементу, который отображает контур изменения размера во время перетаскивания маркера изменения размера. После завершения изменения размера изменяется размер исходного элемента.

Пример кода:

Инициализировать с указаннымиhelperопция resizable:

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

После инициализации получите или задайтеhelperопцию:

// getter
var helper = $( ".selector" ).resizable( "option", "helper" );
 
// setter
$( ".selector" ).resizable( "option", "helper", "resizable-helper" );
    
 false
maxHeight Number Максимальная высота, до которой можно изменить размер resizable.

Пример кода:

Инициализировать с указаннымиmaxHeightопция resizable:

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

После инициализации получите или задайтеmaxHeightопцию:

// getter
var maxHeight = $( ".selector" ).resizable( "option", "maxHeight" );
 
// setter
$( ".selector" ).resizable( "option", "maxHeight", 300 );
    
 null
maxWidth Number Максимальная ширина, до которой можно изменить размер resizable.

Пример кода:

Инициализировать с указаннымиmaxWidthопция resizable:

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

После инициализации получите или задайтеmaxWidthопцию:

// getter
var maxWidth = $( ".selector" ).resizable( "option", "maxWidth" );
 
// setter
$( ".selector" ).resizable( "option", "maxWidth", 300 );
    
 null
minHeight Number Минимальная высота, до которой можно изменить размер resizable.

Пример кода:

Инициализировать с указаннымиminHeightопция resizable:

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

После инициализации получите или задайтеminHeightПараметры:

// getter
var minHeight = $( ".selector" ).resizable( "option", "minHeight" );
 
// setter
$( ".selector" ).resizable( "option", "minHeight", 150 );
    
 10
minWidth Number Минимальная ширина, до которой можно изменить размер resizable.

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

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

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

После инициализации получите или задайтеminWidthпараметрами:

// getter
var minWidth = $( ".selector" ).resizable( "option", "minWidth" );
 
// setter
$( ".selector" ).resizable( "option", "minWidth", 150 );
    
 10

Методы Возвращает Описание
destroy() jQuery (только плагин) Полностью удаляет функциональность resizable. Это вернёт элемент в состояние до инициализации.
  • Этот метод не принимает аргументов.

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

Вызовите метод destroy:

$( ".selector" ).resizable( "destroy" );
    
disable() jQuery (только плагин) Отключает resizable.
  • Этот метод не принимает аргументов.

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

Вызовите метод disable:

$( ".selector" ).resizable( "disable" );
    
enable() jQuery (только плагин) Включает resizable.
  • Этот метод не принимает аргументов.

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

Вызовите метод enable:

$( ".selector" ).resizable( "enable" );
    
option( optionName ) Object Получает значение, связанное в данный момент с указаннымoptionNameименем опции.
  • optionName
    Тип: String
    Описание: Имя опции, которую нужно получить.

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

Вызовите метод:

var isDisabled = $( ".selector" ).resizable( "option", "disabled" );
    
option() PlainObject Возвращает объект, содержащий пары ключ/значение, представляющие текущий хэш опций resizable.
  • Этот метод не принимает аргументов.

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

Вызовите метод:

var options = $( ".selector" ).resizable( "option" );
    
option( optionName, value ) jQuery (только плагин) Устанавливает значение опции resizable, связанной с указаннымoptionNameименем опции.
  • optionName
    Тип: String
    Описание: Имя опции, которую нужно установить.
  • value
    Тип: Object
    Описание: Значение, задаваемое для параметра.

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

Вызовите метод:

$( ".selector" ).resizable( "option", "disabled", true );
    
option( options ) jQuery (только плагин) Устанавливает одну или несколько опций для resizable.
  • options
    Тип: Object
    Описание: Пары «параметр — значение» для установки.

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

Вызовите метод:

$( ".selector" ).resizable( "option", { disabled: true } );
    
widget() jQuery ВозвращаетjQueryОбъект jQuery, содержащий элемент resizable.
  • Этот метод не принимает аргументов.

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

Вызовите метод widget:

var widget = $( ".selector" ).resizable( "widget" );
    

Events Type Описание
create( event, ui ) resizecreate Срабатывает при создании resizable.
  • event
    Тип: Event
  • ui
    Тип: Object

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

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

Инициализирует resizable с указанной callback-функцией create:

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

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

$( ".selector" ).on( "resizecreate", function( event, ui ) {} );
    
resize( event, ui ) resize Срабатывает, когда маркеры изменения размера перетаскиваются во время изменения размера.
  • event
    Тип: Event
  • ui
    Тип: Object
    • элемент
      Тип: jQuery
      Описание: объект jQuery, представляющий элемент, размер которого изменяется.
    • helper
      Тип: jQuery
      Описание: объект jQuery, представляющий вспомогательный элемент, размер которого изменяется.
    • originalElement
      Тип: jQuery
      Описание: объект jQuery, представляющий исходный элемент до его обертывания.
    • originalPosition
      Тип: Object
      Описание: позиция resizable перед изменением размера, выраженная как{ top, left }。
    • originalSize
      Тип: Object
      Описание: размер resizable перед изменением размера, выраженный как{ width, height }。
    • position
      Тип: Object
      Описание: текущая позиция, выраженная как{ top, left }。
    • size
      Тип: Object
      Описание: текущий размер, выраженный как{ width, height }。

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

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

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

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

$( ".selector" ).on( "resize", function( event, ui ) {} );
    
start( event, ui ) resizestart Срабатывает при начале операции изменения размера.
  • event
    Тип: Event
  • ui
    Тип: Object
    • элемент
      Тип: jQuery
      Описание: объект jQuery, представляющий элемент, размер которого изменяется.
    • helper
      Тип: jQuery
      Описание: объект jQuery, представляющий вспомогательный элемент, размер которого изменяется.
    • originalElement
      Тип: jQuery
      Описание: объект jQuery, представляющий исходный элемент до его обертывания.
    • originalPosition
      Тип: Object
      Описание: позиция resizable перед изменением размера, выраженная как{ top, left }。
    • originalSize
      Тип: Object
      Описание: размер resizable перед изменением размера, выраженный как{ width, height }。
    • position
      Тип: Object
      Описание: текущая позиция, выраженная как{ top, left }。
    • size
      Тип: Object
      Описание: текущая позиция, выраженная как{ width, height }。

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

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

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

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

$( ".selector" ).on( "resizestart", function( event, ui ) {} );
    
stop( event, ui ) resizestop Срабатывает при остановке операции изменения размера.
  • event
    Тип: Event
  • ui
    Тип: Object
    • элемент
      Тип: jQuery
      Описание: объект jQuery, представляющий элемент, размер которого изменяется.
    • helper
      Тип: jQuery
      Описание: объект jQuery, представляющий вспомогательный элемент, размер которого изменяется.
    • originalElement
      Тип: jQuery
      Описание: объект jQuery, представляющий исходный элемент до его обертывания.
    • originalPosition
      Тип: Object
      Описание: позиция resizable перед изменением размера, выраженная как{ top, left }。
    • originalSize
      Тип: Object
      Описание: размер resizable перед изменением размера, выраженный как{ width, height }。
    • position
      Тип: Object
      Описание: текущая позиция, выраженная как{ top, left }。
    • size
      Тип: Object
      Описание: текущая позиция, выраженная как{ width, height }。

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

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

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

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

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

Примеры

Простой виджет Resizable из jQuery UI.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>可调整尺寸小部件（Resizable Widget）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  #resizable {
    width: 100px;
    height: 100px;
    background: #ccc;
}    </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<div id="resizable"></div>
 
<script>
$( "#resizable" ).resizable();
</script>
 
</body>
</html>

Другие расширения