jQuery Mobile página de eventos
Eventos para el manejo de las páginas en jQuery Mobile se dividen en cuatro categorías:
- La página de inicialización - Antes de la creación de páginas, y cuando se ha creado la página
- La página de carga / descarga - Cuando una página externa es la carga, descarga o encuentra un error
- Página de transición - Antes y después de las transiciones de página
- Cambio de página - Cuando las páginas se cambian hacia o desde, o encuentra un error
Para una referencia completa de todos los eventos de jQuery Mobile, por favor vaya a nuestra eventos de referencia jQuery Mobile .
jQuery Mobile inicialización Eventos
Cuando se inicializa una página típica en jQuery Mobile, pasa por dos etapas:
- Antes de la creación de páginas
- creación de páginas
Cada etapa tiene un evento que puede ser utilizado para insertar o manipular código antes o cuando jQuery Mobile mejora la página.
| Evento | Descripción |
|---|---|
| pagebeforecreate | Se activa cuando la página está a punto de ser inicializado, y antes de jQuery Mobile ha comenzado a mejorar la página |
| pagecreate | Se activa cuando se ha creado la página, pero antes de la mejora se ha completado |
El siguiente ejemplo demuestra cuando cada evento se desencadena cuando se crea una página en jQuery Mobile:
Ejemplo
$(document).on("pagebeforecreate",function(event){
alert("pagebeforecreate event fired!");
});
$(document).on("pagecreate",function(event){
alert("pagecreate event fired!");
}); Inténtalo tú mismo " jQuery Mobile carga Eventos
eventos de carga de página son para las páginas externas.
Cada vez que una página externa se carga en el DOM, 2 eventos fuego. La primera es pagecontainerbeforeload, y el segundo será o bien pagecontainerload (correcto) o pagecontainerloadfailed (fallo).
Estos eventos se explican en la siguiente tabla:
| Evento | Descripción |
|---|---|
| pagecontainerbeforeload | Desencadena antes de que cualquier solicitud de carga de la página se hace |
| pagecontainerload | Desencadenada después de la página se ha cargado correctamente y se inserta en el DOM |
| pagecontainerloadfailed | Se activa si la petición falla de carga de página. De forma predeterminada, se mostrará el mensaje "Error de carga de página" |
El ejemplo siguiente muestra cómo el pagecontainerload y eventos pagecontainerloadfailed funcionan:
Ejemplo
$(document).on("pagecontainerload",function(event,data){
alert("pageload
event fired!\nURL: " + data.url);
});
$(document).on("pagecontainerloadfailed",function(event,data){
alert("Sorry, requested page does not exist.");
}); Inténtalo tú mismo " jQuery Mobile transición Eventos
También podemos utilizar los eventos para cuando hacemos la transición de una página a la siguiente.
Las transiciones de página implican dos páginas: una "de" páginas y una "a" - estas transiciones de página animan el cambio de la página activa actual (fromPage) a una nueva página (toPage) .
| Evento | Descripción |
|---|---|
| pagebeforeshow | Desencadenado en la "a" de la página, antes de que comience la animación de transición |
| pageshow | Desencadenado en la "a" de la página, después de la animación de transición completa |
| pagebeforehide | Desencadenado en la página "de", antes de que la animación se inicia la transición |
| pagehide | Desencadenado en la página "de", después de la animación de transición completa |
El ejemplo siguiente muestra cómo funcionan los eventos de transición:
Ejemplo
$(document).on("pagebeforeshow","#pagetwo",function(){ // When entering
pagetwo
alert("pagetwo is about to be shown");
});
$(document).on("pageshow","#pagetwo",function(){
// When entering pagetwo
alert("pagetwo is now shown");
});
$(document).on("pagebeforehide","#pagetwo",function(){
// When leaving pagetwo
alert("pagetwo is about to be hidden");
});
$(document).on("pagehide","#pagetwo",function(){
// When leaving pagetwo
alert("pagetwo is now hidden");
}); Inténtalo tú mismo "