jQuery UI |可调整大小

jQuery UI 的可调整大小小部件有助于拖动和调整所选元素的大小。
让我们编写一个代码来使用 div 标签内的 Resizeable 小部件。

句法：

$( "#my_resizable" ).resizable();

选项：

alsoResize：此选项允许您通过仅控制一个小部件来并行调整多个小部件的大小。
句法：
```
$( ".selector" ).resizable({
  alsoResize: "#my_widget"
});
```
animate：此选项可用于为元素的大小调整添加动画。
句法：
```
$( ".selector" ).resizable({
  animate: true
});
```
animateDuration：此字段允许您选择希望动画持续多长时间。
句法：
```
$( ".selector" ).resizable({
  animateDuration: "fast"
});
```
animateEasing：此选项说明在调整大小时在动画结束时您想要什么样的缓动。
句法：
```
$( ".selector" ).resizable({
  animateEasing: "easeOutBounce"
});
```
纵横比：
此选项采用布尔值来决定在调整小部件大小时是否应遵循特定的纵横比。
句法：
```
$( ".selector" ).resizable({
  aspectRatio: true
});
```
autoHide：此选项还采用布尔值，当光标未悬停在元素上时，该值决定是否隐藏句柄。
句法：
```
$( ".selector" ).resizable({
  autoHide: true
});
```
取消：防止调整所选特定元素的大小。
句法：
```
$( ".selector" ).resizable({
  cancel: ".cancel"
});
```
classes：用于指定要添加到小部件的附加类。附加类可以在 jQuery UI 的主题部分中选择。
句法：
```
$( ".selector" ).resizable({
  classes: {
    "ui-resizable": "highlight"
  }
});
```
禁用：采用布尔值来决定禁用可调整大小的小部件。
句法：
```
$( ".selector" ).resizable({
  disabled: true
});
```
helper：一个类名，将被添加到代理元素中，用于在拖动调整大小手柄期间概述调整大小。调整大小完成后，将调整原始元素的大小。
句法：
```
$( ".selector" ).resizable({
  helper: "resizable-helper"
});
```

handles：哪些句柄可用于调整大小。
支持多种类型：

字符串：以下任何一项的逗号分隔列表： n, e, s, w, ne, se, sw, nw, all 。必要的句柄将由插件自动生成。

对象：支持以下键：{ n, e, s, w, ne, se, sw, nw }。任何指定的值应该是一个 jQuery 选择器，它匹配可用作该句柄的可调整大小的子元素。如果句柄不是 resizable 的子级，则可以直接传入 DOMElement 或有效的 jQuery 对象。

句法：

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

其他重要属性：

包含：此选项用于将可调整大小的大小限制为最大值和最小值。
ghost：触发时，会显示一个半透明的辅助元素以调整大小。
grid： grid 选项用于捕捉像素元素 x 和 y 中的调整大小元素。默认情况下，其值设置为 False。
maxHeight：此选项将数字作为输入，并指定可调整大小的元素可以扩展到的最大高度。
maxWidth：此选项可用于指定可调整大小的元素可以扩展到的最大宽度。
minHeight：此小部件用于指定可允许将可调整大小的元素压缩到的最小高度。
minWidth：此选项可用于指定允许将可调整大小的元素压缩到的最小宽度。
destroy：此选项删除 jquery ui 的工具提示小部件并将其更改为本机工具提示。
禁用：此选项禁用工具提示小部件。
启用：如果之前被禁用，此选项会启用工具提示。
实例：检索可调整大小的实例对象。如果元素没有关联的实例，则返回 undefined。
option：获取当前与所选选项名称关联的值。
小部件：返回一个包含可调整大小对象的 jQuery 对象。

在下面的示例中，我们为 div 标签指定了各种属性，如边框、背景以区分 div 标签内的内容和 div 标签外的内容。
示例 1：


  

    
    

  

    
        GeeksforGeeks

输出：

alsoresize：使用alsoresize选项，我们可以通过调整前一个元素的大小来控制另一个元素的大小。这是一个示例，我们通过调整另一个 div 标签的大小来调整 div 标签的大小。
示例 2：


  

    
    

  

    
        GeeksforGeeks

输出：

animate：使用animate选项，我们可以为元素大小的变化方式添加动画效果。我们通过将其值设置为True 来实现。默认情况下，它设置为 false。
这是演示这一点的示例代码！
示例 3：


  

    
    

  

    
        GeeksforGeeks

输出：

animationDuration：使用animationDuration我们可以指定我们希望动画调整元素大小的速度。这是一个例子。
示例 4：


  

    
    

  

    
        GeeksforGeeks

输出：

animateEasing：给animate选项增加一个额外的效果，你可以在jQuery代码中指定效果。我们使用了“easeOutBounce” 。
示例 5：


  

    
    

  

    
        GeeksforGeeks

输出：