可调整尺寸小部件（Resizable Widget）

代码实例：

初始化带有指定alsoResize选项的 resizable：

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

在初始化后，获取或设置alsoResize选项：

// getter
var alsoResize = $( ".selector" ).resizable( "option", "alsoResize" );
 
// setter
$( ".selector" ).resizable( "option", "alsoResize", "#mirror" );
	

代码实例：

初始化带有指定animate选项的 resizable：

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

在初始化后，获取或设置animate选项：

// getter
var animate = $( ".selector" ).resizable( "option", "animate" );
 
// setter
$( ".selector" ).resizable( "option", "animate", true );
	

支持多个类型：

• Number：持续时间，以毫秒计。
• String：一个命名的持续时间，比如"slow"或"fast"。

代码实例：

初始化带有指定animateDuration选项的 resizable：

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

在初始化后，获取或设置animateDuration选项：

// getter
var animateDuration = $( ".selector" ).resizable( "option", "animateDuration" );
 
// setter
$( ".selector" ).resizable( "option", "animateDuration", "fast" );
	

代码实例：

初始化带有指定animateEasing选项的 resizable：

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

在初始化后，获取或设置animateEasing选项：

// getter
var animateEasing = $( ".selector" ).resizable( "option", "animateEasing" );
 
// setter
$( ".selector" ).resizable( "option", "animateEasing", "easeOutBounce" );
	

支持多个类型：

• Boolean：当设置为true时，元素将保持其原有的长宽比。
• Number：强制在调整尺寸时元素保持特定的长宽比。

代码实例：

初始化带有指定aspectRatio选项的 resizable：

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

在初始化后，获取或设置aspectRatio选项：

// getter
var aspectRatio = $( ".selector" ).resizable( "option", "aspectRatio" );
 
// setter
$( ".selector" ).resizable( "option", "aspectRatio", true );
	

代码实例：

初始化带有指定autoHide选项的 resizable：

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

在初始化后，获取或设置autoHide选项：

// getter
var autoHide = $( ".selector" ).resizable( "option", "autoHide" );
 
// setter
$( ".selector" ).resizable( "option", "autoHide", true );
	

代码实例：

初始化带有指定cancel选项的 resizable：

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

在初始化后，获取或设置cancel选项：

// getter
var cancel = $( ".selector" ).resizable( "option", "cancel" );
 
// setter
$( ".selector" ).resizable( "option", "cancel", ".cancel" );
	

支持多个类型：

• Selector：可调整尺寸元素将被包含在 selector 第一个元素的边界内。如果未找到元素，则不设置 containment。
• Element：可调整尺寸元素将被包含在元素的边界内。
• String：可能的值："parent"、"document"。

代码实例：

初始化带有指定containment选项的 resizable：

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

在初始化后，获取或设置containment选项：

// getter
var containment = $( ".selector" ).resizable( "option", "containment" );
 
// setter
$( ".selector" ).resizable( "option", "containment", "parent" );
	

代码实例：

初始化带有指定delay选项的 resizable：

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

在初始化后，获取或设置delay选项：

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

代码实例：

初始化带有指定disabled选项的 resizable：

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

在初始化后，获取或设置disabled选项：

// getter
var disabled = $( ".selector" ).resizable( "option", "disabled" );
 
// setter
$( ".selector" ).resizable( "option", "disabled", true );
	

代码实例：

初始化带有指定distance选项的 resizable：

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

在初始化后，获取或设置distance选项：

// getter
var distance = $( ".selector" ).resizable( "option", "distance" );
 
// setter
$( ".selector" ).resizable( "option", "distance", 30 );
	

代码实例：

初始化带有指定ghost选项的 resizable：

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

在初始化后，获取或设置ghost选项：

// getter
var ghost = $( ".selector" ).resizable( "option", "ghost" );
 
// setter
$( ".selector" ).resizable( "option", "ghost", true );
	

代码实例：

初始化带有指定grid选项的 resizable：

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

在初始化后，获取或设置grid选项：

// getter
var grid = $( ".selector" ).resizable( "option", "grid" );
 
// setter
$( ".selector" ).resizable( "option", "grid", [ 20, 10 ] );
	

支持多个类型：

• String：一个逗号分隔的列表，列表值为下面所列出的任意值：n, e, s, w, ne, se, sw, nw, all。必要的处理程序由插件自动生成。
• Object：支持下面的键：{ n, e, s, w, ne, se, sw, nw }。任何指定的值应该是一个匹配作为处理程序使用的 resizable 的子元素的 jQuery 选择器。

注释：当生成您自己的处理程序时，每个处理程序必须有ui-resizable-handleclass，也可以是适当的appropriate ui-resizable-{direction}class，比如 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" );
	

代码实例：

初始化带有指定helper选项的 resizable：

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

在初始化后，获取或设置helper选项：

// getter
var helper = $( ".selector" ).resizable( "option", "helper" );
 
// setter
$( ".selector" ).resizable( "option", "helper", "resizable-helper" );
	

代码实例：

初始化带有指定maxHeight选项的 resizable：

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

在初始化后，获取或设置maxHeight选项：

// getter
var maxHeight = $( ".selector" ).resizable( "option", "maxHeight" );
 
// setter
$( ".selector" ).resizable( "option", "maxHeight", 300 );
	

代码实例：

初始化带有指定maxWidth选项的 resizable：

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

在初始化后，获取或设置maxWidth选项：

// getter
var maxWidth = $( ".selector" ).resizable( "option", "maxWidth" );
 
// setter
$( ".selector" ).resizable( "option", "maxWidth", 300 );
	

代码实例：

初始化带有指定minHeight选项的 resizable：

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

在初始化后，获取或设置minHeight选项：

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

代码实例：

初始化带有指定minWidth选项的 resizable：

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

在初始化后，获取或设置minWidth选项：

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

• 该方法不接受任何参数。

代码实例：

调用 destroy 方法：

$( ".selector" ).resizable( "destroy" );
	

• 该方法不接受任何参数。

代码实例：

调用 disable 方法：

$( ".selector" ).resizable( "disable" );
	

• 该方法不接受任何参数。

代码实例：

调用 enable 方法：

$( ".selector" ).resizable( "enable" );
	

• optionName
  类型：String
  描述：要获取的选项的名称。

代码实例：

调用该方法：

var isDisabled = $( ".selector" ).resizable( "option", "disabled" );
	

• 该方法不接受任何参数。

代码实例：

调用该方法：

var options = $( ".selector" ).resizable( "option" );
	

• optionName
  类型：String
  描述：要设置的选项的名称。
• value
  类型：Object
  描述：要为选项设置的值。

代码实例：

调用该方法：

$( ".selector" ).resizable( "option", "disabled", true );
	

• options
  类型：Object
  描述：要设置的 option-value 对。

代码实例：

调用该方法：

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

• 该方法不接受任何参数。

代码实例：

调用 widget 方法：

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

• event
  类型：Event
• ui
  类型：Object

注意：ui对象是空的，这里包含它是为了与其他事件保持一致性。

代码实例：

初始化带有指定 create 回调的 resizable：

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

绑定一个事件监听器到 resizecreate 事件：

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

• event
  类型：Event
• ui
  类型：Object
  • element
    类型：jQuery
    描述：jQuery 对象，表示要被调整尺寸的元素。
  • helper
    类型：jQuery
    描述：jQuery 对象，表示被调整尺寸的助手（helper）。
  • originalElement
    类型：jQuery
    描述：jQuery 对象，表示被包裹之前的原始元素。
  • originalPosition
    类型：Object
    描述：resizable 调整前的位置，表示为{ top, left }。
  • originalSize
    类型：Object
    描述：resizable 调整前的尺寸，表示为{ width, height }。
  • position
    类型：Object
    描述：当前位置，表示为{ top, left }。
  • size
    类型：Object
    描述：当前位置，表示为{ width, height }。

代码实例：

初始化带有指定 resize 回调的 resizable：

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

绑定一个事件监听器到 resize 事件：

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

• event
  类型：Event
• ui
  类型：Object
  • element
    类型：jQuery
    描述：jQuery 对象，表示要被调整尺寸的元素。
  • helper
    类型：jQuery
    描述：jQuery 对象，表示被调整尺寸的助手（helper）。
  • originalElement
    类型：jQuery
    描述：jQuery 对象，表示被包裹之前的原始元素。
  • originalPosition
    类型：Object
    描述：resizable 调整前的位置，表示为{ top, left }。
  • originalSize
    类型：Object
    描述：resizable 调整前的尺寸，表示为{ width, height }。
  • position
    类型：Object
    描述：当前位置，表示为{ top, left }。
  • size
    类型：Object
    描述：当前位置，表示为{ width, height }。

代码实例：

初始化带有指定 start 回调的 resizable：

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

绑定一个事件监听器到 resizestart 事件：

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

• event
  类型：Event
• ui
  类型：Object
  • element
    类型：jQuery
    描述：jQuery 对象，表示要被调整尺寸的元素。
  • helper
    类型：jQuery
    描述：jQuery 对象，表示被调整尺寸的助手（helper）。
  • originalElement
    类型：jQuery
    描述：jQuery 对象，表示被包裹之前的原始元素。
  • originalPosition
    类型：Object
    描述：resizable 调整前的位置，表示为{ top, left }。
  • originalSize
    类型：Object
    描述：resizable 调整前的尺寸，表示为{ width, height }。
  • position
    类型：Object
    描述：当前位置，表示为{ top, left }。
  • size
    类型：Object
    描述：当前位置，表示为{ width, height }。

代码实例：

初始化带有指定 stop 回调的 resizable：

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

绑定一个事件监听器到 resizestop 事件：

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