选项 |
类型 |
描述 |
默认值 |
alsoResize |
Selector 或 jQuery 或 Element |
一个或多个通过 resizable 元素进行同步调整尺寸的元素。
代码实例:
初始化带有指定 alsoResize 选项的 resizable:
$( ".selector" ).resizable({ alsoResize: "#mirror" });
在初始化后,获取或设置 alsoResize 选项:
// getter
var alsoResize = $( ".selector" ).resizable( "option", "alsoResize" );
// setter
$( ".selector" ).resizable( "option", "alsoResize", "#mirror" );
|
false |
animate |
Boolean |
调整尺寸后动态变化到最终尺寸。
代码实例:
初始化带有指定 animate 选项的 resizable:
$( ".selector" ).resizable({ animate: true });
在初始化后,获取或设置 animate 选项:
// getter
var animate = $( ".selector" ).resizable( "option", "animate" );
// setter
$( ".selector" ).resizable( "option", "animate", true );
|
false |
animateDuration |
Number 或 String |
当使用 animate 选项时,动画持续的时间。
支持多个类型:
- Number:持续时间,以毫秒计。
- String:一个命名的持续时间,比如
"slow" 或 "fast" 。
代码实例:
初始化带有指定 animateDuration 选项的 resizable:
$( ".selector" ).resizable({ animateDuration: "fast" });
在初始化后,获取或设置 animateDuration 选项:
// getter
var animateDuration = $( ".selector" ).resizable( "option", "animateDuration" );
// setter
$( ".selector" ).resizable( "option", "animateDuration", "fast" );
|
"slow" |
animateEasing |
String |
当使用 animate 选项时要使用的 Easings。
代码实例:
初始化带有指定 animateEasing 选项的 resizable:
$( ".selector" ).resizable({ animateEasing: "easeOutBounce" });
在初始化后,获取或设置 animateEasing 选项:
// getter
var animateEasing = $( ".selector" ).resizable( "option", "animateEasing" );
// setter
$( ".selector" ).resizable( "option", "animateEasing", "easeOutBounce" );
|
"swing" |
aspectRatio |
Boolean 或 Number |
元素是否应该被限制在一个特定的长宽比。
支持多个类型:
- Boolean:当设置为
true 时,元素将保持其原有的长宽比。
- Number:强制在调整尺寸时元素保持特定的长宽比。
代码实例:
初始化带有指定 aspectRatio 选项的 resizable:
$( ".selector" ).resizable({ aspectRatio: true });
在初始化后,获取或设置 aspectRatio 选项:
// getter
var aspectRatio = $( ".selector" ).resizable( "option", "aspectRatio" );
// setter
$( ".selector" ).resizable( "option", "aspectRatio", true );
|
false |
autoHide |
Boolean |
当用户鼠标没有悬浮在元素上时是否隐藏手柄。
代码实例:
初始化带有指定 autoHide 选项的 resizable:
$( ".selector" ).resizable({ autoHide: true });
在初始化后,获取或设置 autoHide 选项:
// getter
var autoHide = $( ".selector" ).resizable( "option", "autoHide" );
// setter
$( ".selector" ).resizable( "option", "autoHide", true );
|
false |
cancel |
Selector |
防止从指定的元素上开始调整尺寸。
代码实例:
初始化带有指定 cancel 选项的 resizable:
$( ".selector" ).resizable({ cancel: ".cancel" });
在初始化后,获取或设置 cancel 选项:
// getter
var cancel = $( ".selector" ).resizable( "option", "cancel" );
// setter
$( ".selector" ).resizable( "option", "cancel", ".cancel" );
|
"input, textarea, button, select, option" |
containment |
Selector 或 Element 或 String |
约束在指定元素或区域的边界内调整尺寸。
支持多个类型:
- 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" );
|
false |
delay |
Number |
鼠标按下后直到调整尺寸开始为止的时间,以毫秒计。如果指定了该选项,调整只有在鼠标移动超过时间后才开始。该选项可以防止点击在某个元素上时不必要的调整尺寸。
代码实例:
初始化带有指定 delay 选项的 resizable:
$( ".selector" ).resizable({ delay: 150 });
在初始化后,获取或设置 delay 选项:
// getter
var delay = $( ".selector" ).resizable( "option", "delay" );
// setter
$( ".selector" ).resizable( "option", "delay", 150 );
|
0 |
disabled |
Boolean |
如果设置为 true ,则禁用该 resizable。
代码实例:
初始化带有指定 disabled 选项的 resizable:
$( ".selector" ).resizable({ disabled: true });
在初始化后,获取或设置 disabled 选项:
// getter
var disabled = $( ".selector" ).resizable( "option", "disabled" );
// setter
$( ".selector" ).resizable( "option", "disabled", true );
|
false |
distance |
Number |
鼠标按下后调整尺寸开始前必须移动的距离,以像素计。如果指定了该选项,调整只有在鼠标移动超过距离后才开始。该选项可以防止点击在某个元素上时不必要的调整尺寸。
代码实例:
初始化带有指定 distance 选项的 resizable:
$( ".selector" ).resizable({ distance: 30 });
在初始化后,获取或设置 distance 选项:
// getter
var distance = $( ".selector" ).resizable( "option", "distance" );
// setter
$( ".selector" ).resizable( "option", "distance", 30 );
|
1 |
ghost |
Boolean |
如果设置为 true ,则为调整尺寸显示一个半透明的辅助元素。
代码实例:
初始化带有指定 ghost 选项的 resizable:
$( ".selector" ).resizable({ ghost: true });
在初始化后,获取或设置 ghost 选项:
// getter
var ghost = $( ".selector" ).resizable( "option", "ghost" );
// setter
$( ".selector" ).resizable( "option", "ghost", true );
|
false |
grid |
Array |
把可调整尺寸元素对齐到网格,每个 x 和 y 像素。数组形式必须是 [ x, y ] 。
代码实例:
初始化带有指定 grid 选项的 resizable:
$( ".selector" ).resizable({ grid: [ 20, 10 ] });
在初始化后,获取或设置 grid 选项:
// getter
var grid = $( ".selector" ).resizable( "option", "grid" );
// setter
$( ".selector" ).resizable( "option", "grid", [ 20, 10 ] );
|
false |
handles |
String 或 Object |
可用于调整尺寸的处理程序。
支持多个类型:
- 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 选项:
// getter
var handles = $( ".selector" ).resizable( "option", "handles" );
// setter
$( ".selector" ).resizable( "option", "handles", "n, e, s, w" );
|
"e, s, se" |
helper |
String |
一个将被添加到代理元素的 class 名称,用于描绘调整手柄拖拽过程中调整的轮廓。一旦调整完成,原来的元素则被重新定义尺寸。
代码实例:
初始化带有指定 helper 选项的 resizable:
$( ".selector" ).resizable({ helper: "resizable-helper" });
在初始化后,获取或设置 helper 选项:
// getter
var helper = $( ".selector" ).resizable( "option", "helper" );
// setter
$( ".selector" ).resizable( "option", "helper", "resizable-helper" );
|
false |
maxHeight |
Number |
resizable 允许被调整到的最大高度。
代码实例:
初始化带有指定 maxHeight 选项的 resizable:
$( ".selector" ).resizable({ maxHeight: 300 });
在初始化后,获取或设置 maxHeight 选项:
// getter
var maxHeight = $( ".selector" ).resizable( "option", "maxHeight" );
// setter
$( ".selector" ).resizable( "option", "maxHeight", 300 );
|
null |
maxWidth |
Number |
resizable 允许被调整到的最大宽度。
代码实例:
初始化带有指定 maxWidth 选项的 resizable:
$( ".selector" ).resizable({ maxWidth: 300 });
在初始化后,获取或设置 maxWidth 选项:
// getter
var maxWidth = $( ".selector" ).resizable( "option", "maxWidth" );
// setter
$( ".selector" ).resizable( "option", "maxWidth", 300 );
|
null |
minHeight |
Number |
resizable 允许被调整到的最小高度。
代码实例:
初始化带有指定 minHeight 选项的 resizable:
$( ".selector" ).resizable({ minHeight: 150 });
在初始化后,获取或设置 minHeight 选项:
// getter
var minHeight = $( ".selector" ).resizable( "option", "minHeight" );
// setter
$( ".selector" ).resizable( "option", "minHeight", 150 );
|
10 |
minWidth |
Number |
resizable 允许被调整到的最小宽度。
代码实例:
初始化带有指定 minWidth 选项的 resizable:
$( ".selector" ).resizable({ minWidth: 150 });
在初始化后,获取或设置 minWidth 选项:
// getter
var minWidth = $( ".selector" ).resizable( "option", "minWidth" );
// setter
$( ".selector" ).resizable( "option", "minWidth", 150 );
|
10 |
事件 |
类型 |
描述 |
create( event, ui ) |
resizecreate |
当 resizable 被创建时触发。
- event
类型:Event
- ui
类型:Object
注意:ui 对象是空的,这里包含它是为了与其他事件保持一致性。
代码实例:
初始化带有指定 create 回调的 resizable:
$( ".selector" ).resizable({
create: function( event, ui ) {}
});
绑定一个事件监听器到 resizecreate 事件:
$( ".selector" ).on( "resizecreate", function( event, ui ) {} );
|
resize( event, ui ) |
resize |
在调整尺寸期间当调整手柄拖拽时触发。
- 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 ) {} );
|
start( event, ui ) |
resizestart |
当调整尺寸操作开始时触发。
- 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 ) {} );
|
stop( event, ui ) |
resizestop |
当调整尺寸操作停止时触发。
- 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 ) {} );
|