In questa seconda parte del tutorial sul sistema di navigazione in un'applicazione mobile Cordova faremo se come creare una barra superiore fissa che consentirà ai nostri utenti un modo alternativo per navigare tra i viste principali.

Prima di tutto dobbiamo installare le icone del materiale da parte di Google. Sono grandi icone da utilizzare in un app mobile e noi li usano per costruire la nostra barra in alto. Aprire il CLI nella directory del progetto e digitare il comando seguente:

npm installare materiale-design-icons

Potete trovare alcuni modi alternativi per installare le icone del materiale Qui.

Questo comando creerà una nuova directory chiamata materiale-desiogn-icons nel swipingPages / nodo moduli elenco: utilizzare il file manager e il look per la cartella iconfont, poi copiarlo nel progetto .css cartella. Infine, mettere un link al file materiale icons.css nel tuo indice.html:

<Link rel ="foglio di stile" type ="text / css" href ="css / iconfont / materiale icons.css">

Ora che abbiamo le icone materiale in posizione possiamo iniziare con il markup della nostra navigazione in alto.

La barra di navigazione superiore

La struttura di base

Dal momento che vogliamo rendere la nostra barra superiore fissata, abbiamo messo la sua marcatura direttamente nel corpo, jus sopra della giostra Bootstrap. Diamo uno sguardo al markup:

<div id ="CFX-topbar">
	<ul id ="CFX-topbar menu">
		<Li = classe"attivo"><a href ="#" Dati-index ="0"><= Classe I"materiali-icons">pannello di controllo</io></un'></in>
		<in><a href ="#" Dati-index ="1"><= Classe I"materiali-icons">lavoro di gruppo</io></un'></in>
		<in><a href ="#" Dati-index ="2"><= Classe I"materiali-icons">ricerca</io></un'></in>
		<in><a href ="#" Dati-index ="3"><= Classe I"materiali-icons">Condividere</io></un'></in>
		<in><a href ="#" id ="Sidemenu-Apri"><= Classe I"materiali-icons">menù</io></un'></in>
	</il>
</Div>  <!-- CFX-topbar ->

Ora andiamo con i CSS.

Vogliamo che la nostra barra di navigazione superiore essere sempre visibile in modo abbiamo impostato la sua proprietà position a fisso:

#CFX-topbar{
	sfondo: #689F38;
	superiore      : 0;
	sinistra     : 0;
	posizione : fisso;
	larghezza    : 100%;
	altezza   : 50Px;
	Z-Index  : 3;
}

Inoltre, abbiamo impostato le nostre icone di materiale a una dimensione più grande di quello di default di 24px.

#CFX-topbar .material-icons{
	dimensione del font: 32Px;
}

Ora dobbiamo gestire il <il> elemento che in realtà gestisce la nostra barra di navigazione:

#CFX-topbar menu{
	stile elenco: nessuna;
	posizione: parente;
	imbottitura: 0;
	larghezza: 100%;
}
#CFX-topbar menu li{
	larghezza: 19% !importante;
	Schermo: blocco-inline;
	Allinea testo: centro;
	verticale-allineato: mezzo;
}
#CFX-topbar menu li a{
	Schermo: bloccare;
	sfondo: trasparente !importante;
	decorazione del testo: nessuna;
	margine-superiore: .3in;
	colore: bianca;
}
#CFX-topbar menu li a:librarsi{
	colore: #F F F;
}
#CFX-topbar-menu di li a .Material-icons{
	colore: #F F F;
}

In questo modo la nostra barra superiore è pronto. Abbiamo solo cambiare un po 'le nostre opinioni’ markup l'aggiunta di una pagina-wrapper e alcuni contenuti per rendere la nostra applicazione JST un po 'più realistico. Per questi nuovi elementi, avremo anche a fare un po 'di cambiamento nella nostra indice.css.

Modificare le nostre opinioni

Apri i tuoi indice.html di file e look per la marcatura della giostra che detiene le nostre opinioni: Dovrebbe sembrare come questo:

<div id ="myCarousel" class ="scivolo giostra" Dati-ride ="giostra" intervallo di tempo ="falso">
	<div class ="giostra interno" role ="casella di riepilogo">
		<div id ="Pagina 1" class ="elemento attivo"><h2>Pagina 1</h2></Div>
		<div id ="PAGE2" class ="articolo"><h2>Pagina 2</h2></Div>
		<div id ="pagina 3" class ="articolo"><h2>page 3</h2></Div>
		<div id ="Pagina4" class ="articolo"><h2>pagina 4</h2></Div>
	</Div>
</Div>

Dobbiamo ora aggiungere un elemento che vi avvolgerà le nostre opinioni’ soddisfare. Quindi modificare il markup giostra in modo da far sembrare che questo:

<div id ="myCarousel" class ="scivolo giostra" Dati-ride ="giostra" intervallo di tempo ="falso">
	<div class ="giostra interno" role ="casella di riepilogo">
		<div id ="Pagina 1" class ="vista dell'elemento attivo">
			<div class ="Pagina-wrapper">
				<h2>Pagina 1</h2>
			</Div>
		</Div>
		<div id ="PAGE2" class ="vista dell'elemento">
			<div class ="Pagina-wrapper">
				<h2>Pagina 2</h2>
			</Div>
		</Div>
		<div id ="pagina 3" class ="vista dell'elemento">
			<div class ="Pagina-wrapper">
				<h2>page 3</h2>
			</Div>
		</Div>
		<div id ="Pagina4" class ="vista dell'elemento">
			<div class ="Pagina-wrapper">
				<h2>pagina 4</h2>
			</Div>
		</Div>
	</Div>
</Div>

La pagina di-wrapper garantirà il nostro contenuto sarà scorrevole. Per dare un contenuto ai nostri punti di vista, basta aggiungere ad essi seguente testo falso:

<p>Lorem ipsum carote, non la vita dei debiti è RVing scarsamente. Eros ha ulteriormente acefe, Ma un oggetto delicatissimi, Per i suoi licenze per sviluppatori greci. Quando le luci Homer, Ma può contenere idrogeno. Per utilizzare questi zril, dicono si muove ufficio, Infine, l'uso del espansa. Il suo cibo no,, lo vedo da un week-end, di ripudiare gli errori.</p>
<p>Nessun vincolo insolito con due Euripidis, Quando il mio informazioni o. Quella forza disarmata, le appassionate argomentazioni o. Quanto male un problema, mare a mandamus bruta. E 'cavata con una buona, i suoni non ha ricevuto sadipscing. O come l'errore.</p>
<p>Quando menandri la corruzione di calcio, E entrambi vogliamo doming. Ma sono solo supporre, Sea a goccia annullata, Nel gusto corrente principale. Sem eloquenza che il miele. Ci vuole attaccare Euripidis, i corpi di peso per accogliere il miele. Farò di ex Sit Eserci, sviluppatore in disaccordo con il primo calcio, E uno di questi errori.</p>
<p>Il mio lavoro parla al calcio, Analogamente temere una pratica avversario. Quando è vuoto, rovesciato il, il nostro Dio, né, infine, che ha lavorato, e non ai ferri corti, hanno trovato da ridire. E 'facile da ascoltare il gioco. Due televisione che dovrebbe essere. Quando l'errore laoreet. Il primo è un giorno importante, è dimostrato che qualcosa di simile deve essere ingannato.</p>
<p>Ha molto lode del dissenso. Prendilo per la causa, Che viene indicato licenze disagio. Insieme ad altri mazim.Unusual, Ufficio dei diritti dei cittadini. Ma offre accurate, I giocatori erano state gettate in, del lavoro e il diritto di pagare. Dal momento che contribuire alla discussione.</p>					

L'elemento carosello di markup finale dovrebbe assomigliare a questa:

<div id ="myCarousel" class ="scivolo giostra" Dati-ride ="giostra" intervallo di tempo ="falso">
	<div class ="giostra interno" role ="casella di riepilogo">
		<div id ="Pagina 1" class ="vista dell'elemento attivo">
			<div class ="Pagina-wrapper">
				<h2>Pagina 1</h2>
				<p>Lorem ipsum carote, non la vita dei debiti è RVing scarsamente. Eros ha ulteriormente acefe, Ma un oggetto delicatissimi, Per i suoi licenze per sviluppatori greci. Quando le luci Homer, Ma può contenere idrogeno. Per utilizzare questi zril, dicono si muove ufficio, Infine, l'uso del espansa. Il suo cibo no,, lo vedo da un week-end, di ripudiare gli errori.</p>
				<p>Nessun vincolo insolito con due Euripidis, Quando il mio informazioni o. Quella forza disarmata, le appassionate argomentazioni o. Quanto male un problema, mare a mandamus bruta. E 'cavata con una buona, i suoni non ha ricevuto sadipscing. O come l'errore.</p>
				<p>Quando menandri la corruzione di calcio, E entrambi vogliamo doming. Ma sono solo supporre, Sea a goccia annullata, Nel gusto corrente principale. Sem eloquenza che il miele. Ci vuole attaccare Euripidis, i corpi di peso per accogliere il miele. Farò di ex Sit Eserci, sviluppatore in disaccordo con il primo calcio, E uno di questi errori.</p>
				<p>Il mio lavoro parla al calcio, Analogamente temere una pratica avversario. Quando è vuoto, rovesciato il, il nostro Dio, né, infine, che ha lavorato, e non ai ferri corti, hanno trovato da ridire. E 'facile da ascoltare il gioco. Due televisione che dovrebbe essere. Quando l'errore laoreet. Il primo è un giorno importante, è dimostrato che qualcosa di simile deve essere ingannato.</p>
				<p>Ha molto lode del dissenso. Prendilo per la causa, Che viene indicato licenze disagio. Insieme ad altri mazim.Unusual, Ufficio dei diritti dei cittadini. Ma offre accurate, I giocatori erano state gettate in, del lavoro e il diritto di pagare. Dal momento che contribuire alla discussione.</p>					
			</Div>
		</Div>
		<div id ="PAGE2" class ="vista dell'elemento">
			<div class ="Pagina-wrapper">
				<h2>Pagina 2</h2>
				<p>Lorem ipsum carote, non la vita dei debiti è RVing scarsamente. Eros ha ulteriormente acefe, Ma un oggetto delicatissimi, Per i suoi licenze per sviluppatori greci. Quando le luci Homer, Ma può contenere idrogeno. Per utilizzare questi zril, dicono si muove ufficio, Infine, l'uso del espansa. Il suo cibo no,, lo vedo da un week-end, di ripudiare gli errori.</p>
				<p>Nessun vincolo insolito con due Euripidis, Quando il mio informazioni o. Quella forza disarmata, le appassionate argomentazioni o. Quanto male un problema, mare a mandamus bruta. E 'cavata con una buona, i suoni non ha ricevuto sadipscing. O come l'errore.</p>
				<p>Quando menandri la corruzione di calcio, E entrambi vogliamo doming. Ma sono solo supporre, Sea a goccia annullata, Nel gusto corrente principale. Sem eloquenza che il miele. Ci vuole attaccare Euripidis, i corpi di peso per accogliere il miele. Farò di ex Sit Eserci, sviluppatore in disaccordo con il primo calcio, E uno di questi errori.</p>
				<p>Il mio lavoro parla al calcio, Analogamente temere una pratica avversario. Quando è vuoto, rovesciato il, il nostro Dio, né, infine, che ha lavorato, e non ai ferri corti, hanno trovato da ridire. E 'facile da ascoltare il gioco. Due televisione che dovrebbe essere. Quando l'errore laoreet. Il primo è un giorno importante, è dimostrato che qualcosa di simile deve essere ingannato.</p>
				<p>Ha molto lode del dissenso. Prendilo per la causa, Che viene indicato licenze disagio. Insieme ad altri mazim.Unusual, Ufficio dei diritti dei cittadini. Ma offre accurate, I giocatori erano state gettate in, del lavoro e il diritto di pagare. Dal momento che contribuire alla discussione.</p>					
			</Div>
		</Div>
		<div id ="pagina 3" class ="vista dell'elemento">
			<div class ="Pagina-wrapper">
				<h2>page 3</h2>
				<p>Lorem ipsum carote, non la vita dei debiti è RVing scarsamente. Eros ha ulteriormente acefe, Ma un oggetto delicatissimi, Per i suoi licenze per sviluppatori greci. Quando le luci Homer, Ma può contenere idrogeno. Per utilizzare questi zril, dicono si muove ufficio, Infine, l'uso del espansa. Il suo cibo no,, lo vedo da un week-end, di ripudiare gli errori.</p>
				<p>Nessun vincolo insolito con due Euripidis, Quando il mio informazioni o. Quella forza disarmata, le appassionate argomentazioni o. Quanto male un problema, mare a mandamus bruta. E 'cavata con una buona, i suoni non ha ricevuto sadipscing. O come l'errore.</p>
				<p>Quando menandri la corruzione di calcio, E entrambi vogliamo doming. Ma sono solo supporre, Sea a goccia annullata, Nel gusto corrente principale. Sem eloquenza che il miele. Ci vuole attaccare Euripidis, i corpi di peso per accogliere il miele. Farò di ex Sit Eserci, sviluppatore in disaccordo con il primo calcio, E uno di questi errori.</p>
				<p>Il mio lavoro parla al calcio, Analogamente temere una pratica avversario. Quando è vuoto, rovesciato il, il nostro Dio, né, infine, che ha lavorato, e non ai ferri corti, hanno trovato da ridire. E 'facile da ascoltare il gioco. Due televisione che dovrebbe essere. Quando l'errore laoreet. Il primo è un giorno importante, è dimostrato che qualcosa di simile deve essere ingannato.</p>
				<p>Ha molto lode del dissenso. Prendilo per la causa, Che viene indicato licenze disagio. Insieme ad altri mazim.Unusual, Ufficio dei diritti dei cittadini. Ma offre accurate, I giocatori erano state gettate in, del lavoro e il diritto di pagare. Dal momento che contribuire alla discussione.</p>					
			</Div>
		</Div>
		<div id ="Pagina4" class ="vista dell'elemento">
			<div class ="Pagina-wrapper">
				<h2>pagina 4</h2>
				<p>Lorem ipsum carote, non la vita dei debiti è RVing scarsamente. Eros ha ulteriormente acefe, Ma un oggetto delicatissimi, Per i suoi licenze per sviluppatori greci. Quando le luci Homer, Ma può contenere idrogeno. Per utilizzare questi zril, dicono si muove ufficio, Infine, l'uso del espansa. Il suo cibo no,, lo vedo da un week-end, di ripudiare gli errori.</p>
				<p>Nessun vincolo insolito con due Euripidis, Quando il mio informazioni o. Quella forza disarmata, le appassionate argomentazioni o. Quanto male un problema, mare a mandamus bruta. E 'cavata con una buona, i suoni non ha ricevuto sadipscing. O come l'errore.</p>
				<p>Quando menandri la corruzione di calcio, E entrambi vogliamo doming. Ma sono solo supporre, Sea a goccia annullata, Nel gusto corrente principale. Sem eloquenza che il miele. Ci vuole attaccare Euripidis, i corpi di peso per accogliere il miele. Farò di ex Sit Eserci, sviluppatore in disaccordo con il primo calcio, E uno di questi errori.</p>
				<p>Il mio lavoro parla al calcio, Analogamente temere una pratica avversario. Quando è vuoto, rovesciato il, il nostro Dio, né, infine, che ha lavorato, e non ai ferri corti, hanno trovato da ridire. E 'facile da ascoltare il gioco. Due televisione che dovrebbe essere. Quando l'errore laoreet. Il primo è un giorno importante, è dimostrato che qualcosa di simile deve essere ingannato.</p>
				<p>Ha molto lode del dissenso. Prendilo per la causa, Che viene indicato licenze disagio. Insieme ad altri mazim.Unusual, Ufficio dei diritti dei cittadini. Ma offre accurate, I giocatori erano state gettate in, del lavoro e il diritto di pagare. Dal momento che contribuire alla discussione.</p>					
			</Div>
		</Div>
	</Div>
