Press "Enter" to skip to content

Framework7 | Tutorial Español | Parte 2

Bienvenidos a la segunda entrega de este tutorial de Framework7, si has llegado aquí direct@ y no has leído la primera parte de este tutorial, aquí la tienes :).

Como comentamos en primer capítulo, vamos a agregar un menú lateral a nuestra aplicación, este con apertura cuando el usuario arrastra la parte izquierda de la pantalla hacia el centro, además agregaremos unas páginas hijas con sus propios contenidos.

Siguientes Partes de este tutorial

Bien, empecemos por el menú lateral, su estructura es muy básica, simplemente debemos agregar la estructura a nuestro index.html ya que los estilos y demás están definidos en Framework7, partimos de la base del capitulo anterior.

Como ves hemos agregado la estructura necesaria para mostrar un menú lateral, en este caso se compone de dos partes, un div con la clase panel-overlay que es el encargado de cuando se abre el menú aparece para proteger el contenido para evitar los scroll además también tiene la acción de cierre del menú.

Después tenemos otro div pero este si es ya el Menú, un menú lateral izquierdo (Se puede utilizar derecho).

Lo tenemos en la estructura pero el menú aún no se muestra, nos falta hacer dos cosas, una agregar Framework7() la opción de la acción slide agregamos algo a nuestro index.js, nos basamos como antes en el código de la parte 1 de este tutorial

Esta opción es  swipePanel: ‘left’ que hará que cuando deslicemos el dedo desde el borde izquierdo de la pantalla hacia el centro muestre el menú lateral.

Ya tenemos nuestro menú!

Ya podemos hacer un slide lateral para abrir nuestro nuevo menú, ¿Agregamos páginas a nuestro menú? Claro, vamos!

Para agregar páginas hijas a nuestra aplicación es muy facil, abrimos un nuevo archivo HTML le ponemos un nombre cualquiera y lo guardamos en la carpeta www de nuestra aplicación con el siguiente contenido

Entre el contenedor con la clase page será nuestra página nueva, para mostrar otro contenido, cualquiera como formularios, galerías, información, etc.

Es un ejemplo simple de como mostrar una nueva página, os cuento cuales son sus elementos

En primer lugar tenemos un div con la clase page, este tendrá todo el contenido de la nueva página, en ella podemos agregar cualquier elemento, por ejemplo una barra superior para colocar un nuevo nombre al página.

Pero como funciona el control de páginas, es muy fácil, en los elementos <a> en el atributo href colocamos el nombre del archivo como si llamaras a un HTML externo, pero en el caso de Framework7 este no funciona así, y lo que hace es montar dentro de nuestro index en el view principal una nueva página por lo que no necesitamos agregar las referencias a los js´s ni tampoco css´s ya que lo contiene el archivo principal index.html.

En definitiva si nuestro nuevo archivo de página se llama contacto.html creamos un elemento href=”contacto.html” y cuando pulsemos abrirá la nueva página.

No acabamos aquí, si lo que queremos es abrirla a través de javascript, utilizando las maravillas de Framework7 usamos lo siguiente.

Utiliza la variable mainView ubicada en index.js en la linea 7, esta la agregamos en la primera parte del tutorial

Esto abrirá la nueva página como si pulsáramos en un enlace.

Y si quiero realizar un acción cuando esta página se abra?

Muy fácil! Framework7 posee una función que se ejecuta cuando se abre una página la función es onPageInit y se implementa de la siguiente forma.

El primer parametro “contacto” es el nombre de la página, este se encuentra en el archivo contacto.html en el div con clase page en el atributo data-page.

Además Framework7 también tiene otra función para ejecutarse cuando cualquier página se abre

El $$ lo definimos en index.js en la linea 3.

Esta función se ejecutará cuando cualquier página se inicie, el parámetro de la función callback contiene varios parámetros que nos pueden servir para distintos proyectos, encontramos un listado completo aquí.

Además no solo podemos controlar cuando se abre si no otras muchas acciones sobre páginas que las podéis encontrar aquí

Creo que no me dejo nada, cualquier duda usad los comentarios y recordad que estoy en Twitter!

En la siguiente parte del tutorial empezaremos a agregar componentes a nuestra aplicación, no olvides compartir este contenido!

Saludos y Happy Code!