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 creación de jQuery UI Resizable se activa cuando se crea el redimensionable.
Sintaxis:
Inicializando el evento de creación de tamaño variable.
$( ".selector" ).resizable({
create: function( event, ui ) {}
});
-
Vincular un detector de eventos al evento resizecreate.
$( ".selector" ).on( "resizecreate", 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 el valor del tipo de objeto. El objeto ui puede estar vacío pero se puede usar para mantener la coherencia con otros eventos.
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 creación 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 create Events</h3>
<div id="log"></div>
<div id="GFG">GeeksforGeeks</div>
</center>
<script>
$(document).ready(function () {
$("#GFG").resizable({
maxWidth: 300
});
$("#GFG").resizable({
create: function (event, ui) { }
});
$("#GFG").on("resizecreate", function (event, ui) { });
$("#log").html('Resizable has been created.');
});
</script>
</body>
</html>
Producción:
jQuery UI redimensionable crear eventos
Referencia: https://api.jqueryui.com/resizable/#event-create
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