📅 最后修改于: 2020-11-27 01:56:16 🧑 作者: Mango
jQuery UI resizable()方法用于调整任何DOM元素的大小。它简化了调整元素大小的方法，并减少了时间和大量编码。
resizable()方法在该项目的右下角显示一个图标，以调整大小。
句法：
您可以通过两种形式使用resizable()方法：
$(selector, context).resizable (options) Method
$(selector, context).resizable ("action", params) Method
可调整大小的(选项)方法指定您可以调整HTML元素的大小。这里的选项?参数是一个对象，它指定调整大小时涉及的元素的行为。
句法：
$(selector, context).resizable (options);
一次使用JavaScript对象时，可以使用一个或多个选项。如果有多个选项，则必须使用逗号将它们分开，如下所示：
$(selector, context).resizable ({option1: value1, option2: value2..... });
以下是可与该方法一起使用的不同选项的列表：
| Option | Description |
|---|---|
| alsoResize | This option is of type selector, jQuery , or any DOM element. It represents elements that also resize when resizing the original object. By default its value is FALSE. |
| animate | If you set this option to TRUE, it enables a visual effect during resizing when the mouse button is released. The default value is FALSE (no effect). |
| animateDuration | This option specifies the duration of the resizing effect in millisecond. It is used only when animate option is true. By default its value is “slow”. |
| animateEasing | This option specifies which easing should be applied when using the animate option. By default its value is “swing”. |
| aspectRatio | This option indicates the aspect (height and width) ratio for the item. By default its value is false. |
| autoHide | This option is used to hide the magnification icon or handles, except when the mouse is over the item. By default its value is false. |
| cancel | This option is used to prevent resizing on specified elements. By default its value is input, textarea, button, select, option. |
| containment | This option is used restrict the resizing of elements within a specified element or region. By default its value is false. |
| delay | This option is used to set tolerance or delay in milliseconds. After that, resizing or displacement will begin. By default its value is 0. |
| disabled | If you set this option to TRUE, it disables the resizing mechanism. The mouse no longer resizes elements, until the mechanism is enabled, using the resizable (“enable”). By default its value is false. |
| distance | This option specifies that the resizing will start only when the mouse moves a distance(pixels). By default its value is 1 pixel. This can help prevent unintended resizing when clicking on an element. |
| ghost | If you set this option to TRUE, a semi-transparent helper element is shown for resizing. This ghost item will be deleted when the mouse is released. By default its value is false. |
| grid | This option is of type array [x, y], indicating the number of pixels that the element expands horizontally and vertically during movement of the mouse. By default its value is false. |
| handles | This option is a character string that specifies which sides or angles of the element can be resized. By default its values are e, s, se. |
| helper | This option is used to add a CSS class to style the element which you want to resize. When the element is resized a new element is created, which is the one that is scaled (UI-resizable-helper class). Once the resize is complete, the original element is sized and the element disappears. By default its value is false. |
| maxHeight | This option is used to set the maximum height the resizable should be allowed to resize to. By default its value is NULL. |
| maxWidth | This option is used to set the maximum width the resizable should be allowed to resize to. By default its value is NULL. |
| minHeight | This option is used to set the minimum height the resizable should be allowed to resize to. By default its value is 10. |
| minWidth | This option is used to set the minimum width the resizable should be allowed to resize to. By default its value is 10. |
让我们以一个简单的示例来演示可调整大小的功能，不将任何参数传递给resizable()方法。
jQuery UI Resizable functionality
使用动画和重影：
下面的示例显示了jQuery UI的resize函数中两个选项animate和ghost的用法
jQuery UI Resizable functionality
使用延迟，距离和自动隐藏：
以下示例显示了jQuery UI的调整大小函数中三个选项delay，distance和autoHide的用法。
jQuery UI Resizable functionality
使用alsoResize：
下面的示例演示了jQuery UI的resize函数中option AlsoResize选项的用法。
jQuery UI Resizable functionality
可调整大小(“操作”，参数)方法用于对可调整大小的元素执行操作。例如：允许或阻止调整功能。该动作在第一个参数中指定为字符串(例如，“ disable”以防止调整大小)。
句法：
$(selector, context).resizable ("action", params);
以下是可与此方法一起使用的操作的列表：
| Action | Description |
|---|---|
| destroy | This action is used to destroy the resizable functionality of an element completely. This will return the element back to its pre-init state. |
| disable | This action is used to disable the resizing functionality of an element. This method does not accept any arguments. |
| enable | This action is used to enable the resizing functionality of an element. This method does not accept any arguments. |
| option( optionName ) | This action retrieves the value of the specified optionName. This option corresponds to one of those used with resizable (options). |
| option() | This action is used to get an object containing key/value pairs representing the current resizable options hash. This action does not accept any arguments. |
| option(optionName, value ) | This action sets the value of the resizable option with the specified optionName. This option corresponds to one of those used with resizable (options). |
| option( Options ) | This action sets one or more options for the resizable. |
| widget() | This action returns a jQuery object containing the resizable element. This method does not accept any arguments. |
让我们以一些示例来演示上表中操作的用法。
在下面的示例中，我们将演示destroy()和disable()方法的用法。
jQuery UI Resizable functionality