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!

Amante de todo lo que tenga que ver con internet, la programación mi pasión, crear nuevas formas y nuevos sistemas que den vida a nuevos proyectos que faciliten la vida a muchas personas,