En esta segunda parte del tutorial sobre el sistema de navegación en una aplicación móvil Cordova vamos a sí mismo cómo crear una barra superior fijo que permitirá a nuestros usuarios una forma alternativa para navegar entre principales puntos de vista.

En primer lugar tenemos que instalar iconos materiales por Google. Son grandes iconos para usar en una aplicación móvil y las usaremos para construir nuestra barra superior. Abra su CLI en el directorio del proyecto y escriba el comando siguiente:

NPM instalar materiales de diseño de iconos

Usted puede encontrar algunas formas alternativas para instalar los iconos de materiales aquí.

Este comando creará un nuevo directorio llamado material desiogn-iconos en swipingPages / nodo-módulos directorio: utilizar el administrador de archivos y busque la carpeta iconfont, luego copiarlo en su proyecto .css carpeta. Finalmente, poner un enlace al archivo material icons.css en tus índice.html:

<= Enlace rel"hoja de estilo" type ="text / css" href ="css / iconfont / material icons.css">

Ahora que tenemos iconos material en su lugar podemos comenzar con el margen de beneficio de nuestra navegación superior.

La barra superior de navegación

Esa estructura básica

Dado que queremos hacer nuestra barra superior fijada, ponemos a su marcado directamente en el cuerpo, jus encima del carrusel Bootstrap. Vamos a echar un vistazo en el margen de beneficio:

<div id ="CFX-topbar">
	<UL = ID"CFX-topbar menú">
		<= Li class"activo"><a href ="#" datos de índice ="0"><= Clase I"materiales-iconos">tablero</yo></un></en>
		<en><a href ="#" datos de índice ="1"><= Clase I"materiales-iconos">trabajo en equipo</yo></un></en>
		<en><a href ="#" datos de índice ="2"><= Clase I"materiales-iconos">buscar</yo></un></en>
		<en><a href ="#" datos de índice ="3"><= Clase I"materiales-iconos">compartir</yo></un></en>
		<en><a href ="#" id ="sidemenu-abierto"><= Clase I"materiales-iconos">menú</yo></un></en>
	</la>
</Div>  <!-- CFX-barra superior ->

Ahora vamos a ir con la CSS.

Queremos que nuestra barra superior de navegación sea siempre visible para que establezca su propiedad a la posición fija:

#CFX-topbar{
	antecedentes: #689F38;
	parte superior      : 0;
	izquierda     : 0;
	posición : fijo;
	anchura    : 100%;
	altura   : 50Px;
	Índice Z  : 3;
}

Adicionalmente, establecemos nuestros iconos materiales a un tamaño más grande que el valor predeterminado de 24px.

#CFX-barra superior .material-iconos{
	tamaño de fuente: 32Px;
}

Ahora tenemos que administrar el <la> elemento que en realidad maneja nuestra barra de navegación:

#CFX-topbar menú{
	estilo de lista: ninguna;
	posición: relativo;
	relleno: 0;
	anchura: 100%;
}
#CFX-barra superior del menú-li{
	anchura: 19% !importante;
	monitor: bloque-en línea;
	texto alineado: centrar;
	vertical-align: medio;
}
#CFX-barra superior del menú-li a{
	monitor: bloquear;
	antecedentes: transparente !importante;
	decoración de textos: ninguna;
	margin-top: .3en;
	Color: blanco;
}
#CFX-barra superior del menú-li a:flotar{
	Color: #FFF;
}
#CFX-barra superior del menú-li a .material-iconos{
	Color: #FFF;
}

De esta manera nuestra barra superior está listo. Hemos sólo para cambiar un poco nuestros puntos de vista’ markup añadiendo una página-envoltura y algo de contenido para hacer que nuestra aplicación JST un poco más realista. Para estos nuevos elementos, también tendremos que hacer algún cambio en nuestra más índice.css.

La modificación de nuestros puntos de vista

Abre tu índice.html archivo y look para el marcado del carrusel que sostiene nuestros puntos de vista: Debe tener un aspecto como este:

<div id ="myCarousel" class ="diapositivas carrusel" = Datos-ride"carrusel" intervalo de tiempo ="falso">
	<div class ="carrusel-interior" role ="cuadro de lista">
		<div id ="Página 1" class ="elemento activo"><h2>Página 1</h2></Div>
		<div id ="PAGE2" class ="articulo"><h2>Página 2</h2></Div>
		<div id ="página3" class ="articulo"><h2>Página 3</h2></Div>
		<div id ="página 4" class ="articulo"><h2>Página 4</h2></Div>
	</Div>
</Div>

Ahora tenemos que añadir un elemento que envolverá nuestros puntos de vista’ contenido. Así que cambiar el marcado carrusel con el fin de hacer que parezca que esta:

<div id ="myCarousel" class ="diapositivas carrusel" = Datos-ride"carrusel" intervalo de tiempo ="falso">
	<div class ="carrusel-interior" role ="cuadro de lista">
		<div id ="Página 1" class ="vista del elemento activo">
			<div class ="Página-envoltura">
				<h2>Página 1</h2>
			</Div>
		</Div>
		<div id ="PAGE2" class ="vista del elemento">
			<div class ="Página-envoltura">
				<h2>Página 2</h2>
			</Div>
		</Div>
		<div id ="página3" class ="vista del elemento">
			<div class ="Página-envoltura">
				<h2>Página 3</h2>
			</Div>
		</Div>
		<div id ="página 4" class ="vista del elemento">
			<div class ="Página-envoltura">
				<h2>Página 4</h2>
			</Div>
		</Div>
	</Div>
</Div>

La página-envoltura se asegurará de nuestro contenido será desplazable. Para darle un poco de contenido a nuestros puntos de vista, sólo tiene que añadir a ellos después de texto falso:

<pag>Ipsum de zanahorias, no a la vida de las deudas es apenas modalidad de viaje. Eros tiene más acefe, Sin embargo, un objeto delicatissimi, Por sus licencias de desarrollador griegas. Cuando las luces de Homero, Pero puede utilizar el hidrógeno. Para utilizar estos zril, dicen que se mueve la oficina, Por último, el uso de la expandió. Su comida no,, Lo ha visto un fin de semana, para repudiar los errores.</pag>
<pag>No hay restricción inusual con dos Euripidis, Cuando mi información o. Esa fuerza desarmada, los argumentos apasionados o. ¿Qué tan malo un problema, mar en mandamus bruta. Le fue con buena, los sonidos recibidos Ningún sadipscing. O cómo el error.</pag>
<pag>Cuando la corrupción de fútbol menandri, Y los dos queremos doming. Pero sólo se supone, Mar a gota deshecha, En la corriente principal de sabor. Sem elocuencia que la miel. Que se necesita para atacar Euripidis, los cuerpos de peso para dar cabida a la miel. Haré de ex exerci sit, desarrollador no están de acuerdo con la primera de fútbol, Y uno de estos errores.</pag>
<pag>Mi trabajo habla de fútbol, Del mismo modo temiendo una práctica oponente. Cuando está vacío, revocó la, nuestro Dios, ni, por último, que trabajó, y no en desacuerdo, los condenaban con. Es fácil escuchar el partido. Dos de televisión que debe ser. Cuando el error laoreet. El primero es un día importante, se demuestra que algo similar ha de ser engañado.</pag>
<pag>Ella tiene muy alabanza de la disidencia. Tome por la causa, Se le indica licencias malestar. Junto con otros mazim.Unusual, Oficina de los derechos de los ciudadanos. Pero ofrece precisa, Los jugadores fueron depositados en, el trabajo y el derecho a la paga. Dado que contribuyen a la discusión.</pag>					

El último elemento de marcado carrusel debe tener este aspecto:

