jQuery UI es una tecnología basada en la web y consta de widgets GUI, efectos visuales y temas implementados mediante jQuery, JavaScript Library. jQuery UI es la mejor herramienta para crear interfaces de interfaz de usuario para las páginas web. También se puede usar para crear aplicaciones web altamente interactivas o se puede usar para agregar widgets fácilmente.
En este artículo, vamos a aprender los eventos de parada redimensionables de jQuery Mobile . Este evento se activa al final de una operación de cambio de tamaño
Sintaxis:
Inicialice el plegable con la devolución de llamada de creación especificada.
$( ".selector" ).resizable({ stop: function( event, ui ) {} });
-
Vincule un detector de eventos al evento resizestop.
$( ".selector" ).on( "resizestop ",function( event, ui ) {} );
Parámetros: Son los siguientes parámetros que se aceptan:
- evento: este evento se activa al final de una operación de cambio de tamaño.
- ui: este parámetro es de tipo objeto con las siguientes opciones.
- ayudante: este parámetro es el objeto jQuery que representa el ayudante que se está redimensionando.
- element: Este parámetro es el objeto jQuery que representa el elemento a redimensionar.
- tamaño: este parámetro es el tamaño actual del objeto auxiliar que se representa como { ancho, alto }.
- posición: este parámetro es la posición actual del objeto auxiliar que se representa como {arriba, izquierda}.
- posiciónoriginal : es la posición original del objeto auxiliar que se representa como {superior, izquierda} antes de cambiar el tamaño.
- originalSize: es el tamaño original del objeto que se representa como { ancho, alto } antes de cambiar el tamaño.
- originalElement: este parámetro es el elemento original antes de que se ajuste.
Vínculos de CDN: agregue los siguientes scripts de jQuery Mobile que necesitará en 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/ui/ 1.12.1/jquery-ui.js”></script>
<script src=”//code.jquery.com/jquery-1.12.4.js”></script>
Ejemplo: este ejemplo describe los usos de los eventos de parada redimensionables de jQuery UI.
HTML
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src=
"https://code.jquery.com/jquery-1.12.4.js"></script>
<script src=
"https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<style>
h1 {
color: green;
}
.container {
width: 320px;
}
#resizable-div {
width: 300px;
height: 150px;
text-align: center;
border: 2px solid black;
}
</style>
<script>
$(function () {
$( "#resizable-div" ).resizable({
stop: function( event, ui ) {
$("#gfg").html("Resizable Widget has been Stopped");
}
});
});
$(function () {
$("#resizable-div").resizable();
$("#resizable-div").resizable('enable');
});
</script>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>jQuery UI Resizable stop Events</h3>
<div class="container">
<div id="resizable-div">
<h3 class="gfg"></h3>
</div>
</div>
<br>
<h4><span id="gfg"></span></h4>
</center>
</body>
</html>
Producción:
jQuery UI redimensionable detener eventos
Referencias: https://api.jqueryui.com/resizable/#event-stop
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA