部件

动画

UI/API/1.7/Resizable

概述
参数
事件
方法
主题

jQuery UI Resizable

jQuery UI Resizable 插件使选定的内容可以调整大小(这以为着那么拥有一些可以拖动的手柄). 你可以指定一个或者多个操作手柄以及指定最小和最大宽度与高度.

所有的回调函数(start, stop, resize)接受两个参数: 浏览器事件和ui对象, 此对象请查看下面的文档 :

ui.helper - 一个jQuery类型的辅助元素对象
ui.originalPosition - 开始重设大小之前的{top, left}
ui.originalSize - 开始重设大小之前的{width, height}
ui.position - 当前的{top, left}
ui.size - 当前的{width, height}

其他附加文件

UI Core

一个简单的 jQuery UI Resizable.

$("#resizable").resizable();

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="ui/ui.core.js"></script>
  <script type="text/javascript" src="ui/ui.resizable.js"></script>
  <style type="text/css">
    #resizable { width: 100px; height: 100px; background: silver; }
  </style>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#resizable").resizable();
  });
  </script>
</head>
<body style="font-size:62.5%;">
  
<div id="resizable"></div>

</body>
</html>

alsoResize

类型:

Selector, jQuery, Element

默认值:

false

在重置大小的同时重置这些元素的大小.
代码示例
使用指定的alsoResize参数初始化一个resizable.
```
$('.selector').resizable({ alsoResize: '.other' });
```
在初始化后设置或者获取alsoResize参数.
```
//获取
var alsoResize = $('.selector').resizable('option', 'alsoResize');
//设置
$('.selector').resizable('option', 'alsoResize', '.other');
```
animate

类型:

Boolean

默认值:

false

在调整大小后使用一段动画完成调整.
代码示例
使用指定的animate参数初始化一个resizable.
```
$('.selector').resizable({ animate: true });
```
在初始化后设置或者获取animate参数.
```
//获取
var animate = $('.selector').resizable('option', 'animate');
//设置
$('.selector').resizable('option', 'animate', true);
```
animateDuration

类型:

Integer, String

默认值:

'slow'

动画持续的时间.单位毫秒,也可使用允许的字符串值: 'slow', 'normal', 'fast'.
代码示例
使用指定的animateDuration参数初始化一个resizable.
```
$('.selector').resizable({ animateDuration: 500 });
```
在初始化后设置或者获取animateDuration参数.
```
//获取
var animateDuration = $('.selector').resizable('option', 'animateDuration');
//设置
$('.selector').resizable('option', 'animateDuration', 500);
```

animateEasing

类型:: String
默认值:: 'swing'

动画的简单效果.

代码示例

使用指定的animateEasing参数初始化一个resizable.

$('.selector').resizable({ animateEasing: 'swing' });

在初始化后设置或者获取animateEasing参数.

//获取
var animateEasing = $('.selector').resizable('option', 'animateEasing');
//设置
$('.selector').resizable('option', 'animateEasing', 'swing');

aspectRatio

类型:

Boolean, Float

默认值:

false

如果设置为真, 大小将按照原先的宽高比进行调整. 另外也可以自定义一个比值, 譬如 9 / 16, 或者 0.5.
代码示例
使用指定的aspectRatio参数初始化一个resizable.
```
$('.selector').resizable({ aspectRatio: .75 });
```
在初始化后设置或者获取aspectRatio参数.
```
//获取
var aspectRatio = $('.selector').resizable('option', 'aspectRatio');
//设置
$('.selector').resizable('option', 'aspectRatio', .75);
```
autoHide

类型:

Boolean

默认值:

false

如果设置为真, 将会自动隐藏调整手柄图标,除非鼠标移动到该元素上.
代码示例
使用指定的autoHide参数初始化一个resizable.
```
$('.selector').resizable({ autoHide: true });
```
在初始化后设置或者获取autoHide参数.
```
//获取
var autoHide = $('.selector').resizable('option', 'autoHide');
//设置
$('.selector').resizable('option', 'autoHide', true);
```
cancel

类型:

Selector

默认值:

':input,option'

如果设置了选择器匹配,将拒绝对匹配元素的大小调整.
代码示例
使用指定的cancel参数初始化一个resizable.
```
$('.selector').resizable({ cancel: ':input,option' });
```
在初始化后设置或者获取cancel参数.
```
//获取
var cancel = $('.selector').resizable('option', 'cancel');
//设置
$('.selector').resizable('option', 'cancel', ':input,option');
```
containment

类型:

String, Element, Selector

默认值:

false

使用指定的元素强制性限制大小调整的界限. 允许使用的值: 'parent', 'document', 一个DOMElement, 或者一个 Selector.
代码示例
使用指定的containment参数初始化一个resizable.
```
$('.selector').resizable({ containment: 'parent' });
```
在初始化后设置或者获取containment参数.
```
//获取
var containment = $('.selector').resizable('option', 'containment');
//设置
$('.selector').resizable('option', 'containment', 'parent');
```
delay

类型:

Integer

默认值:

0

设定需要经过多少毫秒以后调整才会开始. 如果指定了该参数, 调整不会马上开始,除非鼠标调整动作已经持续了指定的时间.这可以防止误操作对元素进行了非预期的调整.
代码示例
使用指定的delay参数初始化一个resizable.
```
$('.selector').resizable({ delay: 20 });
```
在初始化后设置或者获取delay参数.
```
//获取
var delay = $('.selector').resizable('option', 'delay');
//设置
$('.selector').resizable('option', 'delay', 20);
```
distance

类型:

Integer

默认值:

1

设定调整操作需要移动多少个像素后调整才会开始. 如果指定了该参数, 调整不会马上开始,直到鼠标移动了指定的像素后.这可以防止误操作对元素进行了非预期的调整.
代码示例
使用指定的distance参数初始化一个resizable.
```
$('.selector').resizable({ distance: 20 });
```
在初始化后设置或者获取distance参数.
```
//获取
var distance = $('.selector').resizable('option', 'distance');
//设置
$('.selector').resizable('option', 'distance', 20);
```
ghost

类型:

Boolean

默认值:

false

如果设置为true, 将会在调整过程中看到一个半透明的辅助元素.
代码示例
使用指定的ghost参数初始化一个resizable.
```
$('.selector').resizable({ ghost: true });
```
在初始化后设置或者获取ghost参数.
```
//获取
var ghost = $('.selector').resizable('option', 'ghost');
//设置
$('.selector').resizable('option', 'ghost', true);
```
grid

类型:

Array

默认值:

false

设置调整x和y移动的像素. 数组值: [x, y]
代码示例
使用指定的grid参数初始化一个resizable.
```
$('.selector').resizable({ grid: [50, 50] });
```
在初始化后设置或者获取grid参数.
```
//获取
var grid = $('.selector').resizable('option', 'grid');
//设置
$('.selector').resizable('option', 'grid', [50, 50]);
```
handles

类型:

String, Object

默认值:

'e, s, se'

如果指定一个字符串, 应该是下列清单中的组合:'n, e, s, w, ne, se, sw, nw, all',每项之间使用逗号分隔. 必要的手柄将由插件自动生成.
如果指定一个对象, 要支持下面的键值: { n, e, s, w, ne, se, sw, nw }. 指定的用户调整手柄的任何值应该是一个jQuery选择器匹配的子元素. 如果该操作柄不是resizable的一个子元素, 你可以提供一个有效的DOMElement 或者直接提供一个jQuery对象.
代码示例
使用指定的handles参数初始化一个resizable.
```
$('.selector').resizable({ handles: 'n, e, s, w' });
```
在初始化后设置或者获取handles参数.
```
//获取
var handles = $('.selector').resizable('option', 'handles');
//设置
$('.selector').resizable('option', 'handles', 'n, e, s, w');
```
helper

类型:

String

默认值:

false

为大小调整时的代理元素指定一个css样式.当调整完成时,这些元素将回到它以前的状态.
代码示例
使用指定的helper参数初始化一个resizable.
```
$('.selector').resizable({ helper: '.ui-state-highlight' });
```
在初始化后设置或者获取helper参数.
```
//获取
var helper = $('.selector').resizable('option', 'helper');
//设置
$('.selector').resizable('option', 'helper', '.ui-state-highlight');
```
maxHeight

类型:

Int

默认值:

null

为大小调整设定一个最大高度.
代码示例
使用指定的maxHeight参数初始化一个resizable.
```
$('.selector').resizable({ maxHeight: 300 });
```
在初始化后设置或者获取maxHeight参数.
```
//获取
var maxHeight = $('.selector').resizable('option', 'maxHeight');
//设置
$('.selector').resizable('option', 'maxHeight', 300);
```
maxWidth

类型:

Int

默认值:

null

为大小调整设定一个最大宽度.
代码示例
使用指定的maxWidth参数初始化一个resizable.
```
$('.selector').resizable({ maxWidth: 250 });
```
在初始化后设置或者获取maxWidth参数.
```
//获取
var maxWidth = $('.selector').resizable('option', 'maxWidth');
//设置
$('.selector').resizable('option', 'maxWidth', 250);
```
minHeight

类型:

Int

默认值:

10

为大小调整设定一个最小高度.
代码示例
使用指定的minHeight参数初始化一个resizable.
```
$('.selector').resizable({ minHeight: 150 });
```
在初始化后设置或者获取minHeight参数.
```
//获取
var minHeight = $('.selector').resizable('option', 'minHeight');
//设置
$('.selector').resizable('option', 'minHeight', 150);
```
minWidth

类型:

Int

默认值:

10

为大小调整设定一个最小宽度.
代码示例
使用指定的minWidth参数初始化一个resizable.
```
$('.selector').resizable({ minWidth: 75 });
```
在初始化后设置或者获取minWidth参数.
```
//获取
var minWidth = $('.selector').resizable('option', 'minWidth');
//设置
$('.selector').resizable('option', 'minWidth', 75);
```

start

类型:

resizestart

这个事件将在调整操作开始时触发.
代码示例
提供一个回调函数对start事件进行操作.
```
$('.selector').resizable({
   start: function(event, ui) { ... }
});
```
使用resizestart类型来绑定start事件.
```
$('.selector').bind('resizestart', function(event, ui) {
  ...
});
```
resize

类型:

resize

这个事件将在拖动手柄进行调整时触发.
代码示例
提供一个回调函数对resize事件进行操作.
```
$('.selector').resizable({
   resize: function(event, ui) { ... }
});
```
使用resize类型来绑定resize事件.
```
$('.selector').bind('resize', function(event, ui) {
  ...
});
```
stop

类型:

resizestop

这个事件将在调整操作结束后触发.
代码示例
提供一个回调函数对stop事件进行操作.
```
$('.selector').resizable({
   stop: function(event, ui) { ... }
});
```
使用resizestop类型来绑定stop事件.
```
$('.selector').bind('resizestop', function(event, ui) {
  ...
});
```

destroy

方法签名:

.resizable( 'destroy' )

完全移除调整功能. 这将使元素返回到之前的初始化状态.
disable

方法签名:

.resizable( 'disable' )

关闭resizable.
enable

方法签名:

.resizable( 'enable' )

打开resizable.
option

方法签名:

.resizable( 'option' , optionName , [value] )

获取或者设置resizable参数. 如果没有提供参数值则是获取.

jQuery UI Resizable插件使用jQuery UI CSS 框架的外观和风格，包括颜色和背景纹理.我们建议您使用ThemeRoller工具来创建和下载的自定义主题，很容易建立和维护.

如果有更深层次的个性化需要，有特定类别的工具ui.resizable.css样式可供参考，可以修改这些参考。这些课程是下面以高亮和粗体显示的。

jQuery UI CSS Framework classes示例

Note: 注：这是一个示例resizable插件所产生的标记,而不是你应该使用的标记.创建一个resizable唯一需要的标记是 <div></div>.

部件

动画

UI/API/1.7/Resizable

jQuery UI Resizable

概述

其他附加文件

示例

参数

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

事件

代码示例

代码示例

代码示例

方法

主题

jQuery UI CSS Framework classes示例