JqueryUI - Redimensionable

jQueryUI proporciona el método resizable () para cambiar el tamaño de cualquier elemento DOM. Este método simplifica el cambio de tamaño del elemento que, de lo contrario, lleva tiempo y mucha codificación en HTML. El método resizable () muestra un icono en la parte inferior derecha del elemento para cambiar el tamaño.

Sintaxis

los resizable() El método se puede utilizar de dos formas:

$ (selector, contexto) .resizable (opciones) Método
$ (selector, context) .resizable ("action", params) Método

$ (selector, contexto) .resizable (opciones) Método

El método resizable (opciones) declara que se puede cambiar el tamaño de un elemento HTML. El parámetro de opciones es un objeto que especifica el comportamiento de los elementos involucrados al cambiar el tamaño.

Sintaxis

$(selector, context).resizable (options);

Puede proporcionar una o más opciones a la vez de usar el objeto Javascript. Si hay más de una opción para proporcionar, las separará con una coma de la siguiente manera:

$(selector, context).resizable({option1: value1, option2: value2..... });

La siguiente tabla enumera las diferentes opciones que se pueden utilizar con este método:


$( ".selector" ).resizable({ alsoResize: "#identifier" });
$( ".selector" ).resizable({ animate: true });
$( ".selector" ).resizable({ animateDuration: "fast" });
$( ".selector" ).resizable({ animateEasing: "easeOutBounce" });
$( ".selector" ).resizable({ aspectRatio: true });
$( ".selector" ).resizable({ autoHide: true });
$( ".selector" ).resizable({ cancel: ".cancel" });
$( ".selector" ).resizable({ containment: "parent" });
$( ".selector" ).resizable({ delay: 150 });
$( ".selector" ).resizable({ disabled: true });
$( ".selector" ).resizable({ distance: 30 });
$( ".selector" ).resizable({ ghost: true });
$( ".selector" ).resizable({ grid: [ 20, 10 ] });
$( ".selector" ).resizable({ handles: "n, e, s, w" });
$( ".selector" ).resizable({ helper: "resizable-helper" });
$( ".selector" ).resizable({ maxHeight: 300 });
$( ".selector" ).resizable({ maxWidth: 300 });
$( ".selector" ).resizable({ minHeight: 150 });
$( ".selector" ).resizable({ minWidth: 150 });

No Señor.	Opción y descripción
1	alsoResize Esta opción es de tipo Selector , jQuery o cualquier elemento DOM . Representa elementos que también cambian de tamaño al cambiar el tamaño del objeto original. Por defecto su valor esfalse. Option - alsoResize Esta opción puede ser de tipo Selector , jQuery o cualquier Elemento DOM . Representa elementos que también cambian de tamaño al cambiar el tamaño del objeto original. Por defecto su valor esfalse. Esto puede ser de tipo: Selector - Este tipo indica elementos DOM que se seleccionarán de un documento DOM para cambiar su tamaño. jQuery- Se llamará a una función de devolución de llamada para cada elemento de tamaño variable en la página. Esta función debería devolver verdadero si se cambia el tamaño del elemento. Element - Un elemento en el Modelo de objetos de documento (DOM). Syntax `$( ".selector" ).resizable({ alsoResize: "#identifier" });`
2	animar Esta opción cuando se establece en truese utiliza para habilitar un efecto visual durante el cambio de tamaño cuando se suelta el botón del mouse. El valor predeterminado esfalse (sin efecto). Option - animate Esta opción cuando se establece en truese utiliza para habilitar un efecto visual durante el cambio de tamaño cuando se suelta el botón del mouse. El valor predeterminado esfalse (sin efecto). Syntax `$( ".selector" ).resizable({ animate: true });`
3	animateDuration Esta opción se utiliza para establecer la duración (en milisegundos) del efecto de cambio de tamaño. Esta opción se usa solo cuandoanimateLa opción es verdadera . Por defecto su valor es"slow". Option - animateDuration Esta opción se utiliza para establecer la duración (en milisegundos) del efecto de cambio de tamaño. Esta opción se usa solo cuandoanimateLa opción es verdadera . Por defecto su valor es"slow". Esto puede ser de tipo: Number - Esto especifica la duración en milisegundos. String - Esto separa la duración con nombre, como "lento" o "rápido". Syntax `$( ".selector" ).resizable({ animateDuration: "fast" });`
4	animar Esta opción se utiliza para especificar qué suavizado aplicar al utilizar laanimateopción. Por defecto su valor es"swing". Option - animateEasing Esta opción se utiliza para especificar qué suavizado aplicar al utilizar laanimateopción. Por defecto su valor es"swing". Las funciones de aceleración especifican la velocidad a la que progresa una animación en diferentes puntos dentro de la animación. Syntax `$( ".selector" ).resizable({ animateEasing: "easeOutBounce" });`
5	AspectoRatio Esta opción se utiliza para indicar si se debe mantener la relación de aspecto (alto y ancho) del elemento. Por defecto su valor esfalse. Option - aspectRatio Esta opción se utiliza para indicar si se debe mantener la relación de aspecto (alto y ancho) del elemento. Por defecto su valor esfalse. Esto puede ser de tipo: Boolean- Este valor si se establece en verdadero , el elemento mantendrá su relación de aspecto original. Number - Esto especifica el elemento para mantener una relación de aspecto específica durante el cambio de tamaño. Syntax `$( ".selector" ).resizable({ aspectRatio: true });`
6	auto-escondite Esta opción se utiliza para ocultar el icono de ampliación o los tiradores, excepto cuando el ratón está sobre el elemento. Por defecto su valor esfalse. Option - autoHide Esta opción se utiliza para ocultar el icono de ampliación o los tiradores, excepto cuando el ratón está sobre el elemento. Por defecto su valor esfalse. Syntax `$( ".selector" ).resizable({ autoHide: true });`
7	cancelar Esta opción se utiliza para evitar el cambio de tamaño en elementos especificados. Por defecto su valor esinput,textarea,button,select,option. Option - cancel Esta opción se utiliza para evitar el cambio de tamaño en elementos especificados. Por defecto su valor esinput,textarea,button,select,option. Syntax `$( ".selector" ).resizable({ cancel: ".cancel" });`
8	contención Esta opción se utiliza para restringir el cambio de tamaño de los elementos dentro de un elemento o región especificados. Por defecto su valor esfalse. Option - containment Esta opción se utiliza para restringir el cambio de tamaño de los elementos dentro de un elemento o región especificados. Por defecto su valor esfalse. Esto puede ser de tipo: Selector - Este tipo indica que el elemento redimensionable se incluirá solo en el primer elemento de la lista que encuentre el selector. Element- Este tipo indica cualquier elemento DOM. El elemento redimensionable estará contenido en el cuadro delimitador de este elemento. String- Los valores posibles para este tipo son - padre y documento . Syntax `$( ".selector" ).resizable({ containment: "parent" });`
9	retrasar Esta opción se utiliza para establecer la tolerancia o el retraso en milisegundos. El cambio de tamaño o el desplazamiento comenzará a partir de entonces. Por defecto su valor es0. Option - delay Esta opción se utiliza para establecer la tolerancia o el retraso en milisegundos. El cambio de tamaño o el desplazamiento comenzará a partir de entonces. Por defecto su valor es0. Syntax `$( ".selector" ).resizable({ delay: 150 });`
10	discapacitado Esta opción desactiva el mecanismo de cambio de tamaño cuando se establece en verdadero . El mouse ya no cambia el tamaño de los elementos, hasta que se habilita el mecanismo, usando el redimensionable ("habilitar"). Por defecto su valor esfalse. Option - disabled Esta opción desactiva el mecanismo de cambio de tamaño cuando se establece en verdadero . El mouse ya no cambia el tamaño de los elementos, hasta que se habilita el mecanismo, usando el redimensionable ("habilitar"). Por defecto su valor esfalse. Syntax `$( ".selector" ).resizable({ disabled: true });`
11	distancia Con esta opción, el cambio de tamaño comienza solo cuando el mouse se mueve una distancia (píxeles). Por defecto su valor es1 pixel. Esto puede ayudar a evitar cambios de tamaño no deseados al hacer clic en un elemento. Option - distance Con esta opción, el cambio de tamaño comienza solo cuando el mouse se mueve una distancia (píxeles). Por defecto su valor es1 pixel. Esto puede ayudar a evitar cambios de tamaño no deseados al hacer clic en un elemento. Syntax `$( ".selector" ).resizable({ distance: 30 });`
12	fantasma Esta opción cuando se establece en verdadera , se muestra un elemento auxiliar semitransparente para cambiar el tamaño. Este elemento fantasma se eliminará cuando se suelte el mouse. Por defecto su valor esfalse. Option - ghost Esta opción cuando se establece en verdadera , se muestra un elemento auxiliar semitransparente para cambiar el tamaño. Este elemento fantasma se eliminará cuando se suelte el mouse. Por defecto su valor esfalse. Syntax `$( ".selector" ).resizable({ ghost: true });`
13	cuadrícula Esta opción es de tipo Array [x, y], indicando el número de píxeles que el elemento expande horizontal y verticalmente durante el movimiento del mouse. Por defecto su valor esfalse. Option - grid Esta opción es de tipo Array [x, y], indicando el número de píxeles que el elemento expande horizontal y verticalmente durante el movimiento del mouse. Por defecto su valor esfalse. Syntax `$( ".selector" ).resizable({ grid: [ 20, 10 ] });`
14	manejas Esta opción es una cadena de caracteres que indica qué lados o ángulos del elemento se pueden cambiar de tamaño. Por defecto, sus valores sone, s, se. Option - handles Esta opción es una cadena de caracteres que indica qué lados o ángulos del elemento se pueden cambiar de tamaño. Los valores posibles son: n, e, s y w para los cuatro lados y ne, se, nw y sw para las cuatro esquinas. Las letras n, e, s y w representan los cuatro puntos cardinales (norte, sur, este y oeste). Por defecto, sus valores son e, s, se. Syntax `$( ".selector" ).resizable({ handles: "n, e, s, w" });`
15	ayudante Esta opción se utiliza para agregar una clase CSS para diseñar el elemento que se cambiará de tamaño. Cuando se cambia el tamaño del elemento, se crea un nuevo elemento <div>, que es el que se escala (clase ui-resizable-helper). Una vez que se completa el cambio de tamaño, se cambia el tamaño del elemento original y el elemento <div> desaparece. Por defecto su valor esfalse. Option - helper Esta opción se utiliza para agregar una clase CSS para diseñar el elemento que se cambiará de tamaño. Cuando se cambia el tamaño del elemento, se crea un nuevo elemento <div>, que es el que se escala (clase ui-resizable-helper). Una vez que se completa el cambio de tamaño, se cambia el tamaño del elemento original y el elemento <div> desaparece. Por defecto su valor esfalse. Syntax `$( ".selector" ).resizable({ helper: "resizable-helper" });`
dieciséis	Altura máxima Esta opción se utiliza para establecer la altura máxima a la que se le debe permitir cambiar el tamaño al que se puede cambiar el tamaño. Por defecto su valor esnull. Option - maxHeight Esta opción se utiliza para establecer la altura máxima a la que se le debe permitir cambiar el tamaño al que se puede cambiar el tamaño. Por defecto su valor esnull. Syntax `$( ".selector" ).resizable({ maxHeight: 300 });`
17	anchura máxima Esta opción se utiliza para establecer el ancho máximo al que se le debe permitir cambiar el tamaño del redimensionable. Por defecto su valor esnull. Option - maxWidth Esta opción se utiliza para establecer el ancho máximo al que se le debe permitir cambiar el tamaño del redimensionable. Por defecto su valor esnull. Syntax `$( ".selector" ).resizable({ maxWidth: 300 });`
18	minHeight Esta opción se usa para establecer la altura mínima a la que se le debe permitir cambiar el tamaño al que se puede cambiar el tamaño. Por defecto su valor es10. Option - minHeight Esta opción se usa para establecer la altura mínima a la que se le debe permitir cambiar el tamaño al que se puede cambiar el tamaño. Por defecto su valor es10. Syntax `$( ".selector" ).resizable({ minHeight: 150 });`
19	minWidth Esta opción se usa para establecer el ancho mínimo al que se le debe permitir cambiar el tamaño. Por defecto su valor es10. Option - minWidth Esta opción se usa para establecer el ancho mínimo al que se le debe permitir cambiar el tamaño. Por defecto su valor es10. Esto puede ser de tipo: Syntax `$( ".selector" ).resizable({ minWidth: 150 });`

La siguiente sección le mostrará algunos ejemplos prácticos de la funcionalidad de cambio de tamaño.

Funcionalidad predeterminada

El siguiente ejemplo muestra un ejemplo simple de funcionalidad redimensionable, sin pasar parámetros al resizable() método.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable { width: 150px; height: 150px; padding: 0.5em;
            text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable" ).resizable();
         });
      </script>
   </head>

   <body>
      <!-- HTML --> 
      <div id = "resizable" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">Pull my edges to resize me!!</h3>
      </div>
  </body>
</html>

Guardemos el código anterior en un archivo HTML. resizeexample.htmy ábralo en un navegador estándar que admita javascript, debería ver el siguiente resultado. Ahora puedes jugar con el resultado:

Arrastre el borde cuadrado para cambiar el tamaño.

Uso de animado y fantasma

El siguiente ejemplo demuestra el uso de dos opciones animate y ghost en la función de cambio de tamaño de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-2,#resizable-3 { 
            width: 150px; height: 150px; padding: 0.5em;
            text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-2" ).resizable({
               animate: true
            });
            $( "#resizable-3" ).resizable({
               ghost: true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "resizable-2" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">
            Pull my edges and Check the animation!!
         </h3>
      </div><br>
      <div id = "resizable-3" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">I'm ghost!!</h3>
      </div> 
   </body>
</html>

Guardemos el código anterior en un archivo HTML. resizeexample.htmy abrirlo en un navegador estándar que admita javascript, también debe ver el siguiente resultado. Ahora puedes jugar con el resultado:

Arrastre el borde cuadrado para cambiar el tamaño y ver el efecto de las opciones animadas y fantasma.

Uso de contención, minHeight y minWidth

El siguiente ejemplo demuestra el uso de tres opciones containment, minHeight y minWidth en la función de cambio de tamaño de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #container-1 { width: 300px; height: 300px; }
         #resizable-4 {background-position: top left; 
            width: 150px; height: 150px; } 
         #resizable-4, #container { padding: 0.5em; }  
      </style>

      <script>
         $(function() {
            $( "#resizable-4" ).resizable({
               containment: "#container",
               minHeight: 70,
               minWidth: 100
            });
         });
      </script>
   </head>

   <body>
      <div id = "container" class = "ui-widget-content">
         <div id = "resizable-4" class = "ui-state-active">
            <h3 class = "ui-widget-header">
               Resize contained to this container
            </h3>
         </div>
      </div> 
   </body>
</html>

Arrastre el borde cuadrado para cambiar el tamaño, no puede cambiar el tamaño más allá del contenedor principal.

Uso de retraso, distancia y ocultación automática

El siguiente ejemplo demuestra el uso de tres opciones delay, distance y autoHide en la función de cambio de tamaño de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .square {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            text-align: center;
            float: left;
            margin-left: 20px;
            -right: 20px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#resizable-5" ).resizable({
               delay: 1000
            });

            $( "#resizable-6" ).resizable({
               distance: 40
            });
            $( "#resizable-7" ).resizable({
               autoHide: true
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "resizable-5" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Resize starts after delay of 1000ms
         </h3>
      </div><br>
      <div id = "resizable-6" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Resize starts at distance of 40px
         </h3>
      </div><br>
      <div id = "resizable-7" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Hover over me to see the magnification icon!
         </h3>
      </div>
   </body>
</html>

Arrastre el borde cuadrado para cambiar el tamaño y podrá notar que:

El primer cuadro cuadrado cambia de tamaño después de un retraso de 1000 ms,
El segundo cuadro cuadrado comienza a cambiar de tamaño después de que el mouse se mueve 40px.
Pase el mouse sobre el tercer cuadro cuadrado y aparecerá el icono de aumento.

Uso de alsoResize

El siguiente ejemplo demuestra el uso de la opción alsoResize en la función de cambio de tamaño de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-8,#resizable-9{ width: 150px; height: 150px; 
            padding: 0.5em;text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-8" ).resizable({
               alsoResize: "#resizable-9"
            });
            $( "#resizable-9" ).resizable();
         });
      </script>
   </head>

   <body>
      <!-- HTML --> 
      <div id = "resizable-8" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">Resize!!</h3>
      </div><br>
      <div id = "resizable-9" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">I also get resized!!</h3>
      </div> 
   </body>
</html>

Arrastre el borde cuadrado para cambiar el tamaño y podrá notar que el segundo cuadro cuadrado también cambia de tamaño con el primer cuadro cuadrado.

Uso de AspectRatio, Grid

El siguiente ejemplo demuestra el uso de la opción aspectRatio y grid en la función de cambio de tamaño de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .square {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            text-align: center;
            float: left;
            margin-left: 20px;
            margin-right: 20px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#resizable-10" ).resizable({
               aspectRatio: 10 / 3
            });

            $( "#resizable-11" ).resizable({
               grid: [50,20]
            });

         });
      </script>
   </head>
   
   <body>
      <div id = "resizable-10" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Resize with aspectRatio of 10/3
         </h3>
      </div>
      <div id = "resizable-11" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Snap me to the grid of [50,20]
         </h3>
      </div>
   </body>
</html>

Arrastre el borde cuadrado para cambiar el tamaño, el primer cuadro cuadrado cambia de tamaño con una relación de aspecto de 10/3 y el segundo cambia de tamaño con una cuadrícula de [50,20].

$ (selector, context) .resizable ("action", params) Método

El método redimensionable ("acción", params) puede realizar una acción en elementos redimensionables, como permitir o evitar la función de redimensionamiento. La acción se especifica como una cadena en el primer argumento (por ejemplo, "deshabilitar" para evitar el cambio de tamaño). Consulte las acciones que se pueden aprobar en la siguiente tabla.

Sintaxis

$(selector, context).resizable ("action", params);;

La siguiente tabla enumera las diferentes acciones que se pueden utilizar con este método:


$( ".selector" ).resizable("destroy");
$( ".selector" ).resizable("disable");
$( ".selector" ).resizable("enable");
var isDisabled = $( ".selector" ).resizable( "option", "disabled" );
var options = $( ".selector" ).resizable( "option" );
$( ".selector" ).resizable( "option", "disabled", true );
$( ".selector" ).resizable( "option", { disabled: true } );
var widget = $( ".selector" ).resizable( "widget" );

No Señor.	Acción Descripción
1	destruir Esta acción destruye completamente la funcionalidad de tamaño variable de un elemento. Esto devolverá el elemento a su estado previo al inicio. Action - destroy Esta acción destruye por completo la funcionalidad redimensionable de un elemento. Esto devolverá el elemento a su estado previo al inicio. Este método no acepta argumentos. Syntax `$( ".selector" ).resizable("destroy");`
2	inhabilitar Esta acción desactiva la función de cambio de tamaño de un elemento. Este método no acepta argumentos. Action - disable Esta acción desactiva la función de cambio de tamaño de un elemento. Este método no acepta argumentos. Syntax `$( ".selector" ).resizable("disable");`
3	habilitar Esta acción habilita la función de cambio de tamaño de un elemento. Este método no acepta argumentos. Action - enable Esta acción habilita la función de cambio de tamaño de un elemento. Este método no acepta argumentos. Syntax `$( ".selector" ).resizable("enable");`
4	opción (optionName) Esta acción recupera el valor del optionName especificado . Esta opción corresponde a una de las que se utilizan con redimensionable (opciones). Action - option( optionName ) Esta acción recupera el valor del optionName especificado . Esta opción corresponde a una de las que se utilizan con redimensionable (opciones). Syntax `var isDisabled = $( ".selector" ).resizable( "option", "disabled" );`
5	opción() Obtiene un objeto que contiene pares clave / valor que representan el hash actual de opciones redimensionables. Esto no acepta ningún argumento. Action - option() Obtiene un objeto que contiene pares clave / valor que representan el hash actual de opciones redimensionables. Esto no acepta ningún argumento. Syntax `var options = $( ".selector" ).resizable( "option" );`
6	opción (optionName, valor) Esta acción establece el valor de la opción redimensionable con el optionName especificado . Esta opción corresponde a una de las que se utilizan con redimensionable (opciones). Action - option( optionName, value ) Esta acción establece el valor de la opción redimensionable con el optionName especificado . Esta opción corresponde a una de las que se utilizan con redimensionable (opciones). Syntax `$( ".selector" ).resizable( "option", "disabled", true );`
7	opción (opciones) Esta acción establece una o más opciones para el tamaño. Action - option( options ) Esta acción establece una o más opciones para el tamaño. Syntax `$( ".selector" ).resizable( "option", { disabled: true } );`
8	widget () Esta acción devuelve un objeto jQuery que contiene el elemento redimensionable. Este método no acepta argumentos. Action - widget() Esta acción devuelve un objeto jQuery que contiene el elemento redimensionable. Este método no acepta argumentos. Syntax `var widget = $( ".selector" ).resizable( "widget" );`

Ejemplo

Ahora veamos un ejemplo usando las acciones de la tabla anterior. El siguiente ejemplo demuestra el uso de los métodos destroy () y disable () .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-12,#resizable-13 { width: 150px; height: 150px; 
            padding: 0.5em;text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-12" ).resizable();
            $( "#resizable-12" ).resizable('disable');
            $( "#resizable-13" ).resizable();
            $( "#resizable-13" ).resizable('destroy');	
         });
      </script>
   </head>

   <body>
      <!-- HTML --> 
      <div id = "resizable-12" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">I'm disable!!</h3>
      </div><br>
      <div id = "resizable-13" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">I'm Destroyed!!</h3>
      </div>
   </body>
