En este artículo, vamos a discutir cómo activar el evento de cambio de tamaño de ventana usando jQuery. Para ello, utilizaremos las siguientes funciones de biblioteca proporcionadas por jQuery.
- $(<elemento>).trigger(): esta función de biblioteca nos permite activar eventos nativos y personalizados. El método se puede utilizar de forma independiente o puede ser iniciado por otro evento. En este caso, utilizaremos el evento nativo de JavaScript ‘cambiar tamaño’ para activar el evento de cambio de tamaño según nuestra conveniencia. La sintaxis sería: $(ventana).trigger(‘redimensionar’);
- $(<elemento>).resize(): Este método se usa para escuchar eventos de cambio de tamaño. El método puede tomar funciones de devolución de llamada como parámetros, que se ejecutarán una vez que se encuentre el evento de cambio de tamaño.
Enlace CDN de jQuery:
<guión src=”https://code.jquery.com/jquery-3.5.1.min.js” integridad=”sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=” crossorigin=”anónimo”></guión>
Aquí, el evento de cambio de tamaño se activará en un botón para facilitar la comprensión.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1.0">
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js"
integrity=
"sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous">
</script>
</head>
<body>
<button id="res" style="
background-color: green;
color: white;
font-size: 30px;
border: none;
border-radius: 28px;
width: 200px;
height: 100px;
outline: none;
cursor: pointer;">
Resize
</button>
<br>
<p id="gfg" style>
(for Geeks For Geeks)
</p>
<script>
$(document).ready(() => {
$('#res').on('click', () => {
$(window).trigger('resize');
});
$(window).resize(() => {
console.log("resize function called");
})
});
</script>
</body>
</html>
Salida del fragmento de código dado:
Publicación traducida automáticamente
Artículo escrito por tirtharajsengupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA