jQuery UI 实例 - 缩放（Resizable）

概述

jQuery UI Resizable 使用户可以在网页中缩放一个元素（如div），改变它的宽度和高度。这个插件不仅易用性非常好，而且还支持很多自定义选项。使用 jQuery UI Resizable 可以让用户在网站上轻松地调整元素大小，让网页更具互动性和响应性。

示例

下面我们给出一个使用 jQuery UI Resizable 实现一张图片的缩放的示例。

HTML 部分

首先，我们需要在 HTML 中引入相关的库及界面元素。

<html>
  <head>
    <meta charset="UTF-8">
    <title>jQuery UI Resizable</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  </head>
  <body>
    <div id="resizable" style="width: 200px; height: 200px; border: 1px solid #ccc;">
      <img src="https://picsum.photos/200" style="width: 100%; height: 100%;">
    </div>
  </body>
</html>

JavaScript 部分

然后，我们需要在 JavaScript 中使用 jQuery UI Resizable。

$(function() {
  $( "#resizable" ).resizable({
    animate: true,
    aspectRatio: true,
    containment: "parent",
    handles: "n, e, s, w, ne, se, sw, nw"
  });
});

代码解释

在 HTML 中，我们使用了一个div元素来包含图片，该div元素被设置了边框样式，并且是可缩放的。
在 JavaScript 中，我们使用了jQuery UI中提供的resizable()方法，来将div元素设置为可缩放的。我们还传递了请求选项，进行自定义配置。
- animate：启用动画效果
- aspectRatio：限制宽高比例，即保持图片的原始比例不变。
- containment：限制缩放范围。“parent"可以让div元素在其父元素的范围内缩放；“document"则可以使其在整个文档区内缩放。
- handles：指定缩放控制点。n - 北，e - 东，s - 南，w - 西，ne - 东北，se - 东南，sw - 西南，nw - 西北。

自定义选项

除了上述示例中的选项，jQuery UI Resizable 还支持其他自定义选项。在这里，我们简单介绍一下。

delay：在鼠标移动到控制点后，延迟多久开始缩放。
disabled：是否启用缩放功能。
ghost：设置是否显示拖动效果。默认值是 “false”，即直接改变大小。
grid：指定缩放时的网格大小。如果值为[10,10]，则每 10 像素就会吸附一次。
minWidth 和 minHeight：指定元素的最小宽度和高度。
maxWidth 和 maxHeight：指定元素的最大宽度和高度。

结论

jQuery UI Resizable 是一个非常实用和好用的插件，它可以让你轻松地将元素设置为可缩放的，并且你可以根据需要自定义选项，进行更好的体验。

如果你需要缩放元素，并且不想自己从头实现这个功能，那么 jQuery UI Resizable 就是一个非常好的选择。

jQuery UI 实例 - 移除 Class（Remove Class） jQuery UI 实例 - 自动完成（Autocomplete）