<div id ="myCarousel" class ="diapositivas carrusel" = Datos-ride"carrusel" intervalo de tiempo ="falso">
	<div class ="carrusel-interior" role ="cuadro de lista">
		<div id ="Página 1" class ="vista del elemento activo">
			<div class ="Página-envoltura">
				<h2>Página 1</h2>
				<pag>Ipsum de zanahorias, no a la vida de las deudas es apenas modalidad de viaje. Eros tiene más acefe, Sin embargo, un objeto delicatissimi, Por sus licencias de desarrollador griegas. Cuando las luces de Homero, Pero puede utilizar el hidrógeno. Para utilizar estos zril, dicen que se mueve la oficina, Por último, el uso de la expandió. Su comida no,, Lo ha visto un fin de semana, para repudiar los errores.</pag>
				<pag>No hay restricción inusual con dos Euripidis, Cuando mi información o. Esa fuerza desarmada, los argumentos apasionados o. ¿Qué tan malo un problema, mar en mandamus bruta. Le fue con buena, los sonidos recibidos Ningún sadipscing. O cómo el error.</pag>
				<pag>Cuando la corrupción de fútbol menandri, Y los dos queremos doming. Pero sólo se supone, Mar a gota deshecha, En la corriente principal de sabor. Sem elocuencia que la miel. Que se necesita para atacar Euripidis, los cuerpos de peso para dar cabida a la miel. Haré de ex exerci sit, desarrollador no están de acuerdo con la primera de fútbol, Y uno de estos errores.</pag>
				<pag>Mi trabajo habla de fútbol, Del mismo modo temiendo una práctica oponente. Cuando está vacío, revocó la, nuestro Dios, ni, por último, que trabajó, y no en desacuerdo, los condenaban con. Es fácil escuchar el partido. Dos de televisión que debe ser. Cuando el error laoreet. El primero es un día importante, se demuestra que algo similar ha de ser engañado.</pag>
				<pag>Ella tiene muy alabanza de la disidencia. Tome por la causa, Se le indica licencias malestar. Junto con otros mazim.Unusual, Oficina de los derechos de los ciudadanos. Pero ofrece precisa, Los jugadores fueron depositados en, el trabajo y el derecho a la paga. Dado que contribuyen a la discusión.</pag>					
			</Div>
		</Div>
		<div id ="PAGE2" class ="vista del elemento">
			<div class ="Página-envoltura">
				<h2>Página 2</h2>
				<pag>Ipsum de zanahorias, no a la vida de las deudas es apenas modalidad de viaje. Eros tiene más acefe, Sin embargo, un objeto delicatissimi, Por sus licencias de desarrollador griegas. Cuando las luces de Homero, Pero puede utilizar el hidrógeno. Para utilizar estos zril, dicen que se mueve la oficina, Por último, el uso de la expandió. Su comida no,, Lo ha visto un fin de semana, para repudiar los errores.</pag>
				<pag>No hay restricción inusual con dos Euripidis, Cuando mi información o. Esa fuerza desarmada, los argumentos apasionados o. ¿Qué tan malo un problema, mar en mandamus bruta. Le fue con buena, los sonidos recibidos Ningún sadipscing. O cómo el error.</pag>
				<pag>Cuando la corrupción de fútbol menandri, Y los dos queremos doming. Pero sólo se supone, Mar a gota deshecha, En la corriente principal de sabor. Sem elocuencia que la miel. Que se necesita para atacar Euripidis, los cuerpos de peso para dar cabida a la miel. Haré de ex exerci sit, desarrollador no están de acuerdo con la primera de fútbol, Y uno de estos errores.</pag>
				<pag>Mi trabajo habla de fútbol, Del mismo modo temiendo una práctica oponente. Cuando está vacío, revocó la, nuestro Dios, ni, por último, que trabajó, y no en desacuerdo, los condenaban con. Es fácil escuchar el partido. Dos de televisión que debe ser. Cuando el error laoreet. El primero es un día importante, se demuestra que algo similar ha de ser engañado.</pag>
				<pag>Ella tiene muy alabanza de la disidencia. Tome por la causa, Se le indica licencias malestar. Junto con otros mazim.Unusual, Oficina de los derechos de los ciudadanos. Pero ofrece precisa, Los jugadores fueron depositados en, el trabajo y el derecho a la paga. Dado que contribuyen a la discusión.</pag>					
			</Div>
		</Div>
		<div id ="página3" class ="vista del elemento">
			<div class ="Página-envoltura">
				<h2>Página 3</h2>
				<pag>Ipsum de zanahorias, no a la vida de las deudas es apenas modalidad de viaje. Eros tiene más acefe, Sin embargo, un objeto delicatissimi, Por sus licencias de desarrollador griegas. Cuando las luces de Homero, Pero puede utilizar el hidrógeno. Para utilizar estos zril, dicen que se mueve la oficina, Por último, el uso de la expandió. Su comida no,, Lo ha visto un fin de semana, para repudiar los errores.</pag>
				<pag>No hay restricción inusual con dos Euripidis, Cuando mi información o. Esa fuerza desarmada, los argumentos apasionados o. ¿Qué tan malo un problema, mar en mandamus bruta. Le fue con buena, los sonidos recibidos Ningún sadipscing. O cómo el error.</pag>
				<pag>Cuando la corrupción de fútbol menandri, Y los dos queremos doming. Pero sólo se supone, Mar a gota deshecha, En la corriente principal de sabor. Sem elocuencia que la miel. Que se necesita para atacar Euripidis, los cuerpos de peso para dar cabida a la miel. Haré de ex exerci sit, desarrollador no están de acuerdo con la primera de fútbol, Y uno de estos errores.</pag>
				<pag>Mi trabajo habla de fútbol, Del mismo modo temiendo una práctica oponente. Cuando está vacío, revocó la, nuestro Dios, ni, por último, que trabajó, y no en desacuerdo, los condenaban con. Es fácil escuchar el partido. Dos de televisión que debe ser. Cuando el error laoreet. El primero es un día importante, se demuestra que algo similar ha de ser engañado.</pag>
				<pag>Ella tiene muy alabanza de la disidencia. Tome por la causa, Se le indica licencias malestar. Junto con otros mazim.Unusual, Oficina de los derechos de los ciudadanos. Pero ofrece precisa, Los jugadores fueron depositados en, el trabajo y el derecho a la paga. Dado que contribuyen a la discusión.</pag>					
			</Div>
		</Div>
		<div id ="página 4" class ="vista del elemento">
			<div class ="Página-envoltura">
				<h2>Página 4</h2>
				<pag>Ipsum de zanahorias, no a la vida de las deudas es apenas modalidad de viaje. Eros tiene más acefe, Sin embargo, un objeto delicatissimi, Por sus licencias de desarrollador griegas. Cuando las luces de Homero, Pero puede utilizar el hidrógeno. Para utilizar estos zril, dicen que se mueve la oficina, Por último, el uso de la expandió. Su comida no,, Lo ha visto un fin de semana, para repudiar los errores.</pag>
				<pag>No hay restricción inusual con dos Euripidis, Cuando mi información o. Esa fuerza desarmada, los argumentos apasionados o. ¿Qué tan malo un problema, mar en mandamus bruta. Le fue con buena, los sonidos recibidos Ningún sadipscing. O cómo el error.</pag>
				<pag>Cuando la corrupción de fútbol menandri, Y los dos queremos doming. Pero sólo se supone, Mar a gota deshecha, En la corriente principal de sabor. Sem elocuencia que la miel. Que se necesita para atacar Euripidis, los cuerpos de peso para dar cabida a la miel. Haré de ex exerci sit, desarrollador no están de acuerdo con la primera de fútbol, Y uno de estos errores.</pag>
				<pag>Mi trabajo habla de fútbol, Del mismo modo temiendo una práctica oponente. Cuando está vacío, revocó la, nuestro Dios, ni, por último, que trabajó, y no en desacuerdo, los condenaban con. Es fácil escuchar el partido. Dos de televisión que debe ser. Cuando el error laoreet. El primero es un día importante, se demuestra que algo similar ha de ser engañado.</pag>
				<pag>Ella tiene muy alabanza de la disidencia. Tome por la causa, Se le indica licencias malestar. Junto con otros mazim.Unusual, Oficina de los derechos de los ciudadanos. Pero ofrece precisa, Los jugadores fueron depositados en, el trabajo y el derecho a la paga. Dado que contribuyen a la discusión.</pag>					
			</Div>
		</Div>
	</Div>
</Div>

En el índice.css sustituimos las reglas carrusel que nos habíamos marcado en la primera parte de este tutorial:

.carrusel,.articulo,.activo{
	altura:100%;
}
.carrusel-interior{
	altura:100%;
}

whit estas nuevas reglas:

.carrusel {
	altura: 100%;
}
.carrusel-interior {
	altura: 100%;
}
.carrusel-interior>.articulo {
	altura: 100%;
	relleno: 10Px 0;
	Desbordamiento: auto;
}
.carrusel interior .página-wrapper{
	relleno: 50px 10px 0 10Px !importante;
	margin-bottom: 60Px;
}

Estas normas garantizan que seremos capaces de desplazarse verticalmente nuestros puntos de vista para ver todo su contenido.

Eso es todo: trate de ejecutar la aplicación para ver cómo las miradas de barras de navegación. Ahora vamos a darle vida con un poco de javascript.

Llevar la barra de navegación a la vida!

Por fin podemos escribir una pieza de javascript para llevar nuestra barra de navegación superior a la vida. Es muy sencillo: usando jQuery acabamos de enlazar el evento click de los enlaces de anclaje en nuestros artículos de la lista y ejecutar un simple comando. Comience a buscar en el código:

$(documento).en('hacer clic', '# CFX-barra superior # CFX-topbar-menú', función () {
	= Objetivo var $(esta).datos('índice');
	$('.carrusel').carrusel(objetivo);
	cambiar (objetivo) {
		caso 0:
			//hacer aquí específica cosas a la vista, como la carga de datos ...;
			descanso;
		caso 1:
                        //hacer aquí específica cosas a la vista, como la carga de datos ...;    
			descanso;
		caso 2:
                        //hacer aquí específica cosas a la vista, como la carga de datos ...;
			descanso;
		caso 3:
                        //hacer aquí específica cosas a la vista, como la carga de datos ...;
			descanso;
	}
});

Muchas gracias a Pablo, que se dio cuenta de un error tipográfico en este fragmento de código en el que había utilizado «CFX-topbar menú» como una clase en lugar de como un identificador.

Probablemente se había dado cuenta de que en nuestro margen de beneficio barra superior que había insertado un atributo de datos sin decirle nada al respecto: Ahora es el momento para revelar el objetivo del atributo de datos del índice, pero ya has adivinado, ¿no es cierto? Desde el carrusel() método de la carrusel objeto acepta como parámetro un índice numérico, tenemos que proveernos de una manera fácil y rápida para obtener el índice de la página (ver) queremos ir a. Hemos codificado situado justo duro este índice mediante el atributo de datos de índice (tenga en cuenta el índice comienza a partir de 0) y entonces, de jQuery, obtenemos el índice de la opinión de nuestros puntos de enlace hacia y lo usamos para invocar la carrusel() método.

También he añadido una sentencia switch, porque en el mundo real que se podía esperar cualquier página realiza alguna tarea específica y cargas algunos datos específicos: el mejor lugar en el que podemos realizar estas acciones básicas para cada vista específica está aquí, en el controlador de eventos que se agradece cargas de la propia vista.

Si ejecuta la aplicación ahora, verá que se puede navegar a través de sus puntos de vista tanto deslizando el dedo hacia la izquierda y hacia la derecha o simplemente tocando los botones de la barra superior.

Espera un momento, las cosas no son sumando…

En nuestra aplicación tenemos sólo cuatro puntos de vista, pero en la barra de navegación superior que tiene cinco botones en el que podemos aprovechar en! Lo que hace el quinto botón? Bien, ves que tiene el icono de botón de menú lateral clásica ampliamente utilizado en muchas aplicaciones: en el hecho de que el botón se abre un menú lateral, pero antes de que podamos verlo en acción tenemos que introducir el tipo de una nueva vista. Esta nueva visión es externo al flujo carrusel: no podemos ir a ella simplemente deslizar los dedos y no pertenece a un conjunto de puntos de vista como los puntos de vista de carrusel hacer. Podríamos llamar a este tipo de vista -Sola vista o secundario-view (en oposición a la vista principal celebrada en nuestra carrusel) y que va a ser el argumento de la tercera parte de este artículo.

---

Parte 1 – Parte 2 – Parte 3 – Parte 4

---