jQuery UI API - 可调整尺寸小部件（Resizable Widget）

代码实例：

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

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

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

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

代码实例：

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

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

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

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

支持多个类型：

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

代码实例：

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

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

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

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

代码实例：

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

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

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

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

支持多个类型：

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

代码实例：

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

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

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

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

代码实例：

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

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

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

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

代码实例：

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

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

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

// gettervar 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 选项：

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

代码实例：

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

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

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

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

代码实例：

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

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

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

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

代码实例：

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

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

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

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

代码实例：

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

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

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

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

代码实例：

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

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

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

// gettervar 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-handle class，也可以是适当的 appropriate ui-resizable-{direction} class，比如 ui-resizable-s。

代码实例：

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

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

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

// gettervar handles = $( ".selector" ).resizable( "option", "handles" ); // setter$( ".selector" ).resizable( "option", "handles", "n, e, s, w" );    

代码实例：

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

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

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

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

代码实例：

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

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

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

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

代码实例：

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

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

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

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

代码实例：

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

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

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

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

代码实例：

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

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

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

// gettervar 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 ) {} );