jQuery UI consta de widgets GUI, efectos visuales y temas implementados mediante HTML , CSS y jQuery . jQuery UI es excelente para crear interfaces de interfaz de usuario para las páginas web. El evento de cambio de tamaño de jQuery UI Resizable se activa durante la operación de cambio de tamaño.
Sintaxis:
Inicializando el evento de cambio de tamaño redimensionable.
$( ".selector" ).resizable({
resize: function( event, ui ) {}
});
-
Vincular un detector de eventos al evento de cambio de tamaño.
$( ".selector" ).on( "resize", function( event, ui ) {} ); -
Restricción del cambio de tamaño de altura a incrementos de 27 píxeles.
$( ".selector" ).resizable({ resize: function( event, ui ) { ui.size.height = Math.round( ui.size.height / 27 ) * 27; } });
Parámetros: Acepta una función de devolución de llamada que tiene dos parámetros.
evento: Acepta valor de tipo evento.
ui: Acepta valores de tipo Objeto que se ilustran a continuación.
- elemento: el objeto jQuery que representa el elemento que se va a redimensionar
- ayudante: el objeto jQuery que representa el ayudante que se está redimensionando
- originalElement: el objeto jQuery que representa el elemento original antes de envolverlo
- posición original: la posición representada como {izquierda, arriba} antes de que se cambie el tamaño
- originalSize: el tamaño representado como { ancho, alto } antes de cambiar el tamaño
- posición: La posición actual representada como {izquierda, arriba}. Los valores se pueden cambiar para modificar dónde se colocará el elemento. Útil para la lógica de cambio de tamaño personalizado.
- tamaño: el tamaño actual representado como {ancho, alto}. Los valores se pueden cambiar para modificar dónde se colocará el elemento. Útil para la lógica de cambio de tamaño personalizado.
Enlace CDN: Primero, agregue los scripts jQuery UI necesarios para su proyecto.
<enlace rel=”hoja de estilo” href=”//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css”>
<script src=”//code.jquery.com/jquery- 1.12.4.js”></script>
<script src=”//code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
Ejemplo: Este ejemplo demuestra los eventos de cambio de tamaño de jQuery UI Resizable .
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src=
"//code.jquery.com/jquery-1.12.4.js">
</script>
<script src=
"//code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<style>
h1 {
color: green;
}
#GFG {
width: 150px;
height: 150px;
background: green;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>jQuery UI Resizable resize Events</h3>
<div id="log"></div>
<div id="GFG">GeeksforGeeks</div>
</center>
<script>
$(document).ready(function () {
$("#GFG").resizable({
resize: function (event, ui) {
ui.size.height =
Math.round(ui.size.height / 27) * 27;
}
});
$("#GFG").on("resize", function (event, ui) {
$("#log").html('Resize operation is going on.');
});
});
</script>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/resizable/#event-resize
Publicación traducida automáticamente
Artículo escrito por Kanchan_Ray y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA