Resizable Widget

优质

小牛编辑

133浏览

2023-12-01

Categories: Interactions

version added: 1.0

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

QuickNavExamples

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的相关选项值。

optionNameType: String要设置值的选项名。
valueType: Object要设置选项的值。

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创建时触发。

eventType: Event
uiType: Object

注意：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>

Resizable Widget

version added: 1.0

QuickNavExamples

Options

Methods

Events

Dependencies

其他注意事项：

Options

alsoResizeType: Selector or jQuery or Element

animateType: Boolean

animateDurationType: Number or String

animateEasingType: String

aspectRatioType: Boolean or Number

autoHideType: Boolean

cancelType: Selector

containmentType: Selector or Element or String

delayType: Number

disabledType: Boolean

distanceType: Number

ghostType: Boolean

gridType: Array

handlesType: String or Object

helperType: String

maxHeightType: Number

maxWidthType: Number

minHeightType: Number

minWidthType: Number

Methods

destroy()

disable()

enable()

option( optionName )Returns: Object

option()Returns: PlainObject

option( optionName, value )

option( options )

widget()Returns: jQuery

Events

create( event, ui )Type: resizecreate

resize( event, ui )Type: resize

start( event, ui )Type: resizestart

stop( event, ui )Type: resizestop

Example:

A simple jQuery UI Resizable.

create( event, ui )Type: `resizecreate`

resize( event, ui )Type: `resize`

start( event, ui )Type: `resizestart`

stop( event, ui )Type: `resizestop`