jQuery Mobile es una tecnología basada en la web que se puede usar para crear contenido receptivo para sitios web a los que se puede acceder en todo tipo de teléfonos inteligentes, tabletas y computadoras de escritorio.
En este artículo, utilizaremos el evento de cambio de jQuery Mobile Pagecontainer. Este evento se activa después de que la solicitud de cambio haya terminado de cargar la página en el DOM y se hayan completado todas las animaciones de transición de página.
Sintaxis:
Inicializando el contenedor de páginas con el evento de cambio.
$( ".selector" ).pagecontainer({
change: function( event, ui ) {}
});
-
Vincular un detector de eventos al evento pagecontainerchange.
$( ".selector" ).on( "pagecontainerchange", function( event, ui ) {} );
Parámetros: Estos son los siguientes parámetros que se aceptan.
- evento: este evento se activa después de que se haya completado la animación de transición.
- ui: este parámetro es de tipo objeto con las siguientes opciones.
- toPage: este parámetro es el objeto de colección jQuery que contiene el elemento DOM de la página de destino.
- prevPage: este parámetro es el objeto de la colección jQuery que contiene el elemento DOM de la página en un estado separado.
Enlace CDN: a continuación se muestran algunos scripts de jQuery Mobile que se necesitarán para su proyecto, así que agréguelos a su proyecto.
<enlace rel=”hoja de estilo” href=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css” />
<script src= ”//code.jquery.com/jquery-3.2.1.min.js”></script>
<script src=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile -1.5.0-alpha.1.min.js”></secuencia de comandos>
Ejemplo: este ejemplo describe el evento de cambio de jQuery Mobile Pagecontainer.
HTML
<!doctype html>
<html lang="en">
<head>
<script src=
"//code.jquery.com/jquery-3.2.1.min.js">
</script>
<script src=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js">
</script>
</head>
<body>
<center>
<div data-role="page" id="GFG1">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>jQuery Mobile Pagecontainer change Event</h3>
<div data-role="header">
<h2>First Page</h2>
</div>
<div role="main">
<a href="#GFG2"
data-transition="slide">
Go To Second Page</a>
</div>
<br>
<input type="button" id="Button"
value="Click" style="width:20%">
<br>
<div id="log"></div>
</div>
<div data-role="page" id="GFG2">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>jQuery Mobile Pagecontainer change Event</h3>
<div data-role="header">
<h2>Second Page</h2>
</div>
<div role="main">
<a href="#GFG1" data-rel="back"
data-transition="slide">
Go Back To First Page
</a>
</div>
<br>
<input type="button" id="Button"
value="Click" style="width:20%">
<br>
<div id="log"></div>
</div>
</center>
<script>
$(document).ready(function () {
$("#Button").on('click', function () {
$("#GFG1").pagecontainer({
change: function (event, ui) { }
});
$("#log").html(
'<b>Pagecontainer change event is Triggered</b>'
);
});
});
</script>
</body>
</html>
Producción:
Evento de cambio de contenedor de página móvil de jQuery
Referencia: https://api.jquerymobile.com/pagecontainer/#event-change
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA