Share
In deze tutorial zal ik je leren hoe je iScroll 4 kunt gebruiken om een eenvoudige mobiele website te maken. De site die we maken, heeft een vaste koptekst en een vaste voettekst met inhoud die gemakkelijk kan worden doorgeschoven. Zoals we zullen zien, is het bereiken van dit effect op zowel Android als iOS niet zo eenvoudig als u misschien denkt!
Webgebaseerde apps zijn een geweldige plek voor front-end ontwikkelaars om hun reis naar de wereld van het bouwen van mobiele applicaties te beginnen. Met behulp van uw bestaande kennis van HTML, CSS en Javascript, kunt u apps bouwen die er goed uitzien en die heel dicht bij die gemaakt zijn met een native platform-SDK. Nog beter, uw toepassingen zijn platformonafhankelijk en werken op elk mobiel apparaat met een moderne browser.
Natuurlijk zijn er een aantal kanttekeningen bij het ontwikkelen voor mobiele browsers. Sommige liggen voor de hand, zoals het onvermogen om de camera van het apparaat aan te boren (althans voorlopig). Anderen zijn misschien niet zo voor de hand liggend, zoals het grote aantal mobiele browsers dat al in gebruik is (de variëteit is verbijsterend).
Hoewel er tal van frameworks zijn (zoals jQuery Mobile, SenchaTouch, enz.) Die u kunnen helpen bij het opstarten van mobiele web-apps, ga ik er voorlopig geen gebruik van maken. In plaats daarvan ga ik me richten op pure JavaScript met één handige bibliotheek: iScroll 4.
iScroll lost een probleem op in de mobiele op WebKit gebaseerde browsers die te vinden zijn op zowel Android als iOS. Beide browsers bieden geen ondersteuning voor de absoluut gepositioneerde inhoud voor kop- en voetteksten met standaard verschoven tussenliggende inhoud. Het volledige HTML-document wordt gescrolled, ongeacht eventuele CSS die u mogelijk heeft om anders te bereiken. Omdat veel native mobiele applicaties zijn ontworpen met een vaste navigatiebalk aan de bovenkant van het scherm en een vaste werkbalk of tabbalk onderaan het scherm, is dit gebrek aan ondersteuning voor vaste inhoud in de WebKit-browsers echt een groot probleem. Geen zorgen: in deze tutorial laat ik je zien hoe je deze lay-out kunt bereiken met iScroll.
Laten we doorgaan en een eenvoudige webapp-lay-out instellen. Dit zal een vrij eenvoudige pagina zijn en op geen enkele manier productiekwaliteit markup, maar voor deze demo zal het mooi werken.
Ik start over het algemeen de meeste mobiele web-apps (ik verwijs ernaar als Webile-apps), met dezelfde basissjabloon (ervan uitgaande dat ik geen HTML5-boilerplate of een ander framework gebruik). De enige metatags die ik in eerste instantie gebruik, zijn om de schaalopties in het kijkvenster in te stellen. Ik voeg ook een beetje 'reset' toe aan de elementen waarvan ik weet dat ze deze nodig hebben. Ik gebruik zelden een CSS-reset voor Webile Apps omdat het over het algemeen te veel is voor een mobiel apparaat en als je eenmaal bent geoptimaliseerd, is minder meestal meer.
Web App-sjabloon Web App-sjabloon
Nu kunnen we wat standaard CSS toevoegen om een mooie lay-out voor de kop- en voettekst te krijgen.
lichaam font-family: helvetica; header position: absolute; z-index: 2; top: 0; left: 0; Breedte: 100%; hoogte: 45 pixels; background-color: # deb500; padding: 0; voettekst positie: absoluut; z-index: 2; bottom: 0; left: 0; Breedte: 100%; hoogte: 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: 45 pixels;
Je zou nu iets moeten hebben dat er zo uitziet. Merk op dat we de kop- en voettekst een z-index gaven, dit zal een beetje in het spel komen.
Nu is het tijd om de inhoud toe te voegen waar we graag doorheen scrollen. Ik heb een eenvoudige lijst gebruikt, maar de inhoud kan alles zijn wat je wilt. We moeten ervoor zorgen dat alles wat we willen scrollen is ingepakt in een container met een ID, die we gebruiken om in iScroll te haken. Dit bevindt zich in de DIV met de ID van de wrapper die we in stap 1 hebben ingesteld.
- Wat spullen
- Meer spullen
- Grote spullen
- Klein spul
- Geek Stuff
- Nerd Stuff
- Snelle dingen
- Slow Stuff
- Goed spul
- Slecht spul
- Jouw spullen
- Mijn spullen
- Hun spullen
- Onze spullen
- Super spul
- Uber-dingen
- Spul
- Frans spul
- Duits spul
- Engels spul
- Amerikaans spul
- spul
En laten we de lijst dan een paar leuke CSS geven om het er iets minder saai uit te laten zien. Ook gaan we de wrapper absoluut positioneren met een lagere z-index dan de header en de footer.
#wrapper positie: absoluut; z-index: 1; top: 45px; bottom: 48px; left: 0; Breedte: 100%; achtergrond: #aaa; overflow: auto; # scroll-inhoud positie: absoluut; z-index: 1; Breedte: 100%; padding: 0; ul lijststijl: geen; padding: 0; margin: 0; Breedte: 100%; text-align: left; li opvulling: 0 10px; hoogte: 40px; line-height: 40px; border-bottom: 1px solid #ccc; border-top: 1px solid #fff; background-color: #fafafa; font-size: 14px;
Zoals u kunt zien, hebben we de wrapper een overflow gegeven: auto die in een browser ons in staat zou stellen om de wrapper te scrollen - maar als u uw apparaat incheckt?
We hebben geen mogelijkheid om te scrollen. Dit is precies het probleem dat iScroll moest oplossen, dus laten we het krijgen om ons te helpen.
Notitie: Als u de URL-balk boven aan uw toepassing wilt verwijderen (ALLEEN iOS), kunt u de volgende META-TAG toevoegen.
Nu, wanneer / als een gebruiker de applicatie toevoegt aan hun startscherm, kunnen ze het vanuit het besturingssysteem starten zoals elke andere toepassing, en de URL-balk zal niet worden weergegeven.
Een alternatieve benadering voor het verwijderen van de URL-balk is de methode die wordt besproken door Mark Hammonds in de zelfstudie Web-apps op volledig scherm - het is een goede methode die JavaScript gebruikt om de adresbalk automatisch te verbergen. Voor nu ga ik de META TAG-methode gebruiken omdat deze mooi en schoon is en de onderste knoppenbalk naast de adresbalk verwijdert.
Ga naar de iScroll-startpagina en download de bron. iScroll 4 is de nieuwste versie van dit schrijven en de versie die we gaan gebruiken, dus zorg ervoor dat je die download. Pak de bestandsdownload uit en pak het bestand iscroll-lite.js. Omdat we alleen de basisschuiffunctionaliteit gebruiken, is dit alles wat we nodig hebben. Zet het bestand in de gewenste map. Voor nu, laat ik het in de root van het project vallen.
Eerst importeren we het bestand iscroll-lite.js in ons project. Importeer het bovenaan (de
) of de bodem (vlak voor de ) van de HTML. Mijn voorkeur gaat er naar om het onderaan in te voerenVervolgens stellen we een functie in die iScroll intreedt en in de wrapper haakt. Ten slotte voegen we een gebeurtenislistener toe aan het document om te wachten tot de inhoud is geladen voordat onze functie wordt afgebroken om iScroll in te trekken.
Als je nu je apparaat controleert, zou je een mooie schuifbare lijst moeten hebben met een vaste kop- en voettekst.
Hier is de volledige geschreven code die in deze tip wordt gebruikt.
Web App-sjabloon Web App-sjabloon
- Wat spullen
- Meer spullen
- Grote spullen
- Klein spul
- Geek Stuff
- Nerd Stuff
- Snelle dingen
- Slow Stuff
- Goed spul
- Slecht spul
- Jouw spullen
- Mijn spullen
- Hun spullen
- Onze spullen
- Super spul
- Uber-dingen
- Spul
- Frans spul
- Duits spul
- Engels spul
- Amerikaans spul
- spul
Accentsconagua