jQuery Mobile es una biblioteca de JavaScript que se utiliza para crear contenido accesible y receptivo para dispositivos de varios tamaños de pantalla, como dispositivos móviles, pestañas y computadoras de escritorio. En este artículo, usaremos el evento jQuery Mobile Popup afteropen que se activa después de que la ventana emergente se haya abierto por completo.
Parámetros de devolución de llamada: la función de devolución de llamada acepta un parámetro de evento de tipo Evento y un objeto UI. Aquí, el objeto de la interfaz de usuario está vacío, se incluye solo por coherencia con otros eventos en la biblioteca de jQuery Mobile.
Sintaxis:
-
Inicialice la ventana emergente con la devolución de llamada afteropen especificada:
$(".selector").popup({ afteropen: function (event, ui) { // Your code here } }); -
Vincule el evento popupafteropen a un detector de eventos:
$(".selector").on("popupafteropen", function (event, ui) { });
Enlaces CDN:
<enlace rel=”hoja de estilo” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code .jquery.com/jquery-2.1.3.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js”> </script>
Ejemplo: En el ejemplo a continuación, cuando afteropen incluso se activa, configuramos el texto del párrafo con id » escribir » en » evento afteropen activado «.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Popup - afteropen Event</title>
<link rel="stylesheet"
href=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src=
"https://code.jquery.com/jquery-2.1.3.js"></script>
<script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js">
</script>
<script>
$(document).ready(function () {
$("#popup1").popup({
afteropen: function (event, ui) {
$("#write").text("afteropen Event triggered");
}
});
});
function openPopup() {
$("#popup1").popup("open", { positionTo: "#target" });
}
</script>
</head>
<body>
<div data-role="page">
<center>
<h2 style="color: green">GeeksforGeeks</h2>
<h3>jQuery Mobile Popup afteropen Event</h3>
<p id="target">Popup will open here</p>
<div data-role="popup" id="popup1">
<p>Welcome to GeeksforGeeks</p>
</div>
<button style="width: 450px;"
onclick="openPopup()">Open Popup</button>
<p style="background-color: green; color: white;"
id="write"></p>
</center>
</div>
</body>
</html>
Producción:
Referencia: https://api.jquerymobile.com/popup/#event-afteropen