Hoe bouw je een Basic jQuery Mobile-pagina voor HTML5 en CSS3 Programming - dummies

Er is een zeer populaire benadering onder HTML5- en CSS3-programmeurs om mobielvriendelijke websites te bouwen met AJAX, en dat is om een ​​add-onbibliotheek te gebruiken voor jQuery jQuery Mobile genoemd. JQuery Mobile is een krachtige combinatie van JavaScript en CSS-code die bovenop de bibliotheek is gebouwd.

De jQuery-bibliotheek werkt door een normale HTML5-pagina te nemen en deze te wijzigen op manieren die een native look and feel emuleren. De code lijkt veel op gewone HTML:

Mobiele demo

JQuery Mobile-demo
jQuery Mobile-website

Dit is een gewone lijst
Gecodeerd om er uit te zien als
een mobiele lijst

van > HTML All-in-one voor Dummies Een paar details maken van deze pagina een mobiel wonder:

Inclusief de mobiele CSS van jQuery.

1. Dit is een speciaal CSS-bestand dat is ontworpen om HTML-elementen om te zetten in hun mobiele tegenhangers. Hoewel u het zelf kunt downloaden, koppelen de meeste ontwikkelaars rechtstreeks aan de jQuery-site.

   Neem de standaard jQuery-bibliotheek op.

2. Veel van de code is gebaseerd op jQuery, dus integreer ook de jQuery-bibliotheek. Nogmaals, u moet jQuery van de hoofdwebsite van jQuery halen.

   Neem de mobiele bibliotheek van jQuery op.

3. Dit is een JavaScript-bibliotheek die de bibliotheek uitbreidt om nieuw mobielspecifiek gedrag toe te voegen.

   Een kenmerk data-role = "page" toevoegen aan de hoofd-div.

4. Maak een hoofd-div in uw pagina en geef het attribuut aan. Dit is een aangepast kenmerk voor gegevensrollen toegevoegd door jQuery mobiel. jQuery kijkt over de gegevensrollen van de verschillende elementen en past stijl- en gedragsveranderingen automatisch op deze elementen toe. Wijs uw hoofd-div de gegevensrolpagina toe. Dit vertelt de browser om de hele div als een pagina te behandelen.

   Geef een gegevensthema op.

5. Je kunt een gegevensthema toepassen op elk element, maar je past bijna altijd een thema toe op de pagina. jQuery Mobile wordt geleverd met een aantal standaardthema's die zijn ingebouwd, genaamd "a" tot en met "e. "Experimenteer om degene te vinden die je leuk vindt, of je kunt je eigen versie bouwen met de speciale mobiele versie van de ThemeRoller.

   Voeg meer divs toe aan je pagina.

6. Voeg nog enkele divs toe binnen je pagina div. Over het algemeen heb je er drie: koptekst, inhoud en voettekst.

   Specificeer de header-div met data-role = "header".

7. Door een van uw header-informatie in een div te plaatsen met een datarol "header", vertel je jQuery om dit element te behandelen als een mobiele header en de juiste stijlen toe te passen. De header bevat meestal een

   -tag.

   Normaal gesproken geeft u de header op die moet worden hersteld met het kenmerk data-position = "fixed". Dit zorgt ervoor dat de koptekst op zijn plaats blijft als de rest van de inhoud wordt gescrold, wat typisch is voor een mobiele applicatie.

   Stel een content-div in.

8. Voeg een div toe met data-role = "content" om het hoofdinhoudsgebied van uw pagina in te stellen. Alle hoofdelementen van uw site moeten in dit segment worden weergegeven.

   Elke koppeling kan naar een knop worden geconverteerd.

9. De standaardconventie in webapps is om koppelingen om te zetten in knoppen met een groter doel dan muisinvoer. Het is eenvoudig om een ​​link naar een knop te converteren door het kenmerk data-role = "button" toe te voegen aan de ankertag.

   Converteer lijsten naar mobiele lijstweergaven.

10. Lijsten hebben ook speciale conventies in de mobiele wereld. U kunt het kenmerk data-role gebruiken om van elke lijst een lijstweergave te maken.

    Bouw een voettekst.

11. Voeg nog een div toe met dataserollen ingesteld op 'footer'. Normaal gesproken wordt de voettekst (zoals de koptekst) gefixeerd met het kenmerk voor de gegevenspositie.