</html>

Guardemos el código anterior en un archivo HTML. resizeexample.htm y ábralo en un navegador estándar que admita javascript, debería ver el siguiente resultado:

No puede cambiar el tamaño del primer cuadro cuadrado ya que está deshabilitado y el segundo cuadro cuadrado está destruido.

Gestión de eventos en elementos redimensionables

Además del método redimensionable (opciones) que vimos en las secciones anteriores, JqueryUI proporciona métodos de eventos que se activan para un evento en particular. Estos métodos de eventos se enumeran a continuación:

No Señor.	Método y descripción del evento
1	crear (evento, ui) Este evento se activa cuando se crea el elemento redimensionable. Event - create(event, ui) Este evento se activa cuando se crea el elemento redimensionable. Donde evento es de tipo Evento y ui es de tipo Objeto . Syntax `$( ".selector" ).resizable({ create: function( event, ui ) {} });`
2	resize (evento, ui) Este evento se activa cuando se arrastra el controlador del elemento redimensionable. Event - resize(event, ui) Este evento se activa cuando se arrastra el controlador del elemento redimensionable. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son: element - Un objeto jQuery que representa el elemento redimensionable. helper - Un objeto jQuery que representa el ayudante cuyo tamaño se está cambiando. originalElement - El objeto jQuery que representa el elemento original antes de que se envuelva. originalPosition - La posición representada como {izquierda, arriba} antes de que se cambie el tamaño del tamaño variable. originalSize - El tamaño representado como {ancho, alto} antes de que se cambie el tamaño. position - La posición actual representada como {izquierda, arriba}. size - El tamaño actual representado como {ancho, alto}. Syntax `$( ".selector" ).resizable({ resize: function( event, ui ) {} });`
3	inicio (evento, ui) Este evento se activa al comienzo de una operación de cambio de tamaño. Event - start(event, ui) Este evento se activa al comienzo de una operación de cambio de tamaño. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son: element - Un objeto jQuery que representa el elemento redimensionable. helper - Un objeto jQuery que representa el ayudante cuyo tamaño se está cambiando. originalElement - El objeto jQuery que representa el elemento original antes de que se envuelva. originalPosition - La posición representada como {izquierda, arriba} antes de que se cambie el tamaño del tamaño variable. originalSize - El tamaño representado como {ancho, alto} antes de que se cambie el tamaño. position - La posición actual representada como {izquierda, arriba}. size - El tamaño actual representado como {ancho, alto}. Syntax `$( ".selector" ).resizable({ start: function( event, ui ) {} });`
4	detener (evento, ui) Este evento se activa al final de una operación de cambio de tamaño. Event - stop(event, ui) Este evento se activa al final de una operación de cambio de tamaño. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son: element - Un objeto jQuery que representa el elemento redimensionable. helper - Un objeto jQuery que representa el ayudante cuyo tamaño se está cambiando. originalElement - El objeto jQuery que representa el elemento original antes de que se envuelva. originalPosition - La posición representada como {izquierda, arriba} antes de que se cambie el tamaño del tamaño variable. originalSize - El tamaño representado como {ancho, alto} antes de que se cambie el tamaño. position - La posición actual representada como {izquierda, arriba}. size - El tamaño actual representado como {ancho, alto}. Syntax `$( ".selector" ).resizable({ stop: function( event, ui ) {} });`

Ejemplo

El siguiente ejemplo demuestra el uso del método de evento durante la función de cambio de tamaño. Este ejemplo demuestra el uso de eventos para crear y redimensionar .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-14{ width: 150px; height: 150px; 
         padding: 0.5em;text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-14" ).resizable({
               create: function( event, ui ) {
                  $("#resizable-15").text ("I'm Created!!");
               },
               resize: function (event, ui) {
                  $("#resizable-16").text ("top = " + ui.position.top +
                     ", left = " + ui.position.left +
                     ", width = " + ui.size.width +
                     ", height = " + ui.size.height);
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "resizable-14" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">Resize !!</h3>
      </div><br>
      <span id = "resizable-15"></span><br>
      <span id = "resizable-16"></span>
   </body>
</html>

Guardemos el código anterior en un archivo HTML. resizeexample.htm y abrirlo en un navegador estándar que admita javascript, debe ver el siguiente resultado:

Arrastre el cuadro cuadrado y verá que la salida se muestra en el evento de cambio de tamaño.

↰ Previous page Next page ↱