Foto di Ruthie su Unsplash

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, viste che risiedono al di fuori del flusso delle viste principali e a cui è possibile accedere di solito toccando i pulsanti che attivano un'azione: pulsanti come "Vedi i dettagli", "Acquistare", "Condividere" e così via. In questa terza parte dell'articolo vedremo in dettaglio come implementarli e utilizzarli viste secondarie: li useremo per creare un menu laterale che scorre delicatamente dal lato destro e una vista falsa totalmente stupida a cui accederemo 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 animate.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 installata nelle proprie 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 andremo 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 è probabile che avremo solo un menu laterale. Anche se abbiamo bisogno di costruire più di un menu laterale, non saranno tante quante le altre viste che un'applicazione può implementare per eseguire i suoi processi. Dall'altro lato, un menu laterale non è un vista principale perché risiede al di fuori del flusso delle viste principali e non è possibile accedervi come un'altra vista in una sequenza ordinata.

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

<div id ="sidemenu">
	<div class ="sidemenu-header">
		<div><a href ="#" id ="sidemenu-close"><= 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 view 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

#sidemenu{
	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;*/
	border-bottom: 6px solido trasparente;
	padding-top: 6px;
}
.sidemenu-header .material-icons{
	dimensione del font: 32px;
}
#quartiere Sidemenu{
	list-style-type: nessuna;
}
#SIDEMENU ul li{
	colore:	#0D6E9C;
}
#sidemenu-close{
	margin-left: 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 index.html:

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

Nel index.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, scriviamo i due gestori di eventi di cui abbiamo bisogno per 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 ti farò perdere tempo con discussioni inutili e ti mostrerò il codice per il enterMenu() metodo:

funzione enterMenu() {
	$('#Sidemenu').css({'Schermo': 'bloccare'}).addClass('Animato slideInRight');
	$('#Overlay').fadeIn();
	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 "sidemenu" 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 animated.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à pulito e pronto per essere nuovamente animato quando vorremo chiuderlo usando 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, as everyone would expect it do 🙂 Then, 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, potrai vedere il menu laterale in azione. Nella prossima parte dell'articolo esamineremo il viste secondarie da soli e li useremo per dare vita alle voci del menu laterale.


Parte 1 - Parte 2 - Parte 3 - Parte 4


5 commenti su “Anatomia di un sistema di navigazione di applicazione Cordova (parte III): il menu laterale”

  1. Ciao,

    Finita la seconda parte. Tutto funzionante. È la prima volta che uso Bootstrap e touchSwipe, e sono molto impressionato dalla fluidità dell'interfaccia utente.

    devo chiarire una cosa: Avevo aggiunto un commento alla Parte II, e si è perso nella traduzione (Penso che scrivere singoli tag Html nel commento abbia causato la formattazione strana della pagina Web nei commenti). L'ultima riga del mio commento era spiegare che il selettore per il menu di navigazione doveva avere “un'” aggiunto ad esso come “indice-dati” l'attributo è sull'ancora all'interno dell'elemento dell'elenco e non l'elemento dell'elenco stesso.

    Ora sono passato alla Parte III ma ho colpito un blocco. Penso che forse ci sia un passaggio mancante in quanto non riesco a vedere come il menu laterale è collegato allo script poiché sembra che manchi un "id"…

    Il codice per il quarto “menù” pulsante legge:

    menù

    Com'è il codice? (sotto) dovrebbe attivare il menu laterale?

    $(documento).su('clic', ‘#sidemenu-apri’, funzione (e) {
    e.preventDefault();
    enterMenu();
    });

    Non c'è id=”sidemenu-open” definito ovunque. C'è un passaggio mancante nel tutorial che mi mostra dove aggiungerlo?? Non voglio iniziare a codificare una correzione in quanto rovinerà il resto del tutorial in futuro.

    Potresti per favore farmi sapere se c'è un passaggio mancante o se ho completamente frainteso questa sezione e sono stato leggermente stupido?

    Grazie molto,

    Paolo

    1. Va bene, Paolo, Mi scuso per il mio errore. Nella parte 2 è descritta la barra di navigazione in alto e l'ultima voce di menu è quella che dovrebbe aprire il menu: questo articolo dovrebbe avere l'id “sidemenu-open”. I am the stupid 🙂 I have corrected the code snippet in the part 2. Ancora una volta mi dispiace…

  2. L'ha fatto di nuovo. Non gli piace il codice html nei commenti. Dove viene visualizzato “menù” come link nel mio commento precedente avevo infatti incollato nel quarto UL LI nella riga nav-menu, quello per il “menù” icona dei materiali.

  3. grande! Sono contento che sia stata la soluzione perché avevo anche aggiunto id=”sidemenu-open” nell'ancora in modo da poter continuare con la parte successiva.
    Paolo.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.