Anatomia di un sistema di navigazione di applicazione Cordova (parte III): il menu laterale

Fino ad ora abbiamo visto come gestire le nostre opinioni mettendoli all'interno del carosello Bootstrap: questo ci permette, con l'aiuto di alcuni plug-in, di strisciare le nostre dita per passare da una vista. In realtà abbiamo usato un cursore immagine Web standard per costruire la nostra struttura app e ottenere l'effetto strisciata.

Nella seconda parte dell'articolo abbiamo aggiunto una barra superiore di navigazione con alcuni tasti per fornire all'utente un modo alternativo per passare tra le nostre opinioni, che abbiamo chiamato viste principali.

Ma, come tutti già sappiamo, un app mobile ha tonnellate di vista e la maggior parte sono ciò che noi potremmo chiamare viste secondarie, vista che risiedono al di fuori delle principali opinioni’ flusso e che si può accedere di solito toccando i tasti che fanno scattare l'azione: pulsanti come “Vedi i dettagli”, “Acquistare”, “Condividere” e così via. In questa terza parte dell'articolo vedremo in dettaglio come implementare e utilizzare questi viste secondarie: noi li usiamo per creare un menu laterale che dolcemente scorre dal lato destro e un falso totalmente stupido vede avremo accesso toccando un pulsante del nostro menu laterale. Ma prima di iniziare con il codice dobbiamo ottenere qualche nuovo strumento.

Pre-requisiti

Il primo strumento che ci serve è la biblioteca animare.css. questa libreria, che probabilmente mosto di voi già sanno e l'uso nei loro progetti, aloows per implementare easlily simpatica animazione per ogni elemento del DOM. Per coloro che ancora non hanno questa libreria installato nelle loro macchine, questo è il Link per scaricare.

Forse abbiamo bisogno martelliamo: Per verificare se siamo in grado di utilizzare solo jquery.touchSwipe plug-in

Il menu laterale

Il primo vista secondaria stiamo andando a costruire è il menu laterale. Apparirà questo menù scorrimento laterale dalla destra quando l'utente tocca l'ultimo pulsante nella navigazione barra in alto. Ad essere onesti, menu laterale è solo parzialmente una vista secondaria, almeno nel senso che uso questo termine. Come ho detto sopra, in un'applicazione abbiamo molti viste secondarie, ma siamo probabilità di avere un solo menu laterale. Anche se abbiamo bisogno di costruire più di un menu laterale, Non andranno ad essere tante quante le altre viste che un'applicazione può implementare per eseguire i propri processi. Dall'altro lato, un menu laterale non è un vista principale perché risiede al di fuori del viste principali’ flusso e non può essere letta come un'altra vista in una sequenza ordinata.

Detto ciò, Iniziamo a vedere come costruiamo il menu laterale nel nostro indice.html file. Questo è il markup:

<div id ="menu laterale">
	<div class ="sidemenu-header">
		<Div><a href ="#" id ="sidemenu-chiudi"><= Classe I"materiali-icons">Annulla</io></un'></Div>
	</Div>
	<ul class ="opzioni">
		<in><a href ="#" class ="view_a">2 Una vista</un'></in>
		<in><a href ="#" class ="view_b">2 vista B</un'></in>
		<in><a href ="#" class ="view_c">2 vista C</un'></in>
		<in><a href ="#" class ="view_d">2 vista D</un'></in>
		<in><a href ="#" class ="view_e">2 vista E</un'></in>
	</il>
</Div>

Abbastanza semplice, non è vero? In primo luogo abbiamo messo in atto un colpo di testa dove abbiamo posto un pulsante per chiudere il menu laterale. Poi usiamo una lista non ordinata n per costruire il menu stesso.

regole CSS per il menu laterale

#menu laterale{
	sfondo: #F F F !importante;
	posizione: assoluto;
        Schermo: nessuna;
	giusto: 0;
	superiore: 0;
	larghezza: 80%;
	altezza: 100%;
	Z-Index: 5;
	-webkit-box-ombra: -2px 0px 0px 6px RGBA(50, 50, 50, 0.75);
	-moz-box-ombra:    -2px 0px 0px 6px RGBA(50, 50, 50, 0.75);
	box-ombra:         -2px 0px 0px 6px RGBA(50, 50, 50, 0.75);
}
.sidemenu-header{
	sfondo: #689F38;
	posizione : parente;
	superiore      : 0;
	sinistra     : 0;
	larghezza    : 100%;
	altezza   : 50Px;
	/*Z-Index  : 4;*/
	bordo-fondo: 6px solido trasparente;
	imbottitura: 6Px;
}
.sidemenu-header .material-icons{
	dimensione del font: 32Px;
}
#quartiere Sidemenu{
	list-style-type: nessuna;
}
#SIDEMENU ul li{
	colore:	#0D6E9C;
}
#sidemenu-chiudi{
	margine-sinistra: 10Px;
	colore: bianca !importante;
}

Dobbiamo anche aggiungere una sovrapposizione al nostro markup al fine di vista underlaying leggermente scurire quando le diapositive di menu in. Aggiungere questa riga immediatamente dopo il <corpo> tag nella tua indice.html:

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

Nel indice.css, aggiungiamo seguente regola:

#copertura{
	posizione: assoluto;
	Schermo: nessuna;
	larghezza: 100%;
	altezza: 100%;
	sinistra: 0;
	superiore: 0;
	sfondo: RGBA(0,0,0,.3);
	Z-Index: 5;
}

Andare a vivere con javascript

Prima di tutto, andiamo annotare i due gestori di eventi abbiamo bisogno di mostrare e nascondere il nostro menu laterale:

$(documento).su('clic', '# Sidemenu-open', funzione (e) {
	e.preventDefault();
	enterMenu();
});
$(documento).su('clic', '# Sidemenu-vicino', funzione (e) {
	e.preventDefault();
	exitMenu();
});	

Niente di speciale qui: abbiamo appena impedire il comportamento predefinito dell'evento e quindi chiamiamo la funzione appropriata. Va bene, Non voglio sprecare il vostro tempo con discussioni inutili e ti mostrerà il codice per il enterMenu() metodo:

funzione enterMenu() {
	$('#Sidemenu')..css({'Schermo': 'bloccare'}).addClass('Animato slideInRight');
	$('#Overlay').dissolvenza();
	setTimeout(funzione () {
		$('#Sidemenu').removeClass('Animato slideInRight');
	}, 1000);
}

Nella prima riga abbiamo impostato di proprietà di visualizzazione per il menu laterale per “bloccare” e poi aggiungiamo 2 classi, “animato” e “slideInRight”. La prima classe appena si attiva l'animazione per il nostro “menu laterale” Div, la seconda quella specifica il tipo di animazione. In questo caso, vogliamo che il vetrino nel menu laterale dal lato destro.

Vi suggerisco di esplorare il file animato.css per scoprire tutti i tipi di animazione supportati.

Poi facciamo la sovrapposizione visibile e la vista sottostante leggermente oscurato.

Dopo di che, noi usiamo setTimeout() funzione per ritardare un po 'il comando successivo che rimuovono le classi “animato” e “slideInRight”: in questo modo il nostro div sarà pulita e pronta per essere animato di nuovo quando dobbiamo provare a chiuderlo con il exitMenu() metodo:

funzione exitMenu() {
	$('#Sidemenu').addClass('Animato slideOutRight');
	$('#Overlay').dissolvenza();
	setTimeout(funzione () {
		$('#Sidemenu').removeClass('Animato slideOutRight')..css({'Schermo': 'nessuna'});
	}, 1000);
}

Vedi? Il exitMenu() funzione ripristinare lo stato div al suo stato originale: prima aggiungere la classe “animato” di nuovo e impostare il tipo di animazione “slideOutRight”, in modo che il menu laterale scivolerà verso destra, come tutti si aspetterebbero che facesse 🙂 allora, nasconde la sovrapposizione. Infine,all'interno della setTimeout() bloccare, la funzione di rimuovere le clasees per l'animazione e impostare la proprietà di visualizzazione del menu laterale per “nessuna”.

Se si esegue l'applicazione ora, si può vedere il menu laterale in azione. Nella prossima parte dell'articolo esamineremo la viste secondarie se stessi e noi li usiamo per dare vita alle voci del menu laterale.

---

Parte 1 – Parte 2 – Parte 3 – Parte 4

---