Resizable Widget

Categories: Interactions

Resizable Widgetversion added: 1.0

Description: 使用鼠标改变一个元素的尺寸。

QuickNavExamples

Options

Methods

Events

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

Dependencies

其他注意事项：

  • 这个widget需要一些功能性的CSS，否则将无法正常工作。 如果你建立一个自定义的主题，使用widget指定的CSS文件作为一个激活点。

Options

alsoResizeType: Selector or jQuery or Element

Default: false
在重置元素尺寸大小的同时重置指定的一个或多个元素的尺寸大小。
Code examples:

使用指定的 alsoResize 参数初始化resizable :

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

在初始化后设置或者获取 alsoResize 参数 :

1
2
3
4
5
6
 
// getter
var alsoResize = $( ".selector" ).resizable( "option", "alsoResize" );
 
 
// setter
$( ".selector" ).resizable( "option", "alsoResize", "#mirror" );

animateType: Boolean

Default: false
在调整大小后使用一段动画完成调整.
Code examples:

使用指定的 animate 参数初始化resizable :

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

在初始化后设置或者获取 animate 参数 :

1
2
3
4
5
6
 
// 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 :

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

在初始化后设置或者获取 animateDuration 参数 :

1
2
3
4
5
6
 
// getter
var animateDuration = $( ".selector" ).resizable( "option", "animateDuration" );
 
 
// setter
$( ".selector" ).resizable( "option", "animateDuration", "fast" );

animateEasingType: String

Default: "swing"
动画执行时的缓冲效果。当使用animate选项时，哪个easing （缓冲函数）被应用。
Code examples:

使用指定的 animateEasing 参数初始化resizable :

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

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

1
2
3
4
5
6
 
// 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 :

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

在初始化后设置或者获取 aspectRatio 参数 :

1
2
3
4
5
6
 
// getter
var aspectRatio = $( ".selector" ).resizable( "option", "aspectRatio" );
 
 
// setter
$( ".selector" ).resizable( "option", "aspectRatio", true );

autoHideType: Boolean

Default: false
如果设置为真, 将会自动隐藏调整手柄图标,除非鼠标移动到该元素上.
Code examples:

使用指定的 autoHide 参数初始化resizable :

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

在初始化后设置或者获取 autoHide 参数 :

1
2
3
4
5
6
 
// 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 :

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

在初始化后设置或者获取 cancel 参数 :

1
2
3
4
5
6
 
// 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 :

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

在初始化后设置或者获取 containment 参数 :

1
2
3
4
5
6
 
// getter
var containment = $( ".selector" ).resizable( "option", "containment" );
 
 
// setter
$( ".selector" ).resizable( "option", "containment", "parent" );

delayType: Number

Default: 0
设定需要经过多少毫秒以后调整才会开始. 如果指定了该参数, 调整不会马上开始,除非鼠标调整动作已经持续了指定的时间.这可以防止误操作对元素进行了非预期的调整.
Code examples:

使用指定的 delay 参数初始化resizable :

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

在初始化后设置或者获取 delay 参数 :

1
2
3
4
5
6
 
// getter
var delay = $( ".selector" ).resizable( "option", "delay" );
 
 
// setter
$( ".selector" ).resizable( "option", "delay", 150 );

disabledType: Boolean

Default: false
如果设置为 true 将禁止resizable（缩放）。
Code examples:

使用指定的 disabled 参数初始化resizable :

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

在初始化后设置或者获取 disabled 参数 :

1
2
3
4
5
6
 
// getter
var disabled = $( ".selector" ).resizable( "option", "disabled" );
 
 
// setter
$( ".selector" ).resizable( "option", "disabled", true );

distanceType: Number

Default: 1
设定调整操作需要移动多少个像素后调整才会开始. 如果指定了该参数, 调整不会马上开始,直到鼠标移动了指定的像素后.这可以防止误操作对元素进行了非预期的调整.
Code examples:

使用指定的 distance 参数初始化resizable :

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

在初始化后设置或者获取 distance 参数 :

1
2
3
4
5
6
 
// getter
var distance = $( ".selector" ).resizable( "option", "distance" );
 
 
// setter
$( ".selector" ).resizable( "option", "distance", 30 );

ghostType: Boolean

Default: false
如果设置为true, 将会在调整过程中看到一个半透明的辅助元素。
Code examples:

使用指定的 ghost 参数初始化resizable :

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

在初始化后设置或者获取 ghost 参数 :

1
2
3
4
5
6
 
// 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 :

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

在初始化后设置或者获取 grid 参数 :

1
2
3
4
5
6
 
// 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 :

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

在初始化后设置或者获取 handles 参数 :

1
2
3
4
5
6
 
// 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 :

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

在初始化后设置或者获取 helper 参数 :

1
2
3
4
5
6
 
// getter
var helper = $( ".selector" ).resizable( "option", "helper" );
 
 
// setter
$( ".selector" ).resizable( "option", "helper", "resizable-helper" );

maxHeightType: Number

Default: null
为大小调整设定一个最大高度.
Code examples:

使用指定的 maxHeight 参数初始化resizable :

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

在初始化后设置或者获取 maxHeight 参数 :

1
2
3
4
5
6
 
// getter
var maxHeight = $( ".selector" ).resizable( "option", "maxHeight" );
 
 
// setter
$( ".selector" ).resizable( "option", "maxHeight", 300 );

maxWidthType: Number

Default: null
为大小调整设定一个最大宽度.
Code examples:

使用指定的 maxWidth 参数初始化resizable :

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

在初始化后设置或者获取 maxWidth 参数 :

1
2
3
4
5
6
 
// getter
var maxWidth = $( ".selector" ).resizable( "option", "maxWidth" );
 
 
// setter
$( ".selector" ).resizable( "option", "maxWidth", 300 );

minHeightType: Number

Default: 10
为大小调整设定一个最小高度.
Code examples:

使用指定的 minHeight 参数初始化resizable :

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

在初始化后设置或者获取 minHeight 参数 :

1
2
3
4
5
6
 
// getter
var minHeight = $( ".selector" ).resizable( "option", "minHeight" );
 
 
// setter
$( ".selector" ).resizable( "option", "minHeight", 150 );

minWidthType: Number

Default: 10
为大小调整设定一个最小宽度.
Code examples:

使用指定的 minWidth 参数初始化resizable :

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

在初始化后设置或者获取 minWidth 参数 :

1
2
3
4
5
6
 
// getter
var minWidth = $( ".selector" ).resizable( "option", "minWidth" );
 
 
// setter
$( ".selector" ).resizable( "option", "minWidth", 150 );

Methods

destroy()

完全移除调整功能. 这将使元素返回到之前的初始化状态.
  • 这个方法不接受任何参数。
Code examples:

调用 destroy 方法：

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

disable()

关闭resizable.
  • 这个方法不接受任何参数。
Code examples:

调用 disable 方法：

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

enable()

打开resizable.
  • 这个方法不接受任何参数。
Code examples:

调用 enable 方法：

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

option( optionName )Returns: Object

通过指定的optionName，获取当前关联的值。
  • optionName
    Type: String
    要获取值的选项名
Code examples:

调用这个方法：

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

option()Returns: PlainObject

获取一个对象，它包含表示当前resizable的选项hash的键/值对。
  • 这个方法不接受任何参数。
Code examples:

调用这个方法：

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

option( optionName, value )

通过指定的optionName，设置resizable的相关选项值。
  • optionName
    Type: String
    要设置值的选项名。
  • value
    Type: Object
    要设置选项的值。
Code examples:

调用这个方法：

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

option( options )

为resizable设置一个或多个选项。
  • options
    Type: Object
    设置的选项/值对的对象。
Code examples:

调用这个方法：

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

widget()Returns: jQuery

返回一个jQuery，它包含了resizable元素。
  • 这个方法不接受任何参数。
Code examples:

调用 widget 方法：

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

Events

create( event, ui )Type: resizecreate

此事件会在resizable创建时触发。

注意：ui 对象是空对象，包括是为了和其他事件的一致性。

Code examples:

使用指定的 create 回调初始化一个resizable：

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

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

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

resize( event, ui )Type: resize

这个事件将在拖动手柄进行调整时触发.
  • event
    Type: Event
  • ui
    Type: Object
    • element
      Type: jQuery
      一个jQuery对象代表被 resized 的元素。
    • helper
      Type: jQuery
      一个jQuery对象代表被resized元素的助手。
    • originalElement
      Type: jQuery
      一个jQuery对象代表被包裹前原先的元素。
    • originalPosition
      Type: Object
      resizable元素被resized（缩放）前的CSS的position（位置）对象，如{ left, top } 。
    • originalSize
      Type: Object
      resizable元素被resized（缩放）前的尺寸对象，如{ width, height }。
    • position
      Type: Object
      当前可resizable（缩放）元素的CSS的position（位置）对象，如{ top, left }。
    • size
      Type: Object
      当前可resizable（缩放）元素的尺寸对象，{ width, height }。
Code examples:

使用指定的 resize 回调初始化一个resizable：

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

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

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

start( event, ui )Type: resizestart

这个事件将在调整操作开始时触发.
  • event
    Type: Event
  • ui
    Type: Object
    • element
      Type: jQuery
      一个jQuery对象代表被 resized 的元素。
    • helper
      Type: jQuery
      一个jQuery对象代表被resized元素的助手。
    • originalElement
      Type: jQuery
      一个jQuery对象代表被包裹前原先的元素。
    • originalPosition
      Type: Object
      resizable元素被resized（缩放）前的CSS的position（位置）对象，如{ left, top } 。
    • originalSize
      Type: Object
      resizable元素被resized（缩放）前的尺寸对象，如{ width, height }。
    • position
      Type: Object
      当前可resizable（缩放）元素的CSS的position（位置）对象，如{ top, left }。
    • size
      Type: Object
      当前可resizable（缩放）元素的尺寸对象，{ width, height }。
Code examples:

使用指定的 start 回调初始化一个resizable：

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

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

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

stop( event, ui )Type: resizestop

这个事件将在调整操作结束后触发.
  • event
    Type: Event
  • ui
    Type: Object
    • element
      Type: jQuery
      一个jQuery对象代表被 resized 的元素。
    • helper
      Type: jQuery
      一个jQuery对象代表被resized元素的助手。
    • originalElement
      Type: jQuery
      一个jQuery对象代表被包裹前原先的元素。
    • originalPosition
      Type: Object
      resizable元素被resized（缩放）前的CSS的position（位置）对象，如{ left, top } 。
    • originalSize
      Type: Object
      resizable元素被resized（缩放）前的尺寸对象，如{ width, height }。
    • position
      Type: Object
      当前可resizable（缩放）元素的CSS的position（位置）对象，如{ top, left }。
    • size
      Type: Object
      当前可resizable（缩放）元素的尺寸对象，{ width, height }。
Code examples:

使用指定的 stop 回调初始化一个resizable：

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

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

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

Example:

A simple jQuery UI Resizable.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>resizable demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <style>
  #resizable {
    width: 100px;
    height: 100px;
    background: #ccc;
}    </style>
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
 
<div id="resizable"></div>
 
<script>
$( "#resizable" ).resizable();
</script>
 
</body>
</html>

Demo: