# Resizable Widget
Categories: [Interactions](http://www.css88.com/jquery-ui-api/category/interactions/ "View all posts in Interactions")
## version added: 1.0
**Description:** 使用鼠标改变一个元素的尺寸。
## QuickNav[Examples](#entry-examples)
### Options
+ [alsoResize](#option-alsoResize)
+ [animate](#option-animate)
+ [animateDuration](#option-animateDuration)
+ [animateEasing](#option-animateEasing)
+ [aspectRatio](#option-aspectRatio)
+ [autoHide](#option-autoHide)
+ [cancel](#option-cancel)
+ [containment](#option-containment)
+ [delay](#option-delay)
+ [disabled](#option-disabled)
+ [distance](#option-distance)
+ [ghost](#option-ghost)
+ [grid](#option-grid)
+ [handles](#option-handles)
+ [helper](#option-helper)
+ [maxHeight](#option-maxHeight)
+ [maxWidth](#option-maxWidth)
+ [minHeight](#option-minHeight)
+ [minWidth](#option-minWidth)
### Methods
+ [destroy](#method-destroy)
+ [disable](#method-disable)
+ [enable](#method-enable)
+ [option](#method-option)
+ [widget](#method-widget)
### Events
+ [create](#event-create)
+ [resize](#event-resize)
+ [start](#event-start)
+ [stop](#event-stop)
jQuery UI Resizable 插件使选定的内容可以调整大小(这以为着那么拥有一些可以拖动的手柄). 你可以指定一个或者多个操作手柄以及指定最小和最大宽度与高度.
### Dependencies
* [UI Core](/category/ui-core/)
* [Widget Factory](/jQuery.widget/)
* [Mouse Interaction](/mouse/)
### 其他注意事项：
* 这个widget需要一些功能性的CSS，否则将无法正常工作。 如果你建立一个自定义的主题，使用widget指定的CSS文件作为一个激活点。
## Options
### alsoResize**Type:** [Selector](http://api.jquery.com/Types/#Selector) or [jQuery](http://api.jquery.com/Types/#jQuery) or [Element](http://api.jquery.com/Types/#Element)
**Default:** `false`在重置元素尺寸大小的同时重置指定的一个或多个元素的尺寸大小。**Code examples:**
使用指定的 `alsoResize` 参数初始化resizable :
```
$( ".selector" ).resizable({ alsoResize: "#mirror" });
```
在初始化后设置或者获取 `alsoResize` 参数 :
```
// getter
var alsoResize = $( ".selector" ).resizable( "option", "alsoResize" );
// setter
$( ".selector" ).resizable( "option", "alsoResize", "#mirror" );
```
### animate**Type:** [Boolean](http://api.jquery.com/Types/#Boolean)
**Default:** `false`在调整大小后使用一段动画完成调整.**Code examples:**
使用指定的 `animate` 参数初始化resizable :
```
$( ".selector" ).resizable({ animate: true });
```
在初始化后设置或者获取 `animate` 参数 :
```
// getter
var animate = $( ".selector" ).resizable( "option", "animate" );
// setter
$( ".selector" ).resizable( "option", "animate", true );
```
### animateDuration**Type:** [Number](http://api.jquery.com/Types/#Number) or [String](http://api.jquery.com/Types/#String)
**Default:** `"slow"`当使用[`animate`](#option-animate)选项时，动画持续的时间。单位毫秒。**允许使用的值:**
* **Number**: 毫秒数。
* **String**: 一个表示持续时间的字符串，比如 `"slow"` or `"fast"`。
**Code examples:**
使用指定的 `animateDuration` 参数初始化resizable :
```
$( ".selector" ).resizable({ animateDuration: "fast" });
```
在初始化后设置或者获取 `animateDuration` 参数 :
```
// getter
var animateDuration = $( ".selector" ).resizable( "option", "animateDuration" );
// setter
$( ".selector" ).resizable( "option", "animateDuration", "fast" );
```
### animateEasing**Type:** [String](http://api.jquery.com/Types/#String)
**Default:** `"swing"`动画执行时的缓冲效果。当使用[`animate`](#option-animate)选项时，哪个[easing](/easings/) （缓冲函数）被应用。**Code examples:**
使用指定的 `animateEasing` 参数初始化resizable :
```
$( ".selector" ).resizable({ animateEasing: "easeOutBounce" });
```
在初始化后设置或者获取 `animateEasing` 参数 :
```
// getter
var animateEasing = $( ".selector" ).resizable( "option", "animateEasing" );
// setter
$( ".selector" ).resizable( "option", "animateEasing", "easeOutBounce" );
```
### aspectRatio**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) or [Number](http://api.jquery.com/Types/#Number)
**Default:** `false`该元素是否应限制在一个特定的比例进行缩放。**允许使用的值:**
* **Boolean**: 如果设置为`true`, 大小将按照原先的宽高比进行调整。
* **Number**: 强制元素调整大小时保持一个特定的宽高比。
**Code examples:**
使用指定的 `aspectRatio` 参数初始化resizable :
```
$( ".selector" ).resizable({ aspectRatio: true });
```
在初始化后设置或者获取 `aspectRatio` 参数 :
```
// getter
var aspectRatio = $( ".selector" ).resizable( "option", "aspectRatio" );
// setter
$( ".selector" ).resizable( "option", "aspectRatio", true );
```
### autoHide**Type:** [Boolean](http://api.jquery.com/Types/#Boolean)
**Default:** `false`如果设置为真, 将会自动隐藏调整手柄图标,除非鼠标移动到该元素上.**Code examples:**
使用指定的 `autoHide` 参数初始化resizable :
```
$( ".selector" ).resizable({ autoHide: true });
```
在初始化后设置或者获取 `autoHide` 参数 :
```
// getter
var autoHide = $( ".selector" ).resizable( "option", "autoHide" );
// setter
$( ".selector" ).resizable( "option", "autoHide", true );
```
### cancel**Type:** [Selector](http://api.jquery.com/Types/#Selector)
**Default:** `"input,textarea,button,select,option"`如果设置了选择器匹配,将拒绝对匹配元素的大小调整.**Code examples:**
使用指定的 `cancel` 参数初始化resizable :
```
$( ".selector" ).resizable({ cancel: ".cancel" });
```
在初始化后设置或者获取 `cancel` 参数 :
```
// getter
var cancel = $( ".selector" ).resizable( "option", "cancel" );
// setter
$( ".selector" ).resizable( "option", "cancel", ".cancel" );
```
### containment**Type:** [Selector](http://api.jquery.com/Types/#Selector) or [Element](http://api.jquery.com/Types/#Element) or [String](http://api.jquery.com/Types/#String)
**Default:** `false`使用指定的元素强制性限制大小调整的界限.**允许使用的值：**
* **Selector**:resizable元素将被限制在该选择器匹配的第一个元素的边界内。 如果没有匹配的元素，那么设置将不起作用。
* **Element**: resizable元素将被限制在这个元素的边界内。
* **String**: 可能的值： `"parent"` 和 `"document"`.
**Code examples:**
使用指定的 `containment` 参数初始化resizable :
```
$( ".selector" ).resizable({ containment: "parent" });
```
在初始化后设置或者获取 `containment` 参数 :
```
// getter
var containment = $( ".selector" ).resizable( "option", "containment" );
// setter
$( ".selector" ).resizable( "option", "containment", "parent" );
```
### delay**Type:** [Number](http://api.jquery.com/Types/#Number)
**Default:** `0`设定需要经过多少毫秒以后调整才会开始. 如果指定了该参数, 调整不会马上开始,除非鼠标调整动作已经持续了指定的时间.这可以防止误操作对元素进行了非预期的调整.**Code examples:**
使用指定的 `delay` 参数初始化resizable :
```
$( ".selector" ).resizable({ delay: 150 });
```
在初始化后设置或者获取 `delay` 参数 :
```
// getter
var delay = $( ".selector" ).resizable( "option", "delay" );
// setter
$( ".selector" ).resizable( "option", "delay", 150 );
```
### disabled**Type:** [Boolean](http://api.jquery.com/Types/#Boolean)
**Default:** `false`如果设置为 `true` 将禁止resizable（缩放）。**Code examples:**
使用指定的 `disabled` 参数初始化resizable :
```
$( ".selector" ).resizable({ disabled: true });
```
在初始化后设置或者获取 `disabled` 参数 :
```
// getter
var disabled = $( ".selector" ).resizable( "option", "disabled" );
// setter
$( ".selector" ).resizable( "option", "disabled", true );
```
### distance**Type:** [Number](http://api.jquery.com/Types/#Number)
**Default:** `1`设定调整操作需要移动多少个像素后调整才会开始. 如果指定了该参数, 调整不会马上开始,直到鼠标移动了指定的像素后.这可以防止误操作对元素进行了非预期的调整.**Code examples:**
使用指定的 `distance` 参数初始化resizable :
```
$( ".selector" ).resizable({ distance: 30 });
```
在初始化后设置或者获取 `distance` 参数 :
```
// getter
var distance = $( ".selector" ).resizable( "option", "distance" );
// setter
$( ".selector" ).resizable( "option", "distance", 30 );
```
### ghost**Type:** [Boolean](http://api.jquery.com/Types/#Boolean)
**Default:** `false`如果设置为`true`, 将会在调整过程中看到一个半透明的辅助元素。**Code examples:**
使用指定的 `ghost` 参数初始化resizable :
```
$( ".selector" ).resizable({ ghost: true });
```
在初始化后设置或者获取 `ghost` 参数 :
```
// getter
var ghost = $( ".selector" ).resizable( "option", "ghost" );
// setter
$( ".selector" ).resizable( "option", "ghost", true );
```
### grid**Type:** [Array](http://api.jquery.com/Types/#Array)
**Default:** `false`设置调整x和y改变的像素. 调整大小的元素到网格，每x和y个像素。数组值: [x, y]。**Code examples:**
使用指定的 `grid` 参数初始化resizable :
```
$( ".selector" ).resizable({ grid: [ 20, 10 ] });
```
在初始化后设置或者获取 `grid` 参数 :
```
// getter
var grid = $( ".selector" ).resizable( "option", "grid" );
// setter
$( ".selector" ).resizable( "option", "grid", [ 20, 10 ] );
```
### handles**Type:** [String](http://api.jquery.com/Types/#String) or [Object](http://api.jquery.com/Types/#Object)
**Default:** `"e, s, se"`哪个处理程序被用来resizing（缩放大小）。**允许使用的值：**
* **String**: 如果指定一个字符串, 应该是下列清单中的组合:'n, e, s, w, ne, se, sw, nw, all',每项之间使用逗号分隔. 必要的手柄将由插件自动生成.
* **Object**:
如果指定一个对象, 要支持下面的键值: { n, e, s, w, ne, se, sw, nw }. 指定的用户调整手柄的任何值应该是一个jQuery选择器匹配的子元素. 如果该操作柄不是resizable的一个子元素, 你可以提供一个有效的DOMElement 或者直接提供一个jQuery对象.
_注意: 当生成您自己的手柄，每个手柄必须有`ui-resizable-handle` 样式类，以及适当的`ui-resizable-{direction}`样式类，例如`ui-resizable-s`。_
**Code examples:**
使用指定的 `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" );
```
### helper**Type:** [String](http://api.jquery.com/Types/#String)
**Default:** `false`为大小调整时的代理元素指定一个css样式.当调整完成时,这些元素将回到它以前的状态.**Code examples:**
使用指定的 `helper` 参数初始化resizable :
```
$( ".selector" ).resizable({ helper: "resizable-helper" });
```
在初始化后设置或者获取 `helper` 参数 :
```
// getter
var helper = $( ".selector" ).resizable( "option", "helper" );
// setter
$( ".selector" ).resizable( "option", "helper", "resizable-helper" );
```
### maxHeight**Type:** [Number](http://api.jquery.com/Types/#Number)
**Default:** `null`为大小调整设定一个最大高度.**Code examples:**
使用指定的 `maxHeight` 参数初始化resizable :
```
$( ".selector" ).resizable({ maxHeight: 300 });
```
在初始化后设置或者获取 `maxHeight` 参数 :
```
// getter
var maxHeight = $( ".selector" ).resizable( "option", "maxHeight" );
// setter
$( ".selector" ).resizable( "option", "maxHeight", 300 );
```
### maxWidth**Type:** [Number](http://api.jquery.com/Types/#Number)
**Default:** `null`为大小调整设定一个最大宽度.**Code examples:**
使用指定的 `maxWidth` 参数初始化resizable :
```
$( ".selector" ).resizable({ maxWidth: 300 });
```
在初始化后设置或者获取 `maxWidth` 参数 :
```
// getter
var maxWidth = $( ".selector" ).resizable( "option", "maxWidth" );
// setter
$( ".selector" ).resizable( "option", "maxWidth", 300 );
```
### minHeight**Type:** [Number](http://api.jquery.com/Types/#Number)
**Default:** `10`为大小调整设定一个最小高度.**Code examples:**
使用指定的 `minHeight` 参数初始化resizable :
```
$( ".selector" ).resizable({ minHeight: 150 });
```
在初始化后设置或者获取 `minHeight` 参数 :
```
// getter
var minHeight = $( ".selector" ).resizable( "option", "minHeight" );
// setter
$( ".selector" ).resizable( "option", "minHeight", 150 );
```
### minWidth**Type:** [Number](http://api.jquery.com/Types/#Number)
**Default:** `10`为大小调整设定一个最小宽度.**Code examples:**
使用指定的 `minWidth` 参数初始化resizable :
```
$( ".selector" ).resizable({ minWidth: 150 });
```
在初始化后设置或者获取 `minWidth` 参数 :
```
// getter
var minWidth = $( ".selector" ).resizable( "option", "minWidth" );
// setter
$( ".selector" ).resizable( "option", "minWidth", 150 );
```
## Methods
### destroy()
完全移除调整功能. 这将使元素返回到之前的初始化状态.
* 这个方法不接受任何参数。
**Code examples:**
调用 destroy 方法：
```
$( ".selector" ).resizable( "destroy" );
```
### disable()
关闭resizable.
* 这个方法不接受任何参数。
**Code examples:**
调用 disable 方法：
```
$( ".selector" ).resizable( "disable" );
```
### enable()
打开resizable.
* 这个方法不接受任何参数。
**Code examples:**
调用 enable 方法：
```
$( ".selector" ).resizable( "enable" );
```
### option( optionName )Returns: [Object](http://api.jquery.com/Types/#Object)
通过指定的`optionName`，获取当前关联的值。
* **optionName**Type: [String](http://api.jquery.com/Types/#String)要获取值的选项名
**Code examples:**
调用这个方法：
```
var isDisabled = $( ".selector" ).resizable( "option", "disabled" );
```
### option()Returns: [PlainObject](http://api.jquery.com/Types/#PlainObject)
获取一个对象，它包含表示当前resizable的选项hash的键/值对。
* 这个方法不接受任何参数。
**Code examples:**
调用这个方法：
```
var options = $( ".selector" ).resizable( "option" );
```
### option( optionName, value )
通过指定的`optionName`，设置resizable的相关选项值。
* **optionName**Type: [String](http://api.jquery.com/Types/#String)要设置值的选项名。
* **value**Type: [Object](http://api.jquery.com/Types/#Object)要设置选项的值。
**Code examples:**
调用这个方法：
```
$( ".selector" ).resizable( "option", "disabled", true );
```
### option( options )
为resizable设置一个或多个选项。
* **options**Type: [Object](http://api.jquery.com/Types/#Object)设置的选项/值对的对象。
**Code examples:**
调用这个方法：
```
$( ".selector" ).resizable( "option", { disabled: true } );
```
### widget()Returns: [jQuery](http://api.jquery.com/Types/#jQuery)
返回一个`jQuery`，它包含了resizable元素。
* 这个方法不接受任何参数。
**Code examples:**
调用 widget 方法：
```
var widget = $( ".selector" ).resizable( "widget" );
```
## Events
### create( event, ui )Type: `resizecreate`
此事件会在resizable创建时触发。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
_注意：`ui` 对象是空对象，包括是为了和其他事件的一致性。_
**Code examples:**
使用指定的 create 回调初始化一个resizable：
```
$( ".selector" ).resizable({
create: function( event, ui ) {}
});
```
绑定一个事件监听到resizecreate事件：
```
$( ".selector" ).on( "resizecreate", function( event, ui ) {} );
```
### resize( event, ui )Type: `resize`
这个事件将在拖动手柄进行调整时触发.
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
* **element**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一个jQuery对象代表被 resized 的元素。
* **helper**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一个jQuery对象代表被resized元素的助手。
* **originalElement**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一个jQuery对象代表被包裹前原先的元素。
* **originalPosition**Type: [Object](http://api.jquery.com/Types/#Object)resizable元素被resized（缩放）前的CSS的position（位置）对象，如`{ left, top }` 。
* **originalSize**Type: [Object](http://api.jquery.com/Types/#Object)resizable元素被resized（缩放）前的尺寸对象，如`{ width, height }`。
* **position**Type: [Object](http://api.jquery.com/Types/#Object)当前可resizable（缩放）元素的CSS的position（位置）对象，如{ top, left }。
* **size**Type: [Object](http://api.jquery.com/Types/#Object)当前可resizable（缩放）元素的尺寸对象，`{ width, height }`。
**Code examples:**
使用指定的 resize 回调初始化一个resizable：
```
$( ".selector" ).resizable({
resize: function( event, ui ) {}
});
```
绑定一个事件监听到resize事件：
```
$( ".selector" ).on( "resize", function( event, ui ) {} );
```
### start( event, ui )Type: `resizestart`
这个事件将在调整操作开始时触发.
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
* **element**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一个jQuery对象代表被 resized 的元素。
* **helper**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一个jQuery对象代表被resized元素的助手。
* **originalElement**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一个jQuery对象代表被包裹前原先的元素。
* **originalPosition**Type: [Object](http://api.jquery.com/Types/#Object)resizable元素被resized（缩放）前的CSS的position（位置）对象，如`{ left, top }` 。
* **originalSize**Type: [Object](http://api.jquery.com/Types/#Object)resizable元素被resized（缩放）前的尺寸对象，如`{ width, height }`。
* **position**Type: [Object](http://api.jquery.com/Types/#Object)当前可resizable（缩放）元素的CSS的position（位置）对象，如{ top, left }。
* **size**Type: [Object](http://api.jquery.com/Types/#Object)当前可resizable（缩放）元素的尺寸对象，`{ width, height }`。
**Code examples:**
使用指定的 start 回调初始化一个resizable：
```
$( ".selector" ).resizable({
start: function( event, ui ) {}
});
```
绑定一个事件监听到 resizestart 事件：
```
$( ".selector" ).on( "resizestart", function( event, ui ) {} );
```
### stop( event, ui )Type: `resizestop`
这个事件将在调整操作结束后触发.
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
* **element**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一个jQuery对象代表被 resized 的元素。
* **helper**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一个jQuery对象代表被resized元素的助手。
* **originalElement**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一个jQuery对象代表被包裹前原先的元素。
* **originalPosition**Type: [Object](http://api.jquery.com/Types/#Object)resizable元素被resized（缩放）前的CSS的position（位置）对象，如`{ left, top }` 。
* **originalSize**Type: [Object](http://api.jquery.com/Types/#Object)resizable元素被resized（缩放）前的尺寸对象，如`{ width, height }`。
* **position**Type: [Object](http://api.jquery.com/Types/#Object)当前可resizable（缩放）元素的CSS的position（位置）对象，如{ top, left }。
* **size**Type: [Object](http://api.jquery.com/Types/#Object)当前可resizable（缩放）元素的尺寸对象，`{ width, height }`。
**Code examples:**
使用指定的 stop 回调初始化一个resizable：
```
$( ".selector" ).resizable({
stop: function( event, ui ) {}
});
```
绑定一个事件监听到 resizestop 事件：
```
$( ".selector" ).on( "resizestop", function( event, ui ) {} );
```
## Example:
#### A simple jQuery UI Resizable.
```
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>resizable demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style>
#resizable {
width: 100px;
height: 100px;
background: #ccc;
} </style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<div id="resizable"></div>
<script>
$( "#resizable" ).resizable();
</script>
</body>
</html>
```
- 索引
- Effects
- .addClass()
- Blind Effect
- Bounce Effect
- Clip Effect
- Color Animation
- Drop Effect
- Easings
- .effect()
- Explode Effect
- Fade Effect
- Fold Effect
- .hide()
- Highlight Effect
- Puff Effect
- Pulsate Effect
- .removeClass()
- Scale Effect
- Shake Effect
- .show()
- Size Effect
- Slide Effect
- .switchClass()
- .toggle()
- .toggleClass()
- Transfer Effect
- Effect Core
- .addClass()
- Color Animation
- .effect()
- .hide()
- .removeClass()
- .show()
- .switchClass()
- .toggle()
- .toggleClass()
- Interactions
- Draggable Widget
- Droppable Widget
- Mouse Interaction
- Resizable Widget
- Resizable Widget
- Selectable Widget
- Sortable Widget
- Method Overrides
- .addClass()
- .focus()
- .hide()
- .position()
- .removeClass()
- .show()
- .toggle()
- .toggleClass()
- Methods
- .disableSelection()
- .effect()
- .enableSelection()
- .focus()
- .hide()
- .position()
- .removeUniqueId()
- .scrollParent()
- .show()
- .toggle()
- .uniqueId()
- .zIndex()
- Selectors
- :data() Selector
- :focusable Selector
- :tabbable Selector
- Theming
- CSS 框架（CSS Framework）
- Icons
- Stacking Elements
- UI Core
- :data() Selector
- .disableSelection()
- .enableSelection()
- .focus()
- :focusable Selector
- .removeUniqueId()
- .scrollParent()
- :tabbable Selector
- .uniqueId()
- .zIndex()
- Utilities
- Easings
- Widget Factory
- Widget Plugin Bridge
- Mouse Interaction
- .position()
- Widgets
- Accordion Widget
- Autocomplete Widget
- Button Widget
- Datepicker Widget
- Dialog Widget
- Menu Widget
- Progressbar Widget
- Slider Widget
- Spinner Widget
- Tabs Widget
- Tooltip Widget