Resizable Widget
Categories: Interactions
version added: 1.0
Description: 使用鼠标改变一个元素的尺寸。
QuickNavExamples
Options
- alsoResize
- animate
- animateDuration
- animateEasing
- aspectRatio
- autoHide
- cancel
- containment
- delay
- disabled
- distance
- ghost
- grid
- handles
- helper
- maxHeight
- maxWidth
- minHeight
- minWidth
Methods
Events
jQuery UI Resizable 插件使选定的内容可以调整大小(这以为着那么拥有一些可以拖动的手柄). 你可以指定一个或者多个操作手柄以及指定最小和最大宽度与高度.
Dependencies
- UI Core
- Widget Factory
- Mouse Interaction
其他注意事项:
- 这个widget需要一些功能性的CSS,否则将无法正常工作。 如果你建立一个自定义的主题,使用widget指定的CSS文件作为一个激活点。
Options
alsoResizeType: Selector or jQuery or 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" );
animateType: 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 );
animateDurationType: Number or String
Default: "slow"
当使用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" );
animateEasingType: String
Default: "swing"
动画执行时的缓冲效果。当使用animate
选项时,哪个easing (缓冲函数)被应用。Code examples:
使用指定的 animateEasing
参数初始化resizable :
$( ".selector" ).resizable({ animateEasing: "easeOutBounce" });
在初始化后设置或者获取 animateEasing
参数 :
// getter
var animateEasing = $( ".selector" ).resizable( "option", "animateEasing" );
// setter
$( ".selector" ).resizable( "option", "animateEasing", "easeOutBounce" );
aspectRatioType: Boolean or 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 );
autoHideType: 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 );
cancelType: 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" );
containmentType: Selector or Element or 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" );
delayType: 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 );
disabledType: 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 );
distanceType: 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 );
ghostType: 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 );
gridType: 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 ] );
handlesType: String or 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" );
helperType: 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" );
maxHeightType: 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 );
maxWidthType: 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 );
minHeightType: 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 );
minWidthType: 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
通过指定的optionName
,获取当前关联的值。
- optionNameType: String要获取值的选项名
Code examples:
调用这个方法:
var isDisabled = $( ".selector" ).resizable( "option", "disabled" );
option()Returns: PlainObject
获取一个对象,它包含表示当前resizable的选项hash的键/值对。
- 这个方法不接受任何参数。
Code examples:
调用这个方法:
var options = $( ".selector" ).resizable( "option" );
option( optionName, value )
通过指定的optionName
,设置resizable的相关选项值。
Code examples:
调用这个方法:
$( ".selector" ).resizable( "option", "disabled", true );
option( options )
为resizable设置一个或多个选项。
- optionsType: Object设置的选项/值对的对象。
Code examples:
调用这个方法:
$( ".selector" ).resizable( "option", { disabled: true } );
widget()Returns: jQuery
返回一个jQuery
,它包含了resizable元素。
- 这个方法不接受任何参数。
Code examples:
调用 widget 方法:
var widget = $( ".selector" ).resizable( "widget" );
Events
create( event, ui )Type: resizecreate
此事件会在resizable创建时触发。
注意:ui
对象是空对象,包括是为了和其他事件的一致性。
Code examples:
使用指定的 create 回调初始化一个resizable:
$( ".selector" ).resizable({
create: function( event, ui ) {}
});
绑定一个事件监听到resizecreate事件:
$( ".selector" ).on( "resizecreate", function( event, ui ) {} );
resize( event, ui )Type: resize
这个事件将在拖动手柄进行调整时触发.
- eventType: Event
- uiType: Object
- elementType: jQuery一个jQuery对象代表被 resized 的元素。
- helperType: jQuery一个jQuery对象代表被resized元素的助手。
- originalElementType: jQuery一个jQuery对象代表被包裹前原先的元素。
- originalPositionType: Objectresizable元素被resized(缩放)前的CSS的position(位置)对象,如
{ left, top }
。 - originalSizeType: Objectresizable元素被resized(缩放)前的尺寸对象,如
{ width, height }
。 - positionType: Object当前可resizable(缩放)元素的CSS的position(位置)对象,如{ top, left }。
- sizeType: 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
这个事件将在调整操作开始时触发.
- eventType: Event
- uiType: Object
- elementType: jQuery一个jQuery对象代表被 resized 的元素。
- helperType: jQuery一个jQuery对象代表被resized元素的助手。
- originalElementType: jQuery一个jQuery对象代表被包裹前原先的元素。
- originalPositionType: Objectresizable元素被resized(缩放)前的CSS的position(位置)对象,如
{ left, top }
。 - originalSizeType: Objectresizable元素被resized(缩放)前的尺寸对象,如
{ width, height }
。 - positionType: Object当前可resizable(缩放)元素的CSS的position(位置)对象,如{ top, left }。
- sizeType: 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
这个事件将在调整操作结束后触发.
- eventType: Event
- uiType: Object
- elementType: jQuery一个jQuery对象代表被 resized 的元素。
- helperType: jQuery一个jQuery对象代表被resized元素的助手。
- originalElementType: jQuery一个jQuery对象代表被包裹前原先的元素。
- originalPositionType: Objectresizable元素被resized(缩放)前的CSS的position(位置)对象,如
{ left, top }
。 - originalSizeType: Objectresizable元素被resized(缩放)前的尺寸对象,如
{ width, height }
。 - positionType: Object当前可resizable(缩放)元素的CSS的position(位置)对象,如{ top, left }。
- sizeType: 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>