Anatomía de un sistema de navegación de aplicaciones Cordova (Parte II): la barra de navegación superior

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

En primer lugar tenemos que instalar iconos materiales por Google. Son excelentes íconos para usar en una aplicación móvil y los 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 index.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. Echemos un vistazo al marcado:

<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 vayamos con el 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;
	z-index  : 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: inline-block;
	texto alineado: centrar;
	vertical-align: medio;
}
#CFX-barra superior del menú-li a{
	monitor: bloquear;
	antecedentes: transparente !importante;
	text-decoration: 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. Solo tenemos que cambiar ligeramente el marcado de nuestras vistas agregando un envoltorio de página y algo de contenido para hacer que nuestra aplicación sea un poco más realista.. Para estos nuevos elementos, también tendremos que hacer algunos cambios más en nuestro index.css.

La modificación de nuestros puntos de vista

Abre tu index.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 ="page3" 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 agregar un elemento que envolverá el contenido de nuestras vistas.. 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 ="page3" 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 ="page3" 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 index.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 reglas aseguran que podamos desplazarnos verticalmente por nuestras vistas 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 bastante simple: usando jQuery, solo tenemos que vincular el evento de clic para los enlaces de ancla en los elementos de nuestra lista y ejecutar un comando simple. 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 de revelar el objetivo del atributo de índice de datos, pero ya has adivinado, tu no? 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 puede navegar a través de sus vistas 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 cuadran del todo ....

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 un nuevo tipo de vista. Esta nueva visión es externo al flujo carrusel: no podemos ir a él simplemente deslizando nuestros dedos y no pertenece a un conjunto de vistas como lo hacen las vistas de carrusel. 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 será el argumento de la tercera parte de este artículo.


Parte 1 - Parte 2 - Parte 3 - Parte 4


5 comentarios en “Anatomía de un sistema de navegación de aplicaciones Cordova (Parte II): la barra de navegación superior”

  1. Excelente sitio web que tiene aquí, pero me preguntaba si conocía algún foro de discusión de usuarios que cubra los mismos temas de los que se habló en este
    artículo? Realmente me gustaría ser parte de una comunidad donde pueda obtener comentarios de otras personas experimentadas que comparten lo mismo
    interesar. Si tiene alguna recomendación, Por favor hagamelo saber.
    Muchas gracias!

    1. Hola descarga! Lamentablemente, no conozco una comunidad así específica de Córdoba.. Pero seguro que conoce StackOverflow y Experts-Exchange. Especialmente Experts-Exchange es una comunidad realmente cómoda en la que participas 🙂

  2. Hola,

    Gracias por tomarse el tiempo para escribir este tutorial.. Ya se acabó 3 años desde que esto fue publicado, y estoy seguro de que obtendrá un brillo cálido sabiendo que todavía está encontrando público!

    Tengo una pregunta sobre el código final de Jquery.. Parece que no puedo conseguir el “hacer clic” evento para disparar a menos que cambie “.CFX-topbar menú” a “#CFX-topbar menú”. ¿Es esto un error tipográfico??

    también, la siguiente linea…

    = Objetivo var $(esta).datos('índice');

    …devoluciones “indefinido” (y tras la investigación, “esta” es un objeto HTMLUListElement) y no el valor de la “índice de datos” atributo.

    Ahora estoy atascado tratando de averiguar si el código es incorrecto de alguna manera. ¿Tiene el código terminado para que al menos pueda comparar los ejemplos de código publicados aquí con un conjunto de códigos de trabajo?.

    Por cierto: Estoy usando jQuery 3.4.1

    Muchas gracias.

    1. Hola Pablo. Muchas gracias por tu comentario y por tu corrección.: en realidad fue un error tipográfico: “CFX-topbar menú” no era una clase sino una identificación. Actualizaré el código en el artículo..

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.