Anatomía de un sistema de navegación de aplicaciones Cordova (parte III): el menú lateral

Hasta ahora hemos visto cómo gestionar nuestros puntos de vista puesta en el carrusel de Bootstrap: esto nos permite, con la ayuda de algunos plug-in, a deslizar los dedos para cambiar entre vistas. En realidad, hemos utilizado un regulador de la imagen web estándar para construir nuestra estructura de aplicación y obtener el efecto de deslizar.

En la segunda parte del artículo hemos añadido una barra superior de navegación con algunos botones con el fin de proporcionar al usuario una forma alternativa de cambiar entre nuestros puntos de vista, lo que hemos llamado principales puntos de vista.

Pero, como todos ya sabemos, una aplicación móvil tiene un montón de puntos de vista y en su mayor parte son lo que podríamos llamar vistas secundarias, vistas que residen fuera de los principales puntos de vista’ fluir y que se puede acceder normalmente pulsando los botones que desencadenan una acción: botones como «Ver detalles», «Comprar», «Compartir» y así. En esta tercera parte del artículo veremos en detalle cómo implementar y utilizar estos vistas secundarias: usaremos para crear una menú lateral la cual se desliza suavemente desde el lado derecho y una falsificación totalmente estúpido considera que accederemos pulsando un botón del menú de la nuestra. Pero antes de empezar con el código que tenemos que conseguir un poco de nueva herramienta.

Pre-requisitos

La primera herramienta que necesitamos es la biblioteca animar.css. esta biblioteca, que probablemente mosto de ustedes ya conocen y utilizan en sus proyectos, aloows para implementar easlily animación agradable para cualquier elemento del DOM. Para aquellos que todavía no tienen esta biblioteca instalada en sus máquinas, este es el enlace de descarga.

Tal vez tenemos que forjaremos: Para comprobar si podemos sólo tiene que utilizar el plugin jquery.touchSwipe

El menú lateral

El primero vista secundaria vamos a construir es el menú lateral. aparecerá este menú lateral corredera desde la derecha cuando el usuario pulsa en el último botón en el barra superior de navegación. Sinceramente, el menú lateral es sólo parcialmente una vista secundaria, al menos en el sentido que utilizo este término. Como he dicho anteriormente, en una aplicación tenemos muchos vistas secundarias, pero es probable que tenga un solo menú lateral. Incluso si tenemos que construir más de un menú lateral, ellos no van a ser tantos como los otros puntos de vista que una aplicación puede poner en práctica para llevar a cabo sus procesos. Por otro lado, un menú lateral no es una vista principal porque reside fuera de la principales puntos de vista’ fluir y que no se puede acceder simplemente como otra vista en una secuencia ordenada.

dicho esto, let’s start to see how we build the side menu in our índice.html archivo. Este es el margen de beneficio:

<div id ="Menú lateral">
	<div class ="sidemenu-header">
		<Div><a href ="#" id ="sidemenu de cerca"><= Clase I"materiales-iconos">cancelar</yo></un></Div>
	</Div>
	<= Ul class"opciones">
		<en><a href ="#" class ="view_a">2 Una vista</un></en>
		<en><a href ="#" class ="view_b">2 B view</un></en>
		<en><a href ="#" class ="view_c">2 Ver C</un></en>
		<en><a href ="#" class ="view_d">2 D vista</un></en>
		<en><a href ="#" class ="view_e">2 y vista</un></en>
	</la>
</Div>

Bastante sencillo, No es? En primer lugar hemos puesto en marcha una cabecera donde se coloca un botón para cerrar el menú lateral. Luego usamos una lista no ordenada n para construir el propio menú.

reglas CSS para el menú lateral

#Menú lateral{
	antecedentes: #FFF !importante;
	posición: absoluto;
        monitor: ninguna;
	Derecha: 0;
	parte superior: 0;
	anchura: 80%;
	altura: 100%;
	Índice Z: 5;
	-webkit-box-shadow: -2px 0px 0px 6px RGBA(50, 50, 50, 0.75);
	-moz-box-shadow:    -2px 0px 0px 6px RGBA(50, 50, 50, 0.75);
	sombra de la caja:         -2px 0px 0px 6px RGBA(50, 50, 50, 0.75);
}
.sidemenu-header{
	antecedentes: #689F38;
	posición : relativo;
	parte superior      : 0;
	izquierda     : 0;
	anchura    : 100%;
	altura   : 50Px;
	/*Índice Z  : 4;*/
	borde inferior: 6px sólido transparente;
	acolchado superior: 6Px;
}
.sidemenu-header-iconos .material{
	tamaño de fuente: 32Px;
}
#distrito Sidemenu{
	list-style-type: ninguna;
}
#SIDEMENU ul li{
	Color:	#0D6E9C;
}
#sidemenu de cerca{
	margen izquierdo: 10Px;
	Color: blanco !importante;
}

También hay que añadir una superposición en nuestro margen de beneficio con el fin de vista subyacente ligeramente ennegrecen con el menú en las diapositivas. Añadir esta línea inmediatamente después de la <cuerpo> etiqueta en su índice.html:

<div id ="cubrir"></Div>

En el índice.css, añadimos siguiente regla:

#cubrir{
	posición: absoluto;
	monitor: ninguna;
	anchura: 100%;
	altura: 100%;
	izquierda: 0;
	parte superior: 0;
	antecedentes: RGBA(0,0,0,.3);
	Índice Z: 5;
}

Ir a vivir con javascript

Ante todo, vamos a anotar los dos controladores de eventos que necesitamos para mostrar y ocultar nuestro menú lateral:

$(documento).en('hacer clic', '# Sidemenu-abierto', función (mi) {
	e.preventDefault();
	enterMenu();
});
$(documento).en('hacer clic', '# Sidemenu de cerca', función (mi) {
	e.preventDefault();
	EXITMENU();
});	

Nada especial aquí: acabamos de evitar que el comportamiento predeterminado del evento y luego llamamos a la función apropiada. Bueno, No voy a perder el tiempo con discusiones inútiles y te voy a mostrar el código de la enterMenu() método:

función enterMenu() {
	$('#Sidemenu')..css({'monitor': 'bloquear'}).addClass('SlideInRight animada');
	$('#cubrir').fadeIn();
	setTimeout(función () {
		$('#Sidemenu').removeClass('SlideInRight animada');
	}, 1000);
}

En la primera línea nos propusimos propiedad de presentación para el menú lateral para «bloquear» y luego añadimos 2 clases, «animado» y «slideInRight». La primera clase sólo se activa la animación de nuestra «Menú lateral» Div, la segunda especifica el tipo de animación. En este caso, queremos la diapositiva menú lateral en el lado derecho.

Sugiero a explorar el archivo animado.css para descubrir todos los tipos de animación soportados.

A continuación, hacemos la superposición visible lo que la vista subyacente ligeramente oscurecido.

Después de esto, usamos setTimeout() función para retrasar un poco el siguiente comando que eliminan las clases «animado» y «slideInRight»: De esta manera nuestra div estará limpio y listo para ser animado de nuevo cuando vamos a querer cerrarla mediante el EXITMENU() método:

función EXITMENU() {
	$('#Sidemenu').addClass('SlideOutRight animada');
	$('#cubrir').fadeOut();
	setTimeout(función () {
		$('#Sidemenu').removeClass('SlideOutRight animada')..css({'monitor': 'ninguna'});
	}, 1000);
}

Lo ves? los EXITMENU() función revertir el estado div a su estado original: primero agregue la clase «animado» de nuevo y establecer el tipo de animación para «slideOutRight», por lo que el menú lateral se deslizará hacia la derecha, como todos esperarían que hiciera 🙂 Entonces, oculta la superposición. Finalmente,dentro de setTimeout() bloquear, la función de eliminar las clasees para la animación y establezca la propiedad de visualización del menú lateral para «ninguna».

Si ejecuta la aplicación ahora, usted puede ver el menú lateral en la acción. En la siguiente parte del artículo vamos a examinar la vistas secundarias ellos mismos y los usaremos para dar vida a los elementos del menú lateral.

---

Parte 1 – Parte 2 – Parte 3 – Parte 4

---