jQuery UI | 可调整大小

介绍

jQuery UI 是一个基于 jQuery 的用户界面库。它提供了丰富多样的组件和交互效果，让开发者可以轻松创建功能强大且美观的用户界面。其中之一便是可调整大小组件（Resizable）。可调整大小组件允许开发者将 HTML 元素设置为可调整大小，并且支持自定义回调函数处理拖动过程中产生的事件。

安装

在使用可调整大小组件之前，需要先引入 jQuery 和 jQuery UI 库，并加载可调整大小组件。可以使用 CDN 或下载本地文件夹：

CDN

<!-- 引入 jQuery 库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- 引入 jQuery UI 库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<!-- 引入可调整大小组件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">

下载本地文件夹

从 jQuery UI 官方网站下载需要的文件：

• jquery.js
• jquery-ui.js
• jquery-ui.css

在 HTML 中引入文件：

<!-- 引入 jQuery 库 -->
<script src="jquery.js"></script>

<!-- 引入 jQuery UI 库 -->
<script src="jquery-ui.js"></script>

<!-- 引入可调整大小组件 -->
<link rel="stylesheet" href="jquery-ui.css">

使用

初始化

可调整大小组件的初始化非常简单，只需要调用 resizable() 方法：

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

上述代码会对所有指定的元素添加可调整大小的功能。如果只想对某个特定的元素添加可调整大小的功能，可以传入一个 CSS 选择器作为参数。

可调整大小的方向

默认情况下，可调整大小组件在所有方向上都可调整大小。如果只想允许在水平或垂直方向上调整大小，可以指定 handles 选项。

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

上述代码只允许在北、东、南、西四个方向上调整大小。

指定回调函数

可调整大小组件在拖出大小时会触发许多事件，可以通过指定回调函数来处理这些事件。回调函数可以定义在 resizable() 方法后面的参数中。

$( ".selector" ).resizable({
  stop: function( event, ui ) {
    console.log( "New size: " + ui.size.width + ", " + ui.size.height );
  }
});

上述代码为 stop 事件指定了一个回调函数，拖动结束后会将新的宽度和高度打印到控制台中。

其他选项

除了上述介绍的 handles 和回调函数外，可调整大小组件还有许多其他选项，如下表所示。

| 选项名称 | 数据类型 | 说明 | | --------------- | --------- | ------------------------------------------ | | animate | 布尔值 | 是否使用动画效果 | | animateDuration | 数字 | 动画效果持续时间（毫秒） | | animateEasing | 字符串 | 动画效果的缓动函数（默认为 "swing"） | | aspectRatio | 布尔值或数字 | 是否保持宽高比例（等同于 CSS 的 aspect-ratio） | | autoHide | 布尔值 | 是否自动隐藏调整大小的手柄 | | containment | 字符串或元素 | 拖动范围的限制（可以是 CSS 选择器或 DOM 元素） | | grid | 数组 | 调整大小的步长 | | maxWidth | 数字 | 可调整大小的最大宽度 | | maxHeight | 数字 | 可调整大小的最大高度 | | minWidth | 数字 | 可调整大小的最小宽度 | | minHeight | 数字 | 可调整大小的最小高度 | | alsoResize | 字符串或元素 | 同时调整大小的其它元素 |

结语

可调整大小组件是一个非常实用的功能，可以让用户根据实际需求自由调整页面上的组件大小。通过 jQuery UI 库提供的可调整大小组件，开发者可以轻松地实现这个功能，并且自定义程度非常高。