Resizable Widget version added: 1.0
Description: Change the size of an element using the mouse.
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 min and max width and height.
Dependencies
Additional Notes:
- This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.
Options
alsoResizeType: Selector or jQuery or Element
false
Initialize the resizable with the alsoResize option specified:
1
|
|
Get or set the alsoResize option, after initialization:
1
2
3
4
5
|
|
animateType: Boolean
false
Initialize the resizable with the animate option specified:
1
|
|
Get or set the animate option, after initialization:
1
2
3
4
5
|
|
animateDurationType: Number or String
"slow"
animate
option.- Number: Duration in milliseconds.
- String: A named duration, such as
"slow"
or"fast"
.
Initialize the resizable with the animateDuration option specified:
1 |
|
Get or set the animateDuration option, after initialization:
1 2 3 4 5 |
|
animateEasingType: String
"swing"
Initialize the resizable with the animateEasing option specified:
1
|
|
Get or set the animateEasing option, after initialization:
1
2
3
4
5
|
|
aspectRatioType: Boolean or Number
false
- Boolean: When set to
true
, the element will maintain its original aspect ratio. - Number: Force the element to maintain a specific aspect ratio during resizing.
Initialize the resizable with the aspectRatio option specified:
1 |
|
Get or set the aspectRatio option, after initialization:
1 2 3 4 5 |
|
autoHideType: Boolean
false
Initialize the resizable with the autoHide option specified:
1
|
|
Get or set the autoHide option, after initialization:
1
2
3
4
5
|
|
cancelType: Selector
"input,textarea,button,select,option"
Initialize the resizable with the cancel option specified:
1
|
|
Get or set the cancel option, after initialization:
1
2
3
4
5
|
|
containmentType: Selector or Element or String
false
- Selector: The resizable element will be contained to the bounding box of the first element found by the selector. If no element is found, no containment will be set.
- Element: The resizable element will be contained to the bounding box of this element.
- String: Possible values:
"parent"
and"document"
.
Initialize the resizable with the containment option specified:
1 |
|
Get or set the containment option, after initialization:
1 2 3 4 5 |
|
delayType: Number
0
Initialize the resizable with the delay option specified:
1
|
|
Get or set the delay option, after initialization:
1
2
3
4
5
|
|
disabledType: Boolean
false
true
.Initialize the resizable with the disabled option specified:
1
|
|
Get or set the disabled option, after initialization:
1
2
3
4
5
|
|
distanceType: Number
1
Initialize the resizable with the distance option specified:
1
|
|
Get or set the distance option, after initialization:
1
2
3
4
5
|
|
ghostType: Boolean
false
true
, a semi-transparent helper element is shown for resizing.Initialize the resizable with the ghost option specified:
1
|
|
Get or set the ghost option, after initialization:
1
2
3
4
5
|
|
gridType: Array
false
[ x, y ]
.Initialize the resizable with the grid option specified:
1
|
|
Get or set the grid option, after initialization:
1
2
3
4
5
|
|
handlesType: String or Object
"e, s, se"
- String: A comma delimited list of any of the following: n, e, s, w, ne, se, sw, nw, all. The necessary handles will be auto-generated by the plugin.
- Object:
The following keys are supported: { n, e, s, w, ne, se, sw, nw }. The value of any specified should be a jQuery selector matching the child element of the resizable to use as that handle. If the handle is not a child of the resizable, you can pass in the DOMElement or a valid jQuery object directly.
Note: When generating your own handles, each handle must have the
ui-resizable-handle
class, as well as the appropriateui-resizable-{direction}
class, .e.g.,ui-resizable-s
.
Initialize the resizable with the handles option specified:
1 |
|
Get or set the handles option, after initialization:
1 2 3 4 5 |
|
helperType: String
false
Initialize the resizable with the helper option specified:
1
|
|
Get or set the helper option, after initialization:
1
2
3
4
5
|
|
maxHeightType: Number
null
Initialize the resizable with the maxHeight option specified:
1
|
|
Get or set the maxHeight option, after initialization:
1
2
3
4
5
|
|
maxWidthType: Number
null
Initialize the resizable with the maxWidth option specified:
1
|
|
Get or set the maxWidth option, after initialization:
1
2
3
4
5
|
|
minHeightType: Number
10
Initialize the resizable with the minHeight option specified:
1
|
|
Get or set the minHeight option, after initialization:
1
2
3
4
5
|
|
minWidthType: Number
10
Initialize the resizable with the minWidth option specified:
1
|
|
Get or set the minWidth option, after initialization:
1
2
3
4
5
|
|
Methods
destroy()
-
This method does not accept any arguments.
Invoke the destroy method:
1
|
|
disable()
-
This method does not accept any arguments.
Invoke the disable method:
1
|
|
enable()
-
This method does not accept any arguments.
Invoke the enable method:
1
|
|
option( optionName )Returns: Object
optionName
.-
optionNameType: StringThe name of the option to get.
Invoke the method:
1
|
|
option()Returns: PlainObject
-
This method does not accept any arguments.
Invoke the method:
1
|
|
option( optionName, value )
optionName
.-
optionNameType: StringThe name of the option to set.
-
valueType: ObjectA value to set for the option.
Invoke the method:
1
|
|
option( options )
-
optionsType: ObjectA map of option-value pairs to set.
Invoke the method:
1
|
|
widget()Returns: jQuery
jQuery
object containing the resizable element.-
This method does not accept any arguments.
Invoke the widget method:
1
|
|
Events
create( event, ui )Type: resizecreate
Initialize the resizable with the create callback specified:
1
2
3
|
|
Bind an event listener to the resizecreate event:
1
|
|
resize( event, ui )Type: resize
-
eventType: Event
-
uiType: Object
-
elementType: jQueryThe jQuery object representing the element to be resized
-
helperType: jQueryThe jQuery object representing the helper that's being resized
-
originalElementType: jQueryThe jQuery object representing the original element before it is wrapped
-
originalPositionType: ObjectThe position represented as
{ left, top }
before the resizable is resized -
originalSizeType: ObjectThe size represented as
{ width, height }
before the resizable is resized -
positionType: ObjectThe current position represented as
{ left, top }
-
sizeType: ObjectThe current size represented as
{ width, height }
-
Initialize the resizable with the resize callback specified:
1
2
3
|
|
Bind an event listener to the resize event:
1
|
|
start( event, ui )Type: resizestart
-
eventType: Event
-
uiType: Object
-
elementType: jQueryThe jQuery object representing the element to be resized
-
helperType: jQueryThe jQuery object representing the helper that's being resized
-
originalElementType: jQueryThe jQuery object representing the original element before it is wrapped
-
originalPositionType: ObjectThe position represented as
{ left, top }
before the resizable is resized -
originalSizeType: ObjectThe size represented as
{ width, height }
before the resizable is resized -
positionType: ObjectThe current position represented as
{ left, top }
-
sizeType: ObjectThe current size represented as
{ width, height }
-
Initialize the resizable with the start callback specified:
1
2
3
|
|
Bind an event listener to the resizestart event:
1
|
|
stop( event, ui )Type: resizestop
-
eventType: Event
-
uiType: Object
-
elementType: jQueryThe jQuery object representing the element to be resized
-
helperType: jQueryThe jQuery object representing the helper that's being resized
-
originalElementType: jQueryThe jQuery object representing the original element before it is wrapped
-
originalPositionType: ObjectThe position represented as
{ left, top }
before the resizable is resized -
originalSizeType: ObjectThe size represented as
{ width, height }
before the resizable is resized -
positionType: ObjectThe current position represented as
{ left, top }
-
sizeType: ObjectThe current size represented as
{ width, height }
-
Initialize the resizable with the stop callback specified:
1
2
3
|
|
Bind an event listener to the resizestop event:
1
|
|
Example:
A simple jQuery UI Resizable.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
|