Share
In questo tutorial ti insegnerò come usare iScroll 4 per creare un semplice sito web mobile. Il sito che creiamo avrà un'intestazione fissa e un piè di pagina fisso con contenuto che può essere facilmente spostato in mezzo. Come vedremo, il raggiungimento di questo effetto su Android e iOS non è così semplice come si potrebbe pensare!
Le app basate sul Web sono ideali per gli sviluppatori front-end per iniziare il loro viaggio nel mondo della creazione di applicazioni mobili. Utilizzando la tua conoscenza esistente di HTML, CSS e Javascript, puoi creare app che sembrano molto vicine a quelle realizzate con un SDK di piattaforma nativo. Ancora meglio, le tue applicazioni saranno compatibili su più piattaforme e funzioneranno su qualsiasi dispositivo mobile con un browser moderno.
Ovviamente, ci sono alcune precauzioni da sviluppare per i browser mobili. Alcuni possono essere ovvi, come l'incapacità di attingere alla fotocamera del dispositivo (almeno per ora). Altri potrebbero non essere così ovvi, come il semplice numero di browser mobili già in uso (la varietà è incredibile).
Sebbene ci siano molti framework (ad esempio jQuery Mobile, SenchaTouch, ecc.) Che possono aiutarti a iniziare con le app web mobili, per ora non utilizzerò nessuno di questi. Invece, mi concentrerò sul puro JavaScript con una libreria utile: iScroll 4.
iScroll risolve un problema nei browser basati su WebKit basati su Android e iOS. Entrambi questi browser non offrono alcun supporto per i contenuti di intestazione e piè di pagina posizionati in modo assoluto con contenuto a scorrimento collocato in modo predefinito. L'intero documento HTML viene fatto scorrere indipendentemente da qualsiasi CSS che potresti avere in atto per ottenere il contrario. Poiché molte applicazioni mobili native sono progettate con una barra di navigazione fissa nella parte superiore dello schermo e una barra degli strumenti o una barra delle schede fissa nella parte inferiore dello schermo, questa mancanza di supporto del contenuto fisso nei browser WebKit è davvero un problema. Non preoccuparti: in questo tutorial, ti mostrerò come ottenere questo layout con iScroll.
Andiamo avanti e configuriamo un layout di base per l'app Web. Questa sarà una pagina piuttosto semplice e in nessun modo un markup di qualità di produzione, ma per questa demo funzionerà bene.
Generalmente avvio la maggior parte delle app Web mobili (mi riferirò a queste come App Webile) con lo stesso modello di base (supponendo che non utilizzi lo standard HTML5 o un altro framework). Gli unici meta tag che utilizzo inizialmente sono per impostare le opzioni di scala nella finestra. Aggiungo anche un po 'di "reset" agli elementi che conosco ne hanno bisogno. Utilizzo molto raramente un ripristino CSS per le app Webile poiché generalmente è eccessivo per un dispositivo mobile e, una volta ottimizzato, meno è di solito più.
Modello di app Web Modello di app Web
Ora possiamo aggiungere alcuni CSS di base per ottenere un bel layout per l'intestazione e il piè di pagina.
body font-family: helvetica; header position: absolute; z-index: 2; top: 0; a sinistra: 0; width: 100%; altezza: 45px; background-color: # deb500; padding: 0; footer position: absolute; z-index: 2; bottom: 0; a sinistra: 0; width: 100%; altezza: 48px; background-color: # c27b00; padding: 0; border-top: 1px solid # 444; header, footer font-size: 20px; text-align: center; color: # f3f3f3; font-weight: bold; text-shadow: 0 -1px 0 rgba (0,0,0,0,5); line-height: 45px;
Ora dovresti avere qualcosa che assomigli a questo. Si noti che abbiamo dato all'intestazione e al piè di pagina uno z-index, questo entrerà in gioco tra un po '.
Ora è il momento di aggiungere il contenuto che vorremmo poter scorrere. Ho usato un elenco semplice, ma il contenuto può essere qualsiasi cosa tu voglia. Dobbiamo assicurarci che tutto ciò che vogliamo scorrere sia racchiuso in un contenitore con un ID, che useremo per collegarci a iScroll. Questo sarà all'interno del DIV con l'ID del wrapper che abbiamo impostato nel passaggio 1.
- Della roba
- Più roba
- Grandi cose
- Piccole cose
- Geek Stuff
- Nerd Stuff
- Fast Stuff
- Slow Stuff
- Roba buona
- Brutta roba
- La tua roba
- La mia roba
- Le loro cose
- La nostra roba
- Super cose
- Uber Stuff
- Roba di roba
- Roba francese
- Roba tedesca
- Roba inglese
- Roba americana
- Cose
E poi diamo alla lista dei bei CSS per renderlo un po 'meno noioso. Inoltre, posizioneremo il wrapper in modo assoluto con un indice z inferiore rispetto all'intestazione e al piè di pagina.
# wrapper position: absolute; z-index: 1; top: 45px; bottom: 48px; a sinistra: 0; width: 100%; sfondo: #aaa; overflow: auto; # scroll-content position: absolute; z-index: 1; width: 100%; padding: 0; ul list-style: none; padding: 0; margin: 0; width: 100%; text-align: left; li padding: 0 10px; altezza: 40px; line-height: 40px; border-bottom: 1px solid #ccc; border-top: 1px solid #fff; background-color: #fafafa; font-size: 14px;
Come puoi vedere, abbiamo dato al wrapper un overflow: auto che, in un browser ci permetterebbe di scorrere il wrapper - ma se controlli il tuo dispositivo?
Non abbiamo la possibilità di scorrere. Questo è il vero problema che è stato risolto da iScroll, quindi cerchiamo di aiutarci.
Nota: Se desideri sbarazzarti della barra degli URL nella parte superiore della tua applicazione (SOLO iOS) puoi aggiungere il seguente TAG META.
Ora, quando / se un utente aggiunge l'applicazione alla schermata iniziale, può avviarlo dal sistema operativo come qualsiasi altra applicazione, e la barra dell'URL non sarà resa.
Un approccio alternativo alla rimozione della barra degli URL è il metodo discusso da Mark Hammonds nel tutorial Applicazioni Web a schermo intero: è un buon metodo che utilizza JavaScript per nascondere automaticamente la barra degli indirizzi. Per ora, userò il metodo META TAG perché è bello e pulito e si sbarazza della barra dei pulsanti inferiore oltre alla barra degli indirizzi.
Vai alla homepage di iScroll e scarica la fonte. iScroll 4 è l'ultima versione di questo scritto e la versione che useremo, quindi assicurati di scaricarla. Decomprimi il download del file e prendi il file iscroll-lite.js. Poiché stiamo utilizzando solo la funzionalità di scorrimento di base, questo è tutto ciò di cui avremo bisogno. Trascina il file nella directory desiderata. Per ora, ho intenzione di rilasciarlo nella radice del progetto.
Per prima cosa, importiamo il file iscroll-lite.js nel nostro progetto. Importa in alto (il
) o in basso (appena prima del ) dell'HTML. La mia preferenza è di importarlo in fondoSuccessivamente, impostiamo una funzione che intacca iScroll e si aggancia al wrapper. Infine, aggiungiamo un listener di eventi al documento per attendere il caricamento del contenuto prima di attivare la funzione per accedere a iScroll.
Se controlli il tuo dispositivo ora, dovresti avere un bel elenco scorrevole con un'intestazione e un piè di pagina fissi.
Ecco il codice scritto completo utilizzato in questo suggerimento.
Modello di app Web Modello di app Web
- Della roba
- Più roba
- Grandi cose
- Piccole cose
- Geek Stuff
- Nerd Stuff
- Fast Stuff
- Slow Stuff
- Roba buona
- Brutta roba
- La tua roba
- La mia roba
- Le loro cose
- La nostra roba
- Super cose
- Uber Stuff
- Roba di roba
- Roba francese
- Roba tedesca
- Roba inglese
- Roba americana
- Cose
Accentsconagua