Usar Plantillas y Navegar entre varias paginas con Onsen UI
Plantilla o Template es un componente de Onsen UI para poder contar con varias paginas en un mismo archivo html. Vamos a crear un ejemplo donde navegaremos entre varias paginas, con un efecto slide.
En un articulo anterior hable sobre la Introduccion a Onsen UI y un ejemplo, para conocer los aspectos básicos les invito a leerlo.
En este articulo vamos a lograr que al hacer click a un botón cambiemos de pagina, en el toolbar de cada pagina agregamos el botón para regresar a la pagina anterior usando ons-back-button.
Ons Navigator
El componente ons-navigator nos indica la navegacion de las paginas, tambien define la pagina inicial.
Template
Este componente define una pagina, debe tener un id único que lo diferencia de las otras paginas.
El formato de un template es el siguiente:
[code language=”html”] <template id="page1.html"><ons-page id="page1">
<ons-toolbar>
<div class="center">Pagina 1</div>
</ons-toolbar>
</ons-page>
</template>
[/code]
Dentro de un template seguido agregamos un ons-page o una pagina, y dentro de la pagina podemos agregar el contenido que sea.
Empezando un toolbar, despues podemos agregar tarjetas, botones, etc.
Ons Card
La etiqueta ons-card es para las tarjetas las cuales deben ir dentro de ons-page y el formato de una tarjeta es el siguiente:
[code language=”html”] <ons-card ><div class="title">Hola Mundo!</div>
<div class="content">
<div>
Hola Mundo!
</div>
<ons-button id="push-button">Boton</ons-button>
</div>
</ons-card>
[/code]
Podemos usar las tarjetas para cualquier tipo de contenido.
Dentro de la etiqueta del contenido podemos agregar imagenes, botones, etc.
Codigo
Aqui les dejo el codigo de ejemplo, en la parte de mas abajo les dejo el link de descarga de todos los archivos necesarios (mencionados en la introduccion) los archivos de onsen ui y jquery.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!– Powered by http://evilnapsis.com –> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Aplicacion Onsen UI</title> | |
| <link rel="stylesheet" href="onsenui/css/onsenui.css"> | |
| <link rel="stylesheet" href="onsenui/css/onsen-css-components.min.css"> | |
| <script src="jquery.min.js"></script> | |
| <script src="onsenui/js/onsenui.min.js"></script> | |
| </head> | |
| <body> | |
| <ons-navigator swipeable id="myNavigator" page="page1.html"></ons-navigator> | |
| <template id="page1.html"> | |
| <ons-page id="page1"> | |
| <ons-toolbar> | |
| <div class="center">Pagina 1</div> | |
| </ons-toolbar> | |
| <ons-card > | |
| <div class="title">Hola mundo!</div> | |
| <div class="content"> | |
| <div> | |
| Bienvenido a OnsenUI | |
| </div> | |
| <ons-button id="push-button">Ir a la pagina 2</ons-button> | |
| </div> | |
| </ons-card> | |
| </ons-page> | |
| </template> | |
| <template id="page2.html"> | |
| <ons-page id="page2"> | |
| <ons-toolbar> | |
| <div class="left"><ons-back-button>Pagina 1</ons-back-button></div> | |
| <div class="center"></div> | |
| </ons-toolbar> | |
| <ons-card > | |
| <div class="title">Segunda pagina!</div> | |
| <div class="content"> | |
| <div> | |
| Esta es la segunda pagina! | |
| </div> | |
| <ons-button id="push-button2">Ir a la pagina 3</ons-button> | |
| </div> | |
| </ons-card> | |
| </ons-page> | |
| </template> | |
| <template id="page3.html"> | |
| <ons-page id="page3"> | |
| <ons-toolbar> | |
| <div class="left"><ons-back-button>Pagina 2</ons-back-button></div> | |
| <div class="center"></div> | |
| </ons-toolbar> | |
| <ons-card > | |
| <div class="title">Tercera pagina!</div> | |
| <div class="content"> | |
| <div> | |
| Tercera pagina! | |
| </div> | |
| </div> | |
| </ons-card> | |
| </ons-page> | |
| </template> | |
| <script> | |
| document.addEventListener('init', function(event) { | |
| var page = event.target; | |
| if (page.id === 'page1') { | |
| page.querySelector('#push-button').onclick = function() { | |
| document.querySelector('#myNavigator').pushPage('page2.html', {data: {title: 'Pagina 2'}}); | |
| }; | |
| } | |
| else if (page.id === 'page2') { | |
| page.querySelector('ons-toolbar .center').innerHTML = page.data.title; | |
| page.querySelector('#push-button2').onclick = function() { | |
| document.querySelector('#myNavigator').pushPage('page3.html', {data: {title: 'Pagina 3'}}); | |
| }; | |
| } | |
| else if (page.id === 'page3') { | |
| page.querySelector('ons-toolbar .center').innerHTML = page.data.title; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
En las lineas 72 a la 92 hay un script que identifica en que pagina estamos, contiene la funcion para que al hacer click a un botón cambiemos de pagina.
- En la linea 73 verificamos que la pagina de inicie “init”
- 74: defimos el event.target que es la pagina seleccionada, por default tenemos page1 en el ons-navigator.
- 76: si la pagina tiene el id “page1”
- 77: al hacer click en el boton con id “push-button” llamamos de nuevo al navigator
- 78: buscamos el ons-navigator por id y le pasamos la pagina a la que nos moveremos .pushPage(“page2.html”,{data:{title: “Pagina 2”}}) , después del id de la pagina el siguiente es un json con parámetros para enviar de una pagina a otra.
Y esta estructura de se repite en las opciones siguientes.
Si quieres agregar mas paginas, puedes copiar y pegar, siempre y cuando agregues en HTML las paginas y coloques los Ids correspondientes.
Resultado
Esta es una captura de pantalla de la primera pagina.
Descarga
A continuación el paquete de descarga con todos los archivos.
[sociallocker]Link: https://drive.google.com/file/d/1WPOmGyCkK12VdaIa832kFKhk2ufa5Bo0/view?usp=sharing
[/sociallocker]Dudas y comentarios son bienvenidos!