jQuery UI API - Resizable Widget

Category

Interactions

Usage

Description:Use the mouse to change the size of an element.

Added in version:1.0

Dependencies:

Notes:The jQuery UI Resizable plugin makes selected elements resizable (meaning they have draggable resize handles). You can specify one or more handles, as well as the minimum and maximum width and height.

Additional notes:This widget requires some functional CSS, otherwise it will not work. If you create a custom theme, use the widget-specific CSS file as a starting point.

Quick Navigation

Options Methods Events

Options Type Description Default
alsoResize Selector or jQuery or Element One or more elements to be resized in sync with the resizable element.

Code example:

Initialize with the specifiedalsoResizeoption of the resizable:

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

After initialization, get or setalsoResizethe option:

// getter
var alsoResize = $( ".selector" ).resizable( "option", "alsoResize" );
 
// setter
$( ".selector" ).resizable( "option", "alsoResize", "#mirror" );
    
 false
animate Boolean After resizing, animate to the final size.

Code example:

Initialize with the specifiedanimateoption of the resizable:

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

After initialization, get or setanimatethe option:

// getter
var animate = $( ".selector" ).resizable( "option", "animate" );
 
// setter
$( ".selector" ).resizable( "option", "animate", true );
    
 false
animateDuration Number or String When usinganimatethe option, the duration of the animation.

Supports multiple types:

  • Number: Duration in milliseconds.
  • String: A named duration, such as"slow"or"fast"。

Code example:

Initialize with the specifiedanimateDurationoption of the resizable:

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

After initialization, get or setanimateDurationthe option:

// getter
var animateDuration = $( ".selector" ).resizable( "option", "animateDuration" );
 
// setter
$( ".selector" ).resizable( "option", "animateDuration", "fast" );
    
 "slow"
animateEasing String When usinganimatethe option to be usedEasings。

Code example:

Initialize with the specifiedanimateEasingoption of the resizable:

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

After initialization, get or setanimateEasingthe option:

// getter
var animateEasing = $( ".selector" ).resizable( "option", "animateEasing" );
 
// setter
$( ".selector" ).resizable( "option", "animateEasing", "easeOutBounce" );
    
 "swing"
aspectRatio Boolean or Number Whether the element should be constrained to a specific aspect ratio.

Supports multiple types:

  • Boolean: When set totrue, the element will maintain its original aspect ratio.
  • Number: Force the element to maintain a specific aspect ratio while resizing.

Code example:

Initialize with the specifiedaspectRatiooption of the resizable:

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

After initialization, get or setaspectRatiothe option:

// getter
var aspectRatio = $( ".selector" ).resizable( "option", "aspectRatio" );
 
// setter
$( ".selector" ).resizable( "option", "aspectRatio", true );
    
 false
autoHide Boolean Whether to hide the handles when the user's mouse is not hovering over the element.

Code example:

Initialize with the specifiedautoHideoption of the resizable:

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

After initialization, get or setautoHidethe option:

// getter
var autoHide = $( ".selector" ).resizable( "option", "autoHide" );
 
// setter
$( ".selector" ).resizable( "option", "autoHide", true );
    
 false
cancel Selector Prevents resizing from starting on the specified elements.

Code example:

Initialize with the specifiedcanceloption of the resizable:

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

After initialization, get or setcancelthe option:

// getter
var cancel = $( ".selector" ).resizable( "option", "cancel" );
 
// setter
$( ".selector" ).resizable( "option", "cancel", ".cancel" );
    
 "input, textarea, button, select, option"
containment Selector or Element or String Constrain resizing to within the bounds of the specified element or area.

Supports multiple types:

  • Selector: The resizable element will be contained within the bounds of the first element of the selector. If no element is found, containment is not set.
  • Element: The resizable element will be contained within the bounds of the element.
  • String: Possible values:"parent"、"document"。

Code example:

Initialize with the specifiedcontainmentoption of the resizable:

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

After initialization, get or setcontainmentthe option:

// getter
var containment = $( ".selector" ).resizable( "option", "containment" );
 
// setter
$( ".selector" ).resizable( "option", "containment", "parent" );
    
 false
delay Number The time in milliseconds after a mouse press until resizing begins. If this option is specified, resizing only starts after the mouse has been moved for longer than the time. This option can prevent unnecessary resizing when clicking on an element.

Code example:

Initialize with the specifieddelayoption of the resizable:

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

After initialization, get or setdelaythe option:

// getter
var delay = $( ".selector" ).resizable( "option", "delay" );
 
// setter
$( ".selector" ).resizable( "option", "delay", 150 );
    
 0
disabled Boolean If set totrue, the resizable is disabled.

Code example:

Initialize with the specifieddisabledoption of the resizable:

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

After initialization, get or setdisabledthe option:

// getter
var disabled = $( ".selector" ).resizable( "option", "disabled" );
 
// setter
$( ".selector" ).resizable( "option", "disabled", true );
    
 false
distance Number The distance in pixels that the mouse must move after a mouse press before resizing starts. If this option is specified, resizing only starts after the mouse has been moved beyond the distance. This option can prevent unnecessary resizing when clicking on an element.

Code example:

Initialize with the specifieddistanceoption of the resizable:

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

After initialization, get or setdistancethe option:

// getter
var distance = $( ".selector" ).resizable( "option", "distance" );
 
// setter
$( ".selector" ).resizable( "option", "distance", 30 );
    
 1
ghost Boolean If set totrue, a semi-transparent helper element is shown while resizing.

Code example:

Initialize with the specifiedghostoption of the resizable:

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

After initialization, get or setghostthe option:

// getter
var ghost = $( ".selector" ).resizable( "option", "ghost" );
 
// setter
$( ".selector" ).resizable( "option", "ghost", true );
    
 false
grid Array Align the resizable element to a grid, every x and y pixels. The array must be in the form[ x, y ]。

Code example:

Initialize with the specifiedgridoption of the resizable:

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

After initialization, get or setgridthe option:

// getter
var grid = $( ".selector" ).resizable( "option", "grid" );
 
// setter
$( ".selector" ).resizable( "option", "grid", [ 20, 10 ] );
    
 false
handles String or Object Handles that can be used for resizing.

Supports multiple types:

  • String: A comma-separated list of any of the following values: n, e, s, w, ne, se, sw, nw, all. The necessary handles are automatically generated by the plugin.
  • Object: Supports the following keys: { n, e, s, w, ne, se, sw, nw }. Any specified value should be a jQuery selector that matches a child element of the resizable to be used as a handle.

Notes:When generating your own handles, each handle must haveui-resizable-handleclass, or the appropriateappropriate ui-resizable-{direction}class, such as ui-resizable-s.

Code example:

Initialize with the specifiedhandlesoption of the resizable:

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

After initialization, get or sethandlesthe option:

// getter
var handles = $( ".selector" ).resizable( "option", "handles" );
 
// setter
$( ".selector" ).resizable( "option", "handles", "n, e, s, w" );
    
 "e, s, se"
helper String A class name to be added to a proxy element that outlines the resize during the dragging of a resize handle. Once the resize is complete, the original element is resized.

Code example:

Initialize with the specifiedhelperoption of the resizable:

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

After initialization, get or sethelperthe option:

// getter
var helper = $( ".selector" ).resizable( "option", "helper" );
 
// setter
$( ".selector" ).resizable( "option", "helper", "resizable-helper" );
    
 false
maxHeight Number The maximum height to which the resizable can be resized.

Code example:

Initialize with the specifiedmaxHeightoption of the resizable:

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

After initialization, get or setmaxHeightthe option:

// getter
var maxHeight = $( ".selector" ).resizable( "option", "maxHeight" );
 
// setter
$( ".selector" ).resizable( "option", "maxHeight", 300 );
    
 null
maxWidth Number The maximum width to which the resizable can be resized.

Code example:

Initialize with the specifiedmaxWidthoption of the resizable:

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

After initialization, get or setmaxWidththe option:

// getter
var maxWidth = $( ".selector" ).resizable( "option", "maxWidth" );
 
// setter
$( ".selector" ).resizable( "option", "maxWidth", 300 );
    
 null
minHeight Number The minimum height to which the resizable can be resized.

Code example:

Initialize with the specifiedminHeightoption of the resizable:

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

After initialization, get or setminHeightOptions:

// getter
var minHeight = $( ".selector" ).resizable( "option", "minHeight" );
 
// setter
$( ".selector" ).resizable( "option", "minHeight", 150 );
    
 10
minWidth Number The minimum width to which the resizable can be resized.

Code examples:

Initialize with the specifiedminWidthoptions for the resizable:

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

After initialization, get or setminWidthoptions:

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

Methods Returns Description
destroy() jQuery (plugin only) Completely remove the resizable functionality. This will return the element back to its pre-init state.
  • This method does not accept any arguments.

Code examples:

Invoke the destroy method:

$( ".selector" ).resizable( "destroy" );
    
disable() jQuery (plugin only) Disable the resizable.
  • This method does not accept any arguments.

Code examples:

Invoke the disable method:

$( ".selector" ).resizable( "disable" );
    
enable() jQuery (plugin only) Enable the resizable.
  • This method does not accept any arguments.

Code examples:

Invoke the enable method:

$( ".selector" ).resizable( "enable" );
    
option( optionName ) Object Gets the value currently associated with the specifiedoptionNameoption name.
  • optionName
    Type: String
    Description: The name of the option to get.

Code examples:

Invoke the method:

var isDisabled = $( ".selector" ).resizable( "option", "disabled" );
    
option() PlainObject Get an object containing key/value pairs that represent the current resizable options hash.
  • This method does not accept any arguments.

Code examples:

Invoke the method:

var options = $( ".selector" ).resizable( "option" );
    
option( optionName, value ) jQuery (plugin only) Sets the value of the resizable option associated with the specifiedoptionNameoption name.
  • optionName
    Type: String
    Description: The name of the option to set.
  • value
    Type: Object
    Description: The value to set for the option.

Code examples:

Invoke the method:

$( ".selector" ).resizable( "option", "disabled", true );
    
option( options ) jQuery (plugin only) Set one or more options for the resizable.
  • options
    Type: Object
    Description: The option-value pairs to set.

Code examples:

Invoke the method:

$( ".selector" ).resizable( "option", { disabled: true } );
    
widget() jQuery Returns ajQueryjQuery object containing the resizable element.
  • This method does not accept any arguments.

Code examples:

Invoke the widget method:

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

Events Type Description
create( event, ui ) resizecreate Triggered when the resizable is created.
  • event
    Type: Event
  • ui
    Type: Object

Note:uiThe object is empty, but is included for consistency with other events.

Code examples:

Initialize the resizable with the specified create callback:

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

Bind an event listener to the resizecreate event:

$( ".selector" ).on( "resizecreate", function( event, ui ) {} );
    
resize( event, ui ) resize Triggered while the resize handles are dragged during resizing.
  • event
    Type: Event
  • ui
    Type: Object
    • element
      Type: jQuery
      Description: A jQuery object representing the element to be resized.
    • helper
      Type: jQuery
      Description: A jQuery object representing the helper being resized.
    • originalElement
      Type: jQuery
      Description: A jQuery object representing the original element before it is wrapped.
    • originalPosition
      Type: Object
      Description: The position of the resizable before resizing, expressed as{ top, left }。
    • originalSize
      Type: Object
      Description: The size of the resizable before resizing, expressed as{ width, height }。
    • position
      Type: Object
      Description: The current position, expressed as{ top, left }。
    • size
      Type: Object
      Description: The current size, expressed as{ width, height }。

Code examples:

Initialize the resizable with the specified resize callback:

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

Bind an event listener to the resize event:

$( ".selector" ).on( "resize", function( event, ui ) {} );
    
start( event, ui ) resizestart Triggered when the resize operation starts.
  • event
    Type: Event
  • ui
    Type: Object
    • element
      Type: jQuery
      Description: A jQuery object representing the element to be resized.
    • helper
      Type: jQuery
      Description: A jQuery object representing the helper being resized.
    • originalElement
      Type: jQuery
      Description: A jQuery object representing the original element before it is wrapped.
    • originalPosition
      Type: Object
      Description: The position of the resizable before resizing, expressed as{ top, left }。
    • originalSize
      Type: Object
      Description: The size of the resizable before resizing, expressed as{ width, height }。
    • position
      Type: Object
      Description: The current position, expressed as{ top, left }。
    • size
      Type: Object
      Description: The current position, expressed as{ width, height }。

Code examples:

Initialize the resizable with the specified start callback:

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

Bind an event listener to the resizestart event:

$( ".selector" ).on( "resizestart", function( event, ui ) {} );
    
stop( event, ui ) resizestop Triggered when the resize operation stops.
  • event
    Type: Event
  • ui
    Type: Object
    • element
      Type: jQuery
      Description: A jQuery object representing the element to be resized.
    • helper
      Type: jQuery
      Description: A jQuery object representing the helper being resized.
    • originalElement
      Type: jQuery
      Description: A jQuery object representing the original element before it is wrapped.
    • originalPosition
      Type: Object
      Description: The position of the resizable before resizing, expressed as{ top, left }。
    • originalSize
      Type: Object
      Description: The size of the resizable before resizing, expressed as{ width, height }。
    • position
      Type: Object
      Description: The current position, expressed as{ top, left }。
    • size
      Type: Object
      Description: The current position, expressed as{ width, height }。

Code examples:

Initialize the resizable with the specified stop callback:

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

Bind an event listener to the resizestop event:

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

Examples

A simple jQuery UI Resizable Widget.

<!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>

Other extensions