Eventos Páginas y Popups – Tutorial Framework7 Español [Versión 3] 2018
Otra entrada más, esta más rápida sobre los eventos Framework7, de páginas y popups, vamos a ver como ejecutar funciones cuando una página se muestra en nuestra aplicación o cuando deja de estar presente.
Como en versiones anteriores Framework7 usa la misma estructura para páginas.
<div class="page page-miPagina" data-name="nombrePagina">
<div class="page-content">
<!-- Contenido -->
</div>
</div>
Eventos de Páginas
Estas llevan eventos asociados en diferentes momentos, dependiendo de la acción que vayamos a realizar.
| page:mounted | Evento que se activa cuando la página se inserta en el DOM |
| page:init | Este se activa después de que Framework7 ha iniciado todos los componentes que requiere la página y la barra de navegación |
| page:reinit | Se activa cuando se navega hacia esta página pero esta, ya estaba cargada en el DOM |
| page:beforein | Evento que se activa cuando todo está preparado y lista para pasar a vista principal. |
| page:afterin | Este evento se activa cuando la página ha pasado a la vista principal |
| page:beforeout | Se activa justo antes de que la página se mueva hacia fuera de la vista principal |
| page:afterout | Se activa después de que la página haya salido completamente de la vista principal |
| page:beforeremove | El evento se activa justo antes de que la página se elimine del DOM. |
Todos muy útiles y necesarios para algunas acciones como el formateo de variables globales, destruir otros eventos asociados con la página, etc.
Usando eventos con .on()
Estos pueden ser usados a través del evento de Framework7 .on(), de esta forma
$$(document).on('page:init', '.page-miPagina', function (e) {
//Aquí mi código que se ejecutará cuando todos
//los componentes estén preparados y la página esté lista
})
Como vemos hay una variable ‘e’ que está presente en la devolución del evento, esta contiene muchos datos sobre la página que se está ejecutando, entre ellos los parámetros GET, variables globales de Framework7 y demás.
Para verlos solo tenemos que hacer esto y nos mostrará todos los datos para realizar diferentes acciones.
$$(document).on('page:init', '.page-miPagina', function (e) {
console.log(e);
})
Eventos de Popups
| popup:open | El evento se activará cuando se empiece la animación |
| popup:opened | El Evento se activará cuando la animación haya acabado |
| popup:close | Este será activado cuando la animación de cierre empiece. |
| popup:closed | Este se activará cuando la animación de cierre se haya completado |
El uso, igual que las páginas, a través de .on() o en la función de crear el Popup, que veremos más adelante.
Sacando el ejemplo de la web de Framework7 algo así.
// Create dynamic Popup
var dynamicPopup = app.popup.create({
content: '<div class="popup">'+
'<div class="block">'+
'<p>Popup created dynamically.</p>'+
'<p><a href="#" class="link popup-close">Close me</a></p>'+
'</div>'+
'</div>',
// Events
on: {
open: function (popup) {
console.log('Popup open');
},
opened: function (popup) {
console.log('Popup opened');
},
}
});
Este ha sido más corto, pero en el próximo llega lo bueno, las rutas como crear rutas con Framework7 muy fácil, si tenéis alguna duda, tenéis los comentarios 🙂
Hasta pronto!
Happy Code!
