Mobile App Design / Dev Building Navigation con jQuery

Gli smartphone sono ora dotati di alcuni browser Web molto efficienti. JavaScript è più potente che mai e può essere esteso con l'aiuto di librerie di codici come jQuery. Quando aggiungi le ultime specifiche HTML5 / CSS3, è possibile creare applicazioni web mobili molto scattanti con un codice di frontend di base.

In questo tutorial mostrerò come è possibile creare un sito web / un'applicazione web mobile. Utilizzeremo le query multimediali CSS3 per il targeting di dispositivi specifici e risoluzioni dello schermo. Inoltre un po 'di jQuery aiuta ad animare il menu e caricare il contenuto della pagina esterna usando le chiamate Ajax. Ancora meglio, il layout può persino espandersi per essere visualizzato correttamente nei normali browser desktop come Chrome o Firefox.

Dimostrazione dal vivo
Codice sorgente

Definire la struttura della pagina

Iniziamo andando prima sulla pagina HTML e formattandola usando alcune regole CSS. Salterò la maggior parte dei meta tag insoliti nell'intestazione poiché non influiscono direttamente sull'app Web. Tuttavia ce ne sono alcuni che dovrei menzionare, vale a dire dal frammento di seguito:

X-UA-Compatible è usato per descrivere come il tuo documento dovrebbe essere visualizzato in determinati browser. È uno scenario interessante quando si codifica in HTML5, quindi non mi preoccuperei troppo di questo. Comunque il meta viewport il tag è molto importante. Imposta la finestra del browser mobile al 100% anziché all'effetto zoom standard.

È anche possibile disabilitare lo zoom dell'utente con il valore del contenuto user-scalable = no. Ma in questo caso vogliamo solo impostare la larghezza dello schermo intero come la larghezza del nostro dispositivo. I tag delle app Web Apple consentiranno il salvataggio del sito Web come icona della schermata iniziale sul tuo iPhone o iPod Touch. Non del tutto necessario, ma sicuramente vale la pena avere.

Contenuto del corpo interno

All'interno del tag body ho impostato un div wrapper con l'ID #w. Dentro ho rotto il layout in altre due div usando ID #pagebody e #navmenu. L'intera larghezza della pagina è limitata a 640 px per scelta, in modo che il layout si riduca a un numero rigoroso.

   HK Mobile
 
  Benvenuti nel sito mobile!
 
 
   Collegamenti del menu
 
  Casa
 Riguardo a noi
 pubblicizzare
 Scrivi per noi
 Contatti
 politica sulla riservatezza

Il menu di navigazione ha un valore z-index più basso in modo che #pagebody è sempre in cima. Questo è fondamentale poiché il codice JavaScript scorrerà sul corpo della pagina un certo numero di pixel per rivelare la navigazione sottostante.

Ho usato un simbolo di cancelletto (#) davanti a ciascuna pagina .html per interrompere alcuni comportamenti scorretti in Safari Mobile. Ogni volta che fai clic su un collegamento, viene visualizzata la barra degli URL che sposta il contenuto verso il basso. Ma quando si fa riferimento a un ID, non viene ricaricato nulla se non attraverso le chiamate JavaScript.

Posizionamento CSS

Non c'è un sacco di contenuti confusi all'interno del nostro codice CSS. La maggior parte del posizionamento viene eseguita manualmente e quindi manipolata tramite jQuery. Ma ci sono alcuni pezzi interessanti nel nostro documento.

/ ** @group core body ** / #w #pagebody position: relativo; a sinistra: 0; larghezza massima: 640 px; larghezza minima: 320 px; z-index: 99999;  #w #navmenu background: # 475566; altezza: 100%; blocco di visualizzazione; posizione: fissa; larghezza: 300 px; a sinistra: 0px; inizio: 0px; z-index: 0;

Questo segmento superiore definisce gli stili per entrambe le sezioni della pagina. Il nostro menu di navigazione è largo solo 300 px, quindi questo lascia un po 'di spazio per il contenuto della pagina ancora visibile. Il pulsante di menu apri / chiudi si trova anche direttamente sul lato sinistro e sempre accessibile. Il pezzo importante qui è il valore della proprietà z-index e l'utilizzo posizione: fissa; sul nostro navmenu.

L'intestazione della barra degli strumenti in alto è anche una sezione interessante. Questo è impostato su una posizione fissa in modo che scorrerà con il contenuto della pagina. Questo replica un effetto simile a quello che potresti trovare in qualsiasi barra del titolo dell'app iOS.

/ ** @group header ** / #w #pagebody header # toolbarnav display: block; posizione: fissa; a sinistra: 0px; inizio: 0px; z-index: 9999; background: # 0b1851 url ('img / tabbar-solid-bg.png') in alto a sinistra nessuna ripetizione; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; altezza: 44px; larghezza: 100%; larghezza massima: 640 px;  #w #pagebody header # toolbarnav h1 text-align: center; padding-top: 10px; padding-right: 40px; colore: # e6e8f2; font-weight: bold; font-size: 2.1em; text-shadow: 1px 1px 0px # 313131;

Regole mobili

È facile notare che sto anche usando un'immagine di sfondo per la texture della barra dell'intestazione blu. Questo è dimensionato a 640 × 44 pixel per mantenere la struttura del layout coerente. Ma ho anche sviluppato un'immagine @ 2x per display retina iPhone / iPad. Puoi vedere entrambe le immagini qui sotto o prenderle dal mio codice sorgente demo.

System/demo/img/[email protected]
System/demo/img/[email protected]

Ho configurato il CSS mobile per questa funzionalità in un altro file chiamato responsive.css. Contiene due media query che sostituiscono la barra del titolo bg e l'icona del pulsante menu per i dispositivi retina.

/ ** retina display ** / @media solo schermo e (-webkit-min-device-pixel-ratio: 2), solo schermo e (min-moz-device-pixel-ratio: 1.5), solo schermo e ( min-device-pixel-ratio: 1.5) #w #pagebody header background: # 0b1851 url ('img/[email protected] ') in alto a sinistra nessuna ripetizione; dimensione di sfondo: 640px 44px;  #w #pagebody header # menu-btn background: url ('img/[email protected] ') no-repeat; dimensione di sfondo: 53px 30px;

Progettare le frecce del menu

Nell'area di navigazione ho anche inserito una piccola icona a forma di freccia sul lato destro di ciascun link di menu. Questo può essere facilmente sostituito con un'immagine da qualsiasi opera d'arte creativa comune. Ma soprattutto tutti gli appassionati di CSS3 adoreranno sperimentare questo metodo.

#w #navmenu ul li a :: after content: "; display: block; width: 6px; height: 6px; border-right: 3px solid # d0d0d8; border-top: 3px solid # d0d0d8; position: absolute; right : 30px; top: 45%; -webkit-transform: rotazione (45deg); -moz-transform: rotazione (45deg); -o-transform: rotazione (45deg); transform: rotazione (45deg); #w #navmenu ul li a: hover :: after border-color: # cad0e6;

Stiamo usando il trasformare proprietà per creare un piccolo bordo dopo il contenuto. Ho anche impostato posizione: assoluta; in modo che possiamo spostare liberamente questi bordi attorno all'elemento del link interno. È molto facile cambiare il colore del bordo su uno stato di passaggio del mouse, che offre una sensazione più dinamica. È piuttosto incredibile quello che puoi ottenere solo usando le regole base HTML5 e CSS3.

Ma ora passiamo ai bit e ai pezzi del codice JavaScript. Ricorda che questo richiede l'inclusione nella libreria jQuery affinché il mio codice funzioni correttamente.

jQuery animato

Nello scrivere questi codici personalizzati ho creato un nuovo documento chiamato script.js. Sentiti libero di scriverli direttamente in > tag, o scarica il mio esempio dal codice sorgente demo.

 $ (document) .ready (function () var pagebody = $ ("# pagebody"); var themenu = $ ("# navmenu"); var topbar = $ ("# toolbarnav"); var content = $ (" #content "); var viewport = width: $ (window) .width (), height: $ (window) .height (); // recupera le variabili come // viewport.width / viewport.height 
 Per iniziare ho impostato alcune variabili di pagina in cui è possibile consultare gli elementi nel documento molto più rapidamente. Il valore del viewport non viene mai utilizzato, ma può essere utile se desideri regolare le fasi dell'animazione. Ad esempio, puoi controllare la larghezza corrente del browser e aprire il tuo menu più piccolo o più largo di conseguenza.
 function openme () $ (function () topbar.animate (left: "290px", duration: 300, queue: false); pagebody.animate (left: "290px", durata: 300 , queue: false););  function closeme () var closeme = $ (function () topbar.animate (left: "0px", duration: 180, queue: false); pagebody.animate (left: "0px", duration: 180, queue: false);); 
 Successivamente ho definito due funzioni importanti per l'apertura e la chiusura del menu. Questi potrebbero essere stati fatti in una singola funzione e attivare la richiamata - eccetto che in realtà abbiamo bisogno di animare due elementi distinti allo stesso tempo. Sfortunatamente questo non è il comportamento predefinito di jQuery, quindi è necessario ricorrere a una sintassi alternativa.
 I due elementi a cui stiamo mirando sono nominati topbar e pagebody. L'area del contenuto interno con uno sfondo bianco è il corpo della pagina completo; tuttavia abbiamo la posizione della barra del titolo fissata in cima alla pagina. Ciò significa che non si animerà in modo naturale con la pagina e dobbiamo utilizzare una chiamata separata. L'apertura è impostata per spingere a sinistra di 290px (quasi la larghezza di 300px di nav intero) e la funzione di chiusura lo ritrae.
 Caricamento di contenuti dinamici
 Il codice sopra è abbastanza facile da prendersi cura dell'animazione. E teoricamente questo è tutto ciò che serve per un sito web mobile così semplice - ma voglio aggiungere ancora un po 'di più.
 Ogni volta che l'utente fa clic su un collegamento di menu, vogliamo chiudere la navigazione corrente e visualizzare una gif di caricamento mentre cerchiamo il contenuto della pagina. Quindi, una volta completato, rimuoviamo l'immagine gif e la cariciamo all'interno. Questo è fantastico perché possiamo persino usare pagine HTML statiche per il contenuto. Nessun PHP o Ruby o Perl o qualsiasi linguaggio di backend per rendere le cose disordinate.
 Gestione dei clic
 Per prima cosa vogliamo testare quando i nostri utenti fanno clic sui pulsanti di navigazione. Questo fermerà il normale valore href dal caricamento e possiamo invece utilizzare le nostre funzioni per visualizzare il contenuto esterno.
 // caricamento del contenuto della pagina per la navigazione $ ("a.navlink"). live ("clic", funzione (e) e.preventDefault (); var linkurl = $ (this) .attr ("href"); var linkhtmlurl = linkurl.substring (1, linkurl.length); var imgloader = ''; 
 Ora stiamo aprendo un selettore per qualsiasi ancora con la classe navlink. Ogni volta che un utente fa clic su uno di questi link, impediamo il caricamento e l'impostazione di una variabile per l'intero URL. Ho anche impostato una variabile per il contenuto HTML per includere un caricatore di immagini standard. Se si desidera personalizzare il proprio, consiglio vivamente Ajaxload.
 Ajax .load ()
 Ci sono due pezzi diversi in questo senso che ho accuratamente rotto. Il codice sotto è il nostro primo bit che chiude il menu di navigazione e scorre la finestra del documento totale fino in cima. Vogliamo sostituire il contenuto del corpo interno con una piccola animazione del caricatore e gli utenti non possono vederlo se guardassero in fondo alla pagina.
 closeme (); $ (function () topbar.css ("top", "0px"); window.scrollTo (0, 1););
 Ora finalmente vogliamo sostituire il contenuto del corpo interno con la nostra immagine e recuperare la pagina esterna da caricare. Normalmente questo richiederà solo un paio di millisecondi o anche più velocemente, quindi ho impostato una funzione di timeout.
 content.html (imgloader); setTimeout (function () content.load (linkhtmlurl, function () / * no callback * /), 1200);
 Questo si fermerà 1200 millisecondi prima di caricare il nuovo contenuto. Per la mia demo sembra molto meglio e ti dà un'idea di come si comporterebbe l'applicazione su connessioni Internet lente.
 
 Conclusione
 Invito tutti gli sviluppatori Web a scaricare il codice sorgente del tutorial ea giocare da soli. Questo è un esempio di base di ciò che può essere realizzato con HTML / CSS3 e un tocco di effetti JavaScript. Costruire per gli schermi mobili è più facile che mai con le query multimediali e i browser web più estensibili.
 Vedi se puoi applicare uno qualsiasi di questo codice nei tuoi progetti web futuri. Costruire applicazioni mobili è un'arte, molto simile al web design, e richiede molta dedizione e pratica. Spero che questo tutorial possa essere un buon punto di partenza per pochi sviluppatori entusiasti. Se hai domande o pensieri sul codice sentiti libero di condividere con noi nell'area di discussione post.