interfaz de usuario de jQuery | Redimensionable

El widget redimensionable de jQuery UI ayuda a arrastrar y cambiar el tamaño de los elementos seleccionados.
Escribamos un código para usar el widget Redimensionable dentro de una etiqueta div.

Sintaxis:

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

1. alsoResize: esta opción le permite cambiar el tamaño de más de un widget en paralelo controlando solo un widget.

Sintaxis:

$( ".selector" ).resizable({
  alsoResize: "#my_widget"
});

2. animar: esta opción se puede usar para agregar animación al cambio de tamaño del elemento.

Sintaxis:

$( ".selector" ).resizable({
  animate: true
});

3. animateDuration: este campo le permite elegir cuánto tiempo desea que dure la animación.

Sintaxis:

$( ".selector" ).resizable({
  animateDuration: "fast"
});

4. animateEasing: estas opciones indican qué tipo de aceleración desea al final de la animación mientras cambia el tamaño.

Sintaxis:

$( ".selector" ).resizable({
  animateEasing: "easeOutBounce"
});

5. aspectRatio: esta opción toma un valor booleano para decidir si se debe seguir una relación de aspecto específica al cambiar el tamaño del widget.

Sintaxis:

$( ".selector" ).resizable({
  aspectRatio: true
});

6. autoHide: esta opción también toma un valor booleano que decide si ocultar o no el identificador cuando el cursor no está sobre el elemento.

Sintaxis:

$( ".selector" ).resizable({
  autoHide: true
});

7. cancelar: Impide el cambio de tamaño del elemento específico elegido.

Sintaxis:

$( ".selector" ).resizable({
  cancel: ".cancel"
});

8. clases: se utiliza para especificar clases adicionales que se agregarán a los widgets. Las clases adicionales se pueden elegir en la sección Themeing de jQuery UI.

Sintaxis:

$( ".selector" ).resizable({
  classes: {
    "ui-resizable": "highlight"
  }
});

9. disabled: toma un valor booleano para decidir desactivar el widget redimensionable.

Sintaxis:

$( ".selector" ).resizable({
  disabled: true
});

10. ayudante: un nombre de clase que se agregará a un elemento proxy para delinear el cambio de tamaño durante el arrastre del controlador de cambio de tamaño. Una vez que se completa el cambio de tamaño, se cambia el tamaño del elemento original.

Sintaxis:

$( ".selector" ).resizable({
  helper: "resizable-helper"
});

11. manijas: qué manijas se pueden usar para cambiar el tamaño.

Múltiples tipos compatibles:

• String: una lista delimitada por comas de cualquiera de los siguientes: n, e, s, w, ne, se, sw, nw, all . Los identificadores necesarios serán generados automáticamente por el complemento.
• Objeto: se admiten las siguientes claves: { n, e, s, w, ne, se, sw, nw }. El valor de cualquier especificado debe ser un selector jQuery que coincida con el elemento secundario del redimensionable para usarlo como identificador. Si el identificador no es un elemento secundario del redimensionable, puede pasar el DOMElement o un objeto jQuery válido directamente.

Sintaxis:

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

Otros atributos importantes: 

• contención: esta opción se utiliza para restringir el tamaño del tamaño variable a un valor máximo y mínimo.
• fantasma: cuando se activa, se muestra un elemento auxiliar semitransparente para cambiar el tamaño.
• cuadrícula: la opción de cuadrícula se utiliza para ajustar los elementos de cambio de tamaño en los elementos de píxeles x e y. De forma predeterminada, su valor se establece en Falso.
• maxHeight: esta opción toma un número como entrada y especifica la altura máxima a la que se puede expandir el elemento redimensionable.
• maxWidth: esta opción se puede usar para especificar el ancho máximo al que se puede expandir el elemento redimensionable.
• minHeight: este widget se usa para especificar la altura mínima a la que se puede comprimir el elemento redimensionable.
• minWidth: esta opción se puede usar para especificar el ancho mínimo al que se puede comprimir el elemento redimensionable.
• destruir: esta opción elimina el widget de información sobre herramientas de jquery ui y lo cambia a la información sobre herramientas nativa.
• desactivar: esta opción desactiva el widget de información sobre herramientas.
• habilitar: esta opción habilita la información sobre herramientas si estaba deshabilitada anteriormente.
• instancia: recupera el objeto de instancia del tamaño variable. Si el elemento no tiene una instancia asociada, se devuelve undefined.
• opción: Obtiene el valor de la actualmente asociada con el nombre de la opción elegida.
• widget: Devuelve un objeto jQuery que contiene el objeto redimensionable.

En el siguiente ejemplo, hemos especificado varios atributos para la etiqueta div como el borde, el fondo para diferenciar entre lo que está dentro de la etiqueta div y lo que está fuera de la etiqueta div.

Ejemplo 1:

<html>
 
<head>
    <link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
          rel='stylesheet'>
    <style>
        #my_resizable {
            height: 80px;
            width: 80px;
            background: #f1f1f1;
            border-style: solid;
            border-color: red;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <div id=my_resizable></div>
 
        <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
        </script>
        <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
        </script>
 
        <script>
            $(document).ready(function() {
 
                $("#my_resizable").resizable();
 
            })
        </script>
    </center>
</body>
 
</html>

Producción:

alsoresize: Usando la opción alsoresize , podemos controlar el tamaño de otro elemento ajustando el tamaño del elemento anterior. Aquí hay un ejemplo donde ajustamos el tamaño de una etiqueta div ajustando el tamaño de otra etiqueta div.

Ejemplo 2: 

<html>
 
<head>
    <link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
          rel='stylesheet'>
    <style>
        .my_box {
            height: 80px;
            width: 80px;
            background: #f1f1f1;
            border-style: solid;
            border-color: red;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <div id=my_resizable class=my_box></div>
        <div id=my_resizable2 class=my_box></div>
 
        <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
      </script>
        <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
      </script>
 
        <script>
            $(document).ready(function() {
 
                $("#my_resizable").resizable({
                    alsoResize: "#my_resizable2"
                });
 
            })
        </script>
    </center>
</body>
 
</html>

Producción:

animar: usando la opción animar podemos agregar un efecto de animación a la forma en que cambia el tamaño del elemento. Hacemos eso configurando su valor en True . De forma predeterminada, se establece en falso.
¡Aquí hay un código de muestra que demuestra esto!

Ejemplo 3: 

<html>
 
<head>
    <link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
          rel='stylesheet'>
    <style>
        .my_box {
            height: 80px;
            width: 80px;
            background: #f1f1f1;
            border-style: solid;
            border-color: red;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <div id=my_resizable class=my_box></div>
 
        <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
      </script>
        <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
      </script>
 
        <script>
            $(document).ready(function() {
 
                $("#my_resizable").resizable({
                    animate: true
                });
 
            })
        </script>
    </center>
</body>
 
</html>

Producción:

animationDuration: Usando animationDuration podemos especificar la velocidad que queremos que tome la animación para cambiar el tamaño del elemento. Aquí hay un ejemplo de esto.

Ejemplo 4:

<html>
 
<head>
    <link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
          rel='stylesheet'>
    <style>
        .my_box {
            height: 80px;
            width: 80px;
            background: #f1f1f1;
            border-style: solid;
            border-color: red;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <div id=my_resizable class=my_box></div>
 
        <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
      </script>
        <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
      </script>
 
        <script>
            $(document).ready(function() {
 
                $("#my_resizable").resizable({
                    animate: true,
                    animateDuration: "fast"
                });
 
            })
        </script>
    </center>
</body>
 
</html>

Producción:

animateEasing: agrega un efecto adicional a la opción de animación, puede especificar el efecto dentro del código jQuery. Hemos utilizado el «easeOutBounce» .

Ejemplo 5:

<html>
 
<head>
    <link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
          rel='stylesheet'>
    <style>
        .my_box {
            height: 80px;
            width: 80px;
            background: #f1f1f1;
            border-style: solid;
            border-color: red;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <div id=my_resizable class=my_box></div>
 
        <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
      </script>
        <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
      </script>
 
        <script>
            $(document).ready(function() {
 
                $("#my_resizable").resizable({
                    animate: true,
                    animateEasing: "easeOutBounce"
                });
 
            })
        </script>
    </center>
</body>
 
</html>

Producción: