Share
În acest tutorial vă voi învăța cum să utilizați iScroll 4 pentru a crea un simplu site web mobil. Site-ul pe care îl creăm va avea un antet fix și un subsol fix cu conținut care poate fi ușor derulat între ele. După cum vom vedea, atingerea acestui efect atât pe Android, cât și pe iOS nu este la fel de ușor cum credeți!
Aplicațiile pe bază de aplicație web sunt un loc minunat pentru dezvoltatorii din front-end pentru a-și începe călătoria în lumea dezvoltării aplicațiilor mobile. Folosind cunoștințele dvs. existente despre HTML, CSS și Javascript, puteți crea aplicații care arată și se simt foarte apropiate de cele realizate cu un SDK nativ de platformă. Chiar mai bine, aplicațiile dvs. vor fi compatibile pe mai multe platforme și vor funcționa pe orice dispozitiv mobil cu un browser modern.
Desigur, există câteva avertismente în curs de dezvoltare pentru browserele mobile. Unele pot fi evidente, cum ar fi incapacitatea de a accesa camera aparatului (cel puțin pentru moment). Altele ar putea să nu fie la fel de evidente, precum numărul mare de browsere mobile care sunt deja în uz (soiul este bogat în minte).
Deși există o mulțime de cadre (de exemplu, jQuery Mobile, SenchaTouch, etc.) care vă pot ajuta să începeți cu aplicațiile web mobile, pentru moment nu voi folosi niciuna dintre ele. În schimb, mă voi concentra pe JavaScript pur cu o bibliotecă la îndemână: iScroll 4.
iScroll rezolvă o problemă în browserele bazate pe WebKit mobile găsite atât pe Android, cât și pe iOS. Ambele browsere nu oferă suport pentru conținutul de antet și subsol absolut poziționat, în care conținutul de defilare este plasat în mod implicit. Întregul document HTML este derulat indiferent de CSS pe care ați putea să îl aveți în loc pentru a obține altfel. Deoarece multe aplicații mobile native sunt proiectate cu o bara de navigare fixă în partea superioară a ecranului și o bara de instrumente fixă sau o bara de bare în partea de jos a ecranului, această lipsă de suport pentru conținut fix în browserele WebKit este într-adevăr o problemă. Nu vă faceți griji: în acest tutorial, vă voi arăta cum să obțineți acest aspect cu iScroll.
Să mergem mai departe și să configuram un aspect de bază pentru aplicația web. Aceasta va fi o pagină destul de de bază și în nici un caz marca de calitate a producției, dar pentru acest demo va funcționa bine.
În general, încep cele mai multe aplicații web mobile (mă voi referi la acestea ca aplicații Webile), cu același șablon de bază (presupunând că nu utilizez un fișier HTML5 sau un alt cadru). Singurele metaetichete pe care le folosesc inițial sunt setarea opțiunilor de scalare în fereastra de vizualizare. Adăug, de asemenea, un mic "reset" la elementele pe care le cunosc. Foarte rar folosesc resetarea CSS pentru aplicațiile Webile, deoarece în general este prea mult pentru un dispozitiv mobil și, odată ce ajungi la optimizare, mai puțin este de obicei mai mult.
Șablonul aplicației web Șablonul aplicației web
Acum putem adăuga câteva CSS de bază pentru a obține un aspect frumos pentru antet și subsol.
corp font-family: helvetica; antet poziție: absolut; z-index: 2; top: 0; stânga: 0; lățime: 100%; înălțime: 45px; background-color: # deb500; padding: 0; footer poziție: absolut; z-index: 2; bottom: 0; stânga: 0; lățime: 100%; înălțime: 48px; background-color: # c27b00; padding: 0; frontieră-sus: 1px solid # 444; antet, subsol font-size: 20px; text-align: center; Culoare: # f3f3f3; font-weight: bold; text-shadow: 0 -1px 0 rgba (0,0,0,0,5); line-height: 45px;
Ar trebui să aveți acum ceva care arată astfel. Rețineți că am dat antetul și subsolul un z-index, acesta va intra în joc într-un pic.
Acum este momentul să adăugăm conținutul pe care dorim să îl derulam. Am folosit o listă simplă, dar conținutul poate fi orice vrei. Trebuie să ne asigurăm că ceea ce vrem să defilați este înfășurat într-un container cu un cod de identificare, pe care îl vom folosi pentru a vă conecta la iScroll. Acesta va fi în interiorul DIV cu ID-ul pachetului pe care l-am creat în Pasul 1.
- Niste chestii
- Mai multe lucruri
- Lucruri mari
- Lucruri mici
- Geek Stuff
- Nerd Stuff
- Lucruri rapide
- Lucru lent
- Lucruri bune
- Lucruri rele
- Lucrurile tale
- Lucrurile mele
- Lucrurile lor
- Lucrurile noastre
- Super lucruri
- Uber Stuff
- Stuff Stuff
- Stuff francez
- Lucruri germane
- Engleză Stuff
- Stuff american
- Chestie
Și apoi să oferim lista de CSS frumos pentru a face să pară un pic mai plictisitor. De asemenea, vom plasa ambalajul absolut cu un index z mai mic decât antetul și subsolul.
#wrapper position: absolute; z-index: 1; top: 45px; bottom: 48px; stânga: 0; lățime: 100%; fundal: #aaa; overflow: auto; # scroll-content poziție: absolută; z-index: 1; lățime: 100%; padding: 0; ul list-style: nici unul; padding: 0; margin: 0; lățime: 100%; text-align: left; li padding: 0 10px; înălțime: 40px; line-height: 40px; frontieră-fund: 1px solid #ccc; frontieră: 1px solid #fff; culoare de fundal: #fafafa; font-size: 14px;
Așa cum puteți vedea, am dat un înveliș un overflow: auto care, într-un browser ne-ar permite să derulam wrap-ul - dar dacă verificați dispozitivul?
Nu avem opțiunea de defilare. Aceasta este însăși problema pe care iScroll a fost făcută să o repare, deci să o luăm pentru a ne ajuta.
Notă: Dacă doriți să scăpați de bara de adrese URL din partea de sus a aplicației dvs. (iOS NUMAI), puteți adăuga următoarele META TAG.
Acum, când / dacă un utilizator adaugă aplicația la ecranul inițial, îl poate lansa din sistemul de operare ca orice altă aplicație și bara de adrese URL nu va fi redată.
O abordare alternativă pentru înlăturarea barei URL este metoda discutată de Mark Hammonds în tutorialul Full Screen Web Apps - este o metodă bună care utilizează JavaScript pentru a ascunde automat bara de adrese. Pentru moment, voi folosi metoda META TAG pentru că este frumos și curat și scapă de bara de butoane inferioară în plus față de bara de adrese.
Continuați pe pagina de pornire iScroll și descărcați sursa. iScroll 4 este cea mai recentă versiune a acestei scrieri și a versiunii pe care o vom folosi, deci asigurați-vă că descărcați. Dezarhivați descărcarea fișierului și apucați fișierul iscroll-lite.js. Pe măsură ce folosim doar funcționalitatea de derulare de bază, acesta este tot ce vom avea nevoie. Aruncați fișierul în directorul dorit. Pentru moment, o să o dau în rădăcina proiectului.
Mai întâi, importăm fișierul iscroll-lite.js în proiectul nostru. Importați-o în partea de sus (
) sau în partea de jos (chiar înainte de ) din HTML. Preferința mea este să o import în partea de josApoi, am creat o funcție care inițiază iScroll și cârlige în ambalaj. În cele din urmă, adăugăm un document de ascultare a unui eveniment care să aștepte încărcarea conținutului înainte de a ne retrage funcția de a trage iScroll.
Dacă verificați acum dispozitivul dvs., ar trebui să aveți o listă minunată care să poată fi derulată cu un antet și un subsol fix.
Iată codul complet scris folosit în acest sfat.
Șablonul aplicației web Șablonul aplicației web
- Niste chestii
- Mai multe lucruri
- Lucruri mari
- Lucruri mici
- Geek Stuff
- Nerd Stuff
- Lucruri rapide
- Lucru lent
- Lucruri bune
- Lucruri rele
- Lucrurile tale
- Lucrurile mele
- Lucrurile lor
- Lucrurile noastre
- Super lucruri
- Uber Stuff
- Stuff Stuff
- Stuff francez
- Lucruri germane
- Engleză Stuff
- Stuff american
- Chestie
Accentsconagua