jQuery UI 可调整大小完整参考

jQuery UI 可调整大小是一个用户界面库，可让您轻松地创建可调整大小的组件。它提供了一个可调整大小的 API，使您能够轻松地实现拖动和缩放的功能。

如何使用

要使用 jQuery UI 可调整大小，您需要首先引入 jQuery 及 jQuery UI 库。然后，在您的 HTML 中创建一个可调整大小的元素，如下所示：

<div class="resizable"></div>

接下来，您需要在 JavaScript 中初始化可调整大小的元素，并设置拖动和调整大小的选项，如下所示：

$('.resizable').resizable({
  // 设置拖动选项
  handles: 'n, e, s, w, ne, se, sw, nw',
  // 设置调整大小选项
  minWidth: 50,
  minHeight: 50,
  maxWidth: 300,
  maxHeight: 300,
  animate: true
});

API

以下是 jQuery UI 可调整大小的完整 API 参考：

选项

选项 | 类型 | 默认值 | 描述 --- | --- | --- | --- alsoResize | String, Element, Selector | | 与当前元素一起调整大小的其他元素。值可以是元素的 ID、DOM 元素或选择器字符串。 animate | Boolean, Number | false | 指定调整大小时是否使用动画效果。如果设置为 true，则使用默认的动画效果。您还可以设置动画时长的毫秒数。 animateDuration | String, Number | "slow" | 设置调整大小时使用的动画时长。值可以是一个字符串名称（例如 "slow" 或 "fast"）或一个毫秒数。 animateEasing | String | "swing" | 设置调整大小时使用的动画缓动效果。 aspectRatio | Boolean, Number | false | 是否保持纵横比。如果设置为一个数字，则该数字表示元素的高度与宽度之比。 autoHide | Boolean | false | 是否在调整大小期间自动隐藏元素。 cancel | String | "input,textarea,button,select,option" | 选择器字符串，表示应忽略哪些元素的拖动操作。 containment | String, Element, Selector, Boolean | null | 指定可调整大小的元素应该被限制到的容器。值可以是元素的 ID、DOM 元素或选择器字符串，或者设置为 true 表示使用父元素作为容器。 disable | Boolean | false | 是否禁用调整大小功能。 distance | Number | 1 | 当拖动开始前，指定指针必须移动的像素数。这有助于防止意外的拖动。 ghost | Boolean | false | 是否使用"ghost"状态来显示调整大小的效果。这使得元素的外观仍然与调整大小前一致，但会影响性能。 grid | Array | [1, 1] | 数组，表示对齐网格的每个单元格的像素数。例如，设置为 [10, 10] 表示对齐到每个 10 像素的单元格。 handles | String, Element, Selector | "e, s, se" | 指定要显示的调整大小手柄的位置。值可以是一个字符串，如 "n, e, s, w, ne, se, sw, nw"，也可以是元素的 ID、DOM 元素或选择器字符串。 helper | String | null | 指定要使用的拖动助手类型。可以是一个 CSS 类名、一个函数或一个字符串。如果未设置，则默认为原始元素。 maxHeight | Number | null | 调整大小的最大高度。如果未设置，则没有限制。 maxWidth | Number | null | 调整大小的最大宽度。如果未设置，则没有限制。 minHeight | Number | 10 | 调整大小的最小高度。 minWidth | Number | 10 | 调整大小的最小宽度。 zIndex | Number | null | 调整大小时应该使用的分层级别。

方法

方法 | 描述 --- | --- destroy | 销毁可调整大小组件，移除所有事件和样式。 disable | 禁用可调整大小组件。 enable | 启用可调整大小组件。 widget | 获取可调整大小元素的 jQuery 对象。

事件

事件 | 描述 --- | --- create | 创建可调整大小组件时触发的事件。 resize | 调整大小完成后触发的事件。 start | 调整大小开始之前触发的事件。 stop | 调整大小完成之后触发的事件。

结论

jQuery UI 可调整大小是一个强大的用户界面库，可以轻松地为您的 Web 应用程序添加可调整大小的元素。它提供了丰富的选项和 API，可帮助您快速创建自定义的可调整大小组件。