En el primer post de esta serie de dos, como podemos crear en dos minutos un template para navegar entre articles a través del elemento aside. Dábamos un repaso a atributos como data-target, data-icon y data-image viendo estos atributos HTML5 fundamentales para nuestra estética y navegación.
Como complemento al post de ayer, vamos a ver cómo podemos navegar entre secciones suigueindo la misma filosofía del data-target y sin entrar todavía a ver nada de LungoJS. Veíamos que había un elemento en el aside llamado Configuración que tenía este aspecto:
<a href="#pagina-dos" data-target="section" data-icon="items">Configuración</a>
Si nos fijamos, apunta a pagina-dos y tiene como data-target, un section. Es ésta parte del marcado:
<section id="pagina-dos">
<header data-title="WebApp - Página Dos" data-target="back">
<a href="#back" data-target="section" data-icon="left" class="button onright"></a>
</header>
<footer class="toolbar">
<nav>
<a href="#a1" data-target="article" class="current" data-icon="home">Home</a>
<a href="#a2" data-target="article" data-icon="calendar">Eventos</a>
<a href="#a3" data-target="article" data-icon="map">Ubicación</a>
<a href="#a4" data-target="article" data-icon="files">Archivos</a>
<a href="#a5" data-target="article" data-icon="items">Configuración</a>
</nav>
</footer>
<article id="a1">A-1</article>
<article id="a2">A-2</article>
<article id="a3">A-3</article>
<article id="a4">A-4</article>
<article id="a5">A-5</article>
</section>
¿Qué tenemos nuevo por aquí? Dos partes, dentro del header de pagina-dos, un botón para volver a la pagina-home y un footer que implementa un pequeño menú. Os dejo con el código completo y el video demostración.
<!doctype html>
<html manifest="index.appcache">
<head>
<meta charset="utf-8">
<title>LungoJS: Cómo definir tu webapp con template.</title>
<meta name="description" content="Ejemplos para el blog de tunelko">
<meta name="author" content="Tunelko (@tunelko)">
<!-- Mobile viewport optimization http://goo.gl/b9SaQ -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta http-equiv="cleartype" content="on">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/images/icon@2x.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/images/icon-72.png">
<link rel="apple-touch-icon-precomposed" href="assets/images/icon.png">
<link rel="apple-touch-startup-image" href="assets/images/default.png">
<!-- Main Stylesheet -->
<link rel="stylesheet" href="./lungo.js/lungo-1.1.2.min.css">
<link rel="stylesheet" href="./lungo.js/lungo.theme.default.css">
</head>
<body class="app">
<section id="pagina-home">
<header data-title="WebApp - Inicio">
<a href="#" data-target="aside" data-icon="files" class="button onleft"></a>
</header>
<footer>
</footer>
<aside>
<a href="#home" data-target="article" class="current" data-icon="home">Home</a>
<a href="#eventos" data-target="article" data-icon="calendar">Eventos</a>
<a href="#ubicacion" data-target="article" data-icon="map">Ubicación</a>
<a href="#archivos" data-target="article" data-icon="files">Archivos</a>
<a href="#pagina-dos" data-target="section" data-icon="items">Configuración</a>
</aside>
<article id="home"><h2>Home</h2></article>
<article id="eventos">Eventos</article>
<article id="ubicacion">Ubicación</article>
<article id="archivos">Archivos</article>
<article id="configuracion">Configuración</article>
</section>
<section id="pagina-dos">
<header data-title="WebApp - Página Dos" data-target="back">
<a href="#back" data-target="section" data-icon="left" class="button onright"></a>
</header>
<footer class="toolbar">
<nav>
<a href="#a1" data-target="article" class="current" data-icon="home">Home</a>
<a href="#a2" data-target="article" data-icon="calendar">Eventos</a>
<a href="#a3" data-target="article" data-icon="map">Ubicación</a>
<a href="#a4" data-target="article" data-icon="files">Archivos</a>
<a href="#a5" data-target="article" data-icon="items">Configuración</a>
</nav>
</footer>
<article id="a1">A-1</article>
<article id="a2">A-2</article>
<article id="a3">A-3</article>
<article id="a4">A-4</article>
<article id="a5">A-5</article>
</section>
<!-- LungoJS (Production mode) -->
<script src="lungo.js/lungo-1.1.2.packed.js"></script>
<!-- LungoJS - Sandbox App -->
<script src="app/app.js"></script>
<script src="app/data.js"></script>
<script src="app/events.js"></script>
<script src="app/services.js"></script>
<script src="app/view.js"></script>
</body>
</html>
Video:
EXECELENTE APORTE NO HAY MUCHA INFORMACION SOBRE LUNGO EN ESPAÑOL TE AGRADEZCO MUCHO EL APORTE QUE HACES Y TAMBIEN CONSULTARTE SI SE PUEDE INTRODUCIR MAPAS DE OPEN STREET MAP Y GOOGLE MAPS