jQuery UI resizablejQuery UI resizable() method is used to resize any DOM element. It simplifies the method of resizing of elements and reduces time and a lot of coding. The resizable () method displays an icon in the bottom right of the item to resize. Syntax: You can use the resizable () method in two forms: First MethodThe resizable (options) method specifies that you can resize an HTML element. Here the ?options? parameter is an object that specifies the behavior of the elements involved when resizing. Syntax: You can use one or more options at a time of using JavaScript object. In the case of more than one option, you have to separate them using a comma as follows: Following is a list of different options that can be used with this method: 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 <div> 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 <div> 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. |
jQueryUI resizable() Example 1Let's take a simple example to demonstrate the resizable functionality, passing no parameter to the resizable () method. Test it NowjQueryUI resizable() example 2Use of animate and ghost: The following example shows the usage of two options animate and ghost in the resize function of jQuery UI Test it NowjQuery UI resizable() example 3Use of delay, distance and autoHide: The following example shows the usage of three options delay, distance and autoHide in the resize function of jQuery UI. Test it NowjQuery UI resizable() example 4Use of alsoResize: The following example demonstrates the use of option alsoResize in the resize function of jQuery UI. Test it NowSecond MethodThe resizable ("action", params) method is used to perform an action on resizable elements. For example: allowing or preventing resizing functionality. The action is specified as a string in the first argument (e.g., "disable" to prevent the resize). Syntax: Following is a list of actions that can be used with this method: 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. |
jQueryUI resizable() example 5Let's take some examples to demonstrate the usage of actions from the above table. In the following example, we are going to demonstrate the use of destroy () and disable () methods. Test it Now
|