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 inicio de jQuery UI Resizable se activa cuando se inicia la operación de cambio de tamaño.
Sintaxis:
Inicializando el evento de inicio redimensionable.
$( ".selector" ).resizable({
start: function( event, ui ) {}
});
-
Vincular un detector de eventos al evento resizestart.
$( ".selector" ).on( "resizestart", function( event, ui ) {} );
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: este objeto jQuery se representa cuando se va a cambiar el tamaño del elemento.
- ayudante: este objeto jQuery se representa cuando se cambia el tamaño del ayudante.
- originalElement: este objeto jQuery se representa cuando se ajusta el elemento original.
- posición original: este parámetro es la posición que se representa como izquierda y arriba antes de que se cambie el tamaño del tamaño variable.
- originalSize: este parámetro es el tamaño que se representa como ancho y alto antes de cambiar el tamaño.
- posición: este parámetro es la posición actual que se representa como izquierda y arriba.
- tamaño: este parámetro es el tamaño actual que se representa como ancho y alto.
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 inicio de jQuery UI Redimensionable .
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 start Events</h3>
<div id="log"></div>
<div id="GFG">GeeksforGeeks</div>
</center>
<script>
$(document).ready(function () {
$("#GFG").resizable({
start: function (event, ui) { }
});
$("#GFG").on("resizestart", function (event, ui) {
$("#log").html('Resize operation has been started.');
});
});
</script>
</body>
</html>
Producción:
jQuery UI eventos de inicio redimensionables
Referencia: https://api.jqueryui.com/resizable/#event-start
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