Anatomia di un sistema di navigazione di applicazione Cordova (Seconda parte): la barra superiore di navigazione

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.

This command will create a new directory called 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

Tha basic structure

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{
	list-style: nessuna;
	posizione: parente;
	imbottitura: 0;
	larghezza: 100%;
}
#CFX-topbar menu li{
	larghezza: 19% !importante;
	Schermo: blocco-inline;
	Allinea testo: centro;
	vertical-align: mezzo;
}
#CFX-topbar menu li a{
	Schermo: bloccare;
	sfondo: trasparente !importante;
	text-decoration: nessuna;
	margin-top: .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: auto;
}
.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 single-view o secondario-view (in opposizione alla main-view tenutosi nella nostra giostra) e sta andando ad essere l'argomento della terza parte di questo articolo.


Parte 1Parte 2Parte 3Parte 4


5 commenti su “Anatomia di un sistema di navigazione di applicazione Cordova (Seconda parte): la barra superiore di navigazione”

  1. Excellent website you have here but I was wondering if you knew of any user discussion forums that cover the same topics talked about in this
    article? I’d really like to be a part of community where I can get feedback from other experienced individuals that share the same
    interest. If you have any recommendations, please let me know.
    Grazie mille!

    1. Hi download! Unfortunately I don’t know such a community specific to Cordova. But for sure you know StackOverflow and Experts-Exchange. Especially Experts-Exchange is a really comfortable community you partecipate to 🙂

  2. Ciao,

    Thank you for taking the time to write this tutorial. It’s now over 3 years since this was published, and I’m sure you’ll get a warm glow knowing that it’s still finding an audience!

    I have a question about the final Jquery code. I cannot seem to get the “clic” event to fire unless I change “.CFX-topbar menu” per “#CFX-topbar menu”. Is this a typo?

    Anche, the next line

    = Var bersaglio $(Questo).dati(‘index’);

    returnsundefined” (and upon investigation, “Questo” is a HTMLUListElement object) and not the value of the “indice-dati” attribute.

    I’m now stuck trying to figure out if the code is somehow wrong. Do you have the finished code so I can at least check the code samples published here against a working code-set.

    BTW: I am using jQuery 3.4.1

    Grazie molto.

    1. Ciao Paul. Thank you so much for your comment and for your fix: it was actually a typo: “CFX-topbar menu” was not a class but an id. I’ll update the code in the article.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *