Share
I denne veiledningen vil jeg lære deg hvordan du bruker iScroll 4 til å lage et enkelt mobilt nettsted. Nettstedet vi oppretter, vil ha en fast topptekst og en fast footer med innhold som enkelt kan rulles inn mellom. Som vi ser, er det ikke så enkelt å oppnå denne effekten på både Android og iOS som du kanskje tror!
Webbaserte applikasjoner er et flott sted for utviklere av frontendene til å begynne sin reise i verden med å bygge mobile applikasjoner. Ved å bruke din eksisterende kunnskap om HTML, CSS og Javascript, kan du bygge apper som ser ut og føler seg veldig nær de som er laget med en SDK for en innfødt plattform. Enda bedre, vil programmene dine være kompatible på tvers av plattformen og vil fungere på alle mobile enheter med en moderne nettleser.
Selvfølgelig er det noen ulempene å utvikle for mobile nettlesere. Noen kan være åpenbare, for eksempel manglende evne til å tappe inn i enhetskameraet (i hvert fall for nå). Andre er kanskje ikke så åpenbare, som det rene antallet mobilbrowsere som allerede er i bruk (sorten er oppsiktsvekkende).
Selv om det er mange rammer (for eksempel jQuery Mobile, SenchaTouch, etc.) som kan hjelpe deg med å komme i gang med mobile webapps, for nå skal jeg ikke bruke noen av dem. I stedet skal jeg fokusere på rent JavaScript med et praktisk bibliotek: iScroll 4.
iScroll løser et problem i de mobile nettbaserte nettleserne som finnes på både Android og iOS. Begge disse nettleserne gir ingen støtte for helt posisjonert topptekst og bunntekstinnhold med rullende innhold som er plassert mellomliggende som standard. Hele HTML-dokumentet rulles uansett hvilket CSS du kanskje har på plass for å oppnå ellers. Fordi mange innfødte mobilapplikasjoner er utformet med en fast navigeringslinje øverst på skjermen og en fast verktøylinje eller faneblad nederst på skjermen, er denne mangelen på fast innholdsstøtte i WebKit-nettleserne virkelig et problem. Ikke bekymre deg: i denne opplæringen skal jeg vise deg hvordan du oppnår dette oppsettet med iScroll.
La oss gå videre og sette opp en grunnleggende webapplayout. Dette vil bli en ganske grunnleggende side og på ingen måte markering av produksjonskvalitet, men for denne demoen vil det fungere pent.
Jeg starter vanligvis de fleste mobile nettapps (jeg skal referere til disse som Webile Apps), med samme grunnleggende mal (forutsatt at jeg ikke bruker HTML5-boilerplate eller et annet rammeverk). De eneste metatagger jeg bruker i utgangspunktet, er å angi skalaalternativene i visningsporten. Jeg legger også til en liten "reset" til elementene jeg vet trenger dem. Jeg bruker svært sjelden en CSS-tilbakestilling for Webile Apps, da det vanligvis er overkill for en mobil enhet, og når du kommer inn i optimalisering, er mindre vanligvis mer.
Web App Template Web App Template
Nå kan vi legge til noen grunnleggende CSS for å få en fin layout for topptekst og bunntekst.
kropp font-family: helvetica; header posisjon: absolutt; z-indeks: 2; topp: 0; venstre: 0; bredde: 100%; høyde: 45 px; background-color: # deb500; padding: 0; bunntekst posisjon: absolutt; z-indeks: 2; bottom: 0; venstre: 0; bredde: 100%; høyde: 48px; background-color: # c27b00; padding: 0; border-top: 1px solid # 444; header, footer font-size: 20px; tekst-Justering: center; color: # f3f3f3; font-vekt: bold; tekstskygge: 0 -1px 0 rgba (0,0,0,0,5); linje-høyde: 45 px;
Du burde nå ha noe som ser slik ut. Legg merke til at vi gav topptekst og bunntekst en z-indeks, dette kommer til å spille inn litt.
Nå er det på tide å legge til innholdet som vi ønsker å være rullbar. Jeg har brukt en enkel liste, men innholdet kan være alt du vil. Vi må sørge for at det vi ønsker å rulle er pakket inn i en beholder med ID, som vi vil bruke til å koble til iScroll. Dette vil være inne i DIV med ID av wrapper vi satt opp i trinn 1.
- Noen greier
- Flere ting
- Store ting
- Små ting
- Geek Stuff
- Nerd Stuff
- Raske ting
- Sakte ting
- Bra saker
- Dårlig ting
- Dine ting
- Mine ting
- Deres ting
- Våre ting
- Super ting
- Uber Stuff
- Stuff Stuff
- Franske ting
- Tyske ting
- Engelsk Stuff
- Amerikanske ting
- Ting
Og så la oss gi listen noen fine CSS for å gjøre det ser litt mindre kjedelig ut. Også, vi skal plassere wrappen absolutly med en lavere z-indeks enn topptekst og bunntekst.
#wrapper posisjon: absolutt; z-indeks: 1; top: 45 piksler; bottom: 48px; venstre: 0; bredde: 100%; bakgrunn: #aaa; flow: auto; # rulleinnhold posisjon: absolutt; z-indeks: 1; bredde: 100%; padding: 0; ul listestil: none; padding: 0; margin: 0; bredde: 100%; tekst-Justering: venstre; li polstring: 0 10px; høyde: 40px; linje-høyde: 40px; grensebunn: 1px solid #ccc; border-top: 1px solid #fff; background-color: #fafafa; font-size: 14 piksler;
Som du ser, har vi gitt omslaget et overløp: auto som i en nettleser vil tillate oss å rulle wrapperen - men hvis du sjekker inn enheten din?
Vi har ikke mulighet til å bla. Dette er selve problemet som iScroll ble gjort for å fikse, så la oss få det til å hjelpe oss.
Merk: Hvis du vil bli kvitt nettadresselinjen øverst i søknaden din (bare iOS), kan du legge til følgende META TAG.
Nå, når / hvis en bruker legger til programmet på startskjermbildet, kan de starte det fra operativsystemet som alle andre applikasjoner, og nettadresselinjen blir ikke gjengitt.
En alternativ tilnærming til å fjerne nettadresselinjen er metoden som diskuteres av Mark Hammonds i opplæringen Full Screen Web Apps - det er en god metode som bruker JavaScript for å skjule adresselinjen automatisk. For nå skal jeg bruke META TAG-metoden fordi den er fin og ren og blir kvitt den nederste knappelinjen i tillegg til adresselinjen.
Gå videre til iScrolls hjemmeside og last ned kilden. iScroll 4 er den nyeste versjonen av denne skrivingen og den versjonen vi skal bruke, så sørg for at du laster ned det. Unzip filen nedlastingen og ta tak i filen iscroll-lite.js. Da vi bare bruker grunnleggende rullingsfunksjonalitet, er dette alt vi skal bruke. Slett filen i ønsket katalog. For nå skal jeg slippe det inn i prosjektets rot.
Først importerer vi filen iscroll-lite.js i vårt prosjekt. Importer den på toppen (den
) eller bunnen (like før ) av HTML-koden. Min preferanse er å importere den nederstDeretter setter vi opp en funksjon som integrerer iScroll og kroker inn i wrappen. Til slutt legger vi til en hendelseslytter til dokumentet for å vente på innholdet som skal lastes inn før avfyring av funksjonen vår for å trekke iScroll.
Hvis du sjekker enheten din nå, bør du ha en nydelig, rullbar liste med en fast topptekst og bunntekst.
Her er den fullskrevne koden som brukes i dette tipset.
Web App Template Web App Template
- Noen greier
- Flere ting
- Store ting
- Små ting
- Geek Stuff
- Nerd Stuff
- Raske ting
- Sakte ting
- Bra saker
- Dårlig ting
- Dine ting
- Mine ting
- Deres ting
- Våre ting
- Super ting
- Uber Stuff
- Stuff Stuff
- Franske ting
- Tyske ting
- Engelsk Stuff
- Amerikanske ting
- Ting
Accentsconagua