Introducción a Onsen UI y un Ejemplo
Onsen UI es un framework para desarrollar aplicaciones html5 híbridas y aplicaciones web para mobiles.
Onsen UI es un framework que cuenta con muchos componentes, demos y documentación por lo que es una buena opción para crear aplicaciones.
Onsen UI lo podemos trabajar con JQuey, Angular, Vue.js, por ahora lo usaremos con Jquery.
Componentes
Algunos de los componentes que podemos encontrar en OnsenUI son:
- Botones de Accion
- Dialogos
- Botones
- Cards
- Checkbox
- Botones Fab
- Listas
- Modales
- Notificaciones
- Popover
- Progress bar
- Progress Circle
- Switch
- Tabs
- Toolbars
- Entre otros componentes útiles…
Ejemplo
Para descargar Onsen UI y tener mas información por demos ir a su pagina oficial.
Les voy a dejar un ejemplo básico que utilizaremos mas adelante.
Onsen UI consta de 3 archivos básicos, 2 archivos CSS con los componentes y un archivo JS para las funciones, adicionalmente tenemos que agregar el 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>Onsen UI App</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-page id="tabbar-page"> | |
| <ons-toolbar> | |
| <div class="center">Inicio</div> | |
| </ons-toolbar> | |
| <ons-button >Hola Mundo!</ons-button> | |
| </ons-page> | |
| <script> | |
| $(function(){ | |
| $('ons-button').on('click', function(e) { | |
| ons.notification.alert('Hola Mundo!!'); | |
| }) | |
| }); | |
| </script> | |
| </body> | |
| </html> |
El ejemplo lo podemos dividir en 3 secciones:
- De la lineas 6 a la 9: se agregan las librerías necesarias, archivos css y js
- De la linea 13 a la 18: se crea un componente ons-page, que contiene un componente ons-toolbar y un ons-button
- De la linea 20 a la 26: código javascript para lanzar una “notificación de onsenui” cuando se haga clic en el botón
Resultado
Descarga
Puedes descargar el ejemplo usando este link: https://drive.google.com/open?id=1xppgDesRpDGip0p7Cv_SmTw76n4cRk9x
Dudas y comentarios, favor de escribirlos!!