Eventos de página de jQuery Mobile

Eventos de página de jQuery Mobile

Los eventos que se manejan con la página en jQuery Mobile se dividen en cuatro categorías:

  • Inicialización de página - Antes de la creación de la página, cuando se crea la página y después de la inicialización de la página
  • Carga / Descarga de página - Cuando se carga, se descarga una página externa o se produce un fallo
  • Transición de página - Antes y después de la transición de la página
  • Cambio de página - Cuando se cambia la página o se produce un fallo

Para obtener información completa sobre todos los eventos de jQuery Mobile, visite nuestra Manual de Referencia de Eventos de jQuery Mobile.

Evento de Inicialización de jQuery Mobile

Cuando una página típica de jQuery Mobile se inicializa, pasa por tres etapas:

  • Antes de la creación de la página
  • Creación de la página
  • Inicialización de la página

Todos los eventos desencadenados en cada etapa se pueden usar para insertar o manipular código.

Evento Descripción
pagebeforecreate El evento se desencadena cuando la página está a punto de inicializarse y antes de que jQuery Mobile comience a mejorar la página.
pagecreate El evento se desencadena cuando la página se ha creado, pero antes de que se complete la mejora.
pageinit Este evento se activa cuando la página se ha inicializado y jQuery Mobile ha completado la mejora de la página.

El siguiente ejemplo muestra cuándo se activan cada uno de los eventos al crear una página en jQuery Mobile:

Ejemplo

$(document).on("pagebeforecreate",function(event){
  alert("¡Se ha activado el evento pagebeforecreate!");
}); 
$(document).on("pagecreate",function(event){
  alert("¡Se ha activado el evento pagecreate!");
});
$(document).on("pageinit",function(event){
  alert("¡Se ha activado el evento pageinit!");
});

Prueba personalmente

Eventos de carga de jQuery Mobile

Los eventos de carga de página pertenecen a la página externa.

Cada vez que una página externa se carga en el DOM, se activan dos eventos. El primero es pagebeforeload, el segundo es pageload (éxito) o pageloadfailed (fallo).

La siguiente tabla explica estos eventos:

Evento Descripción
pagebeforeload Se activa antes de que se realice cualquier solicitud de carga de página.
pageload Se activa después de que la página se haya cargado con éxito e insertado en el DOM.
pageloadfailed Si la solicitud de carga de la página falla, se activa este evento. Por defecto, se mostrará el mensaje "Error cargando página".

A continuación, se muestra el principio de funcionamiento de los eventos pageload y pageloadfailed:

Ejemplo

$(document).on("pageload",function(event,data){
  alert("¡Se ha activado el evento pageload!\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
  alert("Lo siento, la página solicitada no existe.");
});

Prueba personalmente

Eventos de transición de jQuery Mobile

También podemos usar eventos cuando se transita de una página a otra.

La transición de página implica dos páginas: una página "llegada" y una página "salida" - estas transiciones hacen que el proceso de cambio de la página activa (página "llegada") a la nueva página (página "salida") sea más dinámico.

Evento Descripción
pagebeforeshow Se activa en la página "salida", antes de que comience la animación de transición.
pageshow Se activa en la página "salida", después de que se complete la animación de transición.
pagebeforehide Se activa en la página "llegada", antes de que comience la animación de transición.
pagehide Se activa en la página "llegada", después de que se complete la animación de transición.

A continuación, se muestra el principio de funcionamiento del tiempo de transición:

Ejemplo

$(document).on("pagebeforeshow","#pagetwo",function(){ // Cuando entres en la página dos
  alert("La página dos se mostrará pronto");
});
$(document).on("pageshow","#pagetwo",function(){ // Cuando entres en la página dos
  alert("Ahora muestra la página dos");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // Cuando salgas de la página dos
  alert("La página dos se ocultará pronto");
});
$(document).on("pagehide","#pagetwo",function(){ // Cuando salgas de la página dos
  alert("Ahora oculta la página dos");
});

Prueba personalmente