jQuery UI
jQuery UI 简介 jQuery UI 下载 jQuery UI 使用 jQuery UI 定制 jQuery UI 工作原理 jQuery UI 主题 jQuery UI ThemeRoller jQuery UI CSS 框架 API jQuery UI 设计主题 jQuery UI 部件库 jQuery UI 扩展小部件 jQuery UI 小部件方法调用 jQuery UI 为什么使用部件库 jQuery UI 如何使用部件库 jQuery UI API 文档 API 类别 - 特效 API 类别 - 特效核心 API 类别 - 交互 API 类别 - 方法重载 API 类别 - 方法 API 类别 - 选择器 API 类别 - 主题 API 类别 - UI 核心 API 类别 - 实用工具 API 类别 - 小部件
首页 > JavaScript > jQuery UI

可调整尺寸小部件（Resizable Widget）

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

所属类别

交互（Interactions）

用法

描述：使用鼠标改变元素的尺寸。

版本新增：1.0

依赖：


注释：jQuery UI 可调整尺寸（Resizable）插件让被选元素可调整尺寸（意味着它们有可拖拽的调整大小的手柄）。您可以指定一个或多个手柄，也可以指定宽度和高度的最小值也最大值。

附加说明：该部件要求一些功能性的 CSS，否则将无法工作。如果您创建了一个自定义的主题，请使用小部件指定的 CSS 文件作为起点。

快速导航

选项 方法 事件

选项 类型 描述 默认值
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-handleclass，也可以是适当的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

方法 返回 描述
destroy() jQuery (plugin only) 完全移除 resizable 功能。这会把元素返回到它的预初始化状态。
  • 该方法不接受任何参数。

代码实例：

调用 destroy 方法： 

$( ".selector" ).resizable( "destroy" );
disable() jQuery (plugin only) 禁用 resizable。
  • 该方法不接受任何参数。

代码实例：

调用 disable 方法： 

$( ".selector" ).resizable( "disable" );
enable() jQuery (plugin only) 启用 resizable。
  • 该方法不接受任何参数。

代码实例：

调用 enable 方法： 

$( ".selector" ).resizable( "enable" );
option( optionName ) Object 获取当前与指定的optionName关联的值。
  • optionName
    类型：String
    描述：要获取的选项的名称。

代码实例：

调用该方法： 

var isDisabled = $( ".selector" ).resizable( "option", "disabled" );
option() PlainObject 获取一个包含键/值对的对象，键/值对表示当前 resizable 选项哈希。
  • 该方法不接受任何参数。

代码实例：

调用该方法： 

var options = $( ".selector" ).resizable( "option" );
option( optionName, value ) jQuery (plugin only) 设置与指定的optionName关联的 resizable 选项的值。
  • optionName
    类型：String
    描述：要设置的选项的名称。
  • value
    类型：Object
    描述：要为选项设置的值。

代码实例：

调用该方法： 

$( ".selector" ).resizable( "option", "disabled", true );
option( options ) jQuery (plugin only) 为 resizable 设置一个或多个选项。
  • options
    类型：Object
    描述：要设置的 option-value 对。

代码实例：

调用该方法： 

$( ".selector" ).resizable( "option", { disabled: true } );
widget() jQuery 返回一个包含 resizable 元素的jQuery对象。
  • 该方法不接受任何参数。

代码实例：

调用 widget 方法： 

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

事件 类型 描述
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 ) {} );

实例

一个简单的 jQuery UI 可调整尺寸小部件（Resizable Widget）。 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>可调整尺寸小部件（Resizable Widget）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  #resizable {
    width: 100px;
    height: 100px;
    background: #ccc;
}	</style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<div id="resizable"></div>
 
<script>
$( "#resizable" ).resizable();
</script>
 
</body>
</html>
上一篇
© 2021 jiaocheng.bubufx.com  联系我们
ICP备案：鲁ICP备09046678号-3