</Div>

Nel indice.css sostituiamo le regole giostra che ci eravamo prefissati nella prima parte di questo tutorial:

.giostra,.articolo,.attivo{
	altezza:100%;
}
.giostra interno{
	altezza:100%;
}

Whit queste nuove regole:

.giostra {
	altezza: 100%;
}
.giostra interno {
	altezza: 100%;
}
.giostra interno>.articolo {
	altezza: 100%;
	imbottitura: 10Px 0;
	straripamento: Automatico;
}
.giostra interno .page-involucro{
	imbottitura: 50px 10px 0 10Px !importante;
	margine-inferiore: 60Px;
}

Queste regole assicurano che saremo in grado di scorrere in senso verticale le nostre opinioni per vedere tutti i loro contenuti.

È tutto: tenta di eseguire l'applicazione per vedere come la navigazione sguardi bar. Ora stiamo andando a dare la vita con un po 'di javascript.

Portare barra di navigazione per la vita!

Possiamo finalmente scrivere un pezzo di javascript per portare la nostra barra di navigazione superiore alla vita. E 'abbastanza semplice: utilizzando jQuery Abbiamo appena per legare l'evento click per i collegamenti di ancoraggio nelle nostre voci di elenco ed eseguire un semplice comando. Iniziare a guardare il codice:

$(documento).su('clic', '# CFX-topbar # CFX-topbar menu', funzione () {
	= Var bersaglio $(Questo).dati('indice');
	$('.giostra').giostra(bersaglio);
	interruttore (bersaglio) {
		Astuccio 0:
			//fare qui cose specifiche per la vista, come il caricamento dei dati ...;
			rompere;
		Astuccio 1:
                        //fare qui cose specifiche per la vista, come il caricamento dei dati ...;    
			rompere;
		Astuccio 2:
                        //fare qui cose specifiche per la vista, come il caricamento dei dati ...;
			rompere;
		Astuccio 3:
                        //fare qui cose specifiche per la vista, come il caricamento dei dati ...;
			rompere;
	}
});

Grazie mille a Paolo che ha notato un errore di battitura in questo frammento di codice in cui avevo usato “CFX-topbar menu” come classe anziché come un id.

Probabilmente si era accorto che nella nostra barra superiore markup avevo inserito un attributo di dati senza dire nulla: Ora è il momento di rivelare l'obiettivo del attributo data-index, ma avete già indovinato, non è vero? Dal momento che il giostra() metodo della giostra oggetto accetta come parametro un indice numerico, dobbiamo fornire noi con un modo semplice e veloce per ottenere l'indice della pagina (Visualizza) vogliamo andare a. Abbiamo appena hard coded questo indice utilizzando l'attributo data-index (tenere a mente l'indice parte da 0) e poi, da jQuery, otteniamo l'indice della vista i nostri punti di collegamento da e per lo usiamo per invocare il giostra() metodo.

Ho anche aggiunto un'istruzione switch, perché nel mondo reale ci si poteva aspettare qualsiasi pagina esegue un compito specifico e carichi di alcuni dati specifici: il posto migliore in cui siamo in grado di eseguire queste azioni di base per ogni visualizzazione specifico è proprio qui, nel gestore di eventi pagherei carica la vista stessa.

Se si esegue l'applicazione ora, vedrai che è possibile navigare attraverso la sua vista sia scorrendo il dito verso sinistra e verso destra o semplicemente toccando i pulsanti della barra superiore.

Aspetta un attimo, le cose non sono abbastanza sommando…

Nella nostra applicazione abbiamo solo quattro viste, ma nella navigazione barra in alto abbiamo cinque pulsanti dove possiamo toccare! Quello che il quinto pulsante fa? Bene, si vede che il pulsante con l'icona del menu laterale classica ampiamente usato in talmente tante applicazioni: nel fatto che il pulsante si apre un side-menù, ma prima di poter vedere in azione dobbiamo introdurre un nuovo tipo di visualizzazione. Questa nuova visione è esterno al flusso giostra: non possiamo andare ad esso semplicemente scorrendo le dita e non appartiene ad una serie di punti di vista come il punto di vista carosello fare. Potremmo chiamare questo tipo di visualizzazione a vista singola o secondario-view (in opposizione alla vista principale tenutosi nella nostra giostra) e sta andando ad essere l'argomento della terza parte di questo articolo.

---

Parte 1 – Parte 2 – Parte 3 – Parte 4

---