Maak een mobiele website met jQuery Mobile

Inhoud

• Hoe meerdere pagina's in één HTML-bestand te coderen
• Omschrijving
• Dialoogvensters en overgangen gebruiken
• De overgangen die kunnen worden gebruikt
• Omschrijving
• Hoe knoppen te maken
• Omschrijving
• Hoe u een navigatiebalk maakt
• Hoe de HTML voor een navigatiebalk te coderen:
• Inhoud opmaken met jQuery Mobile
• De standaardstijlen die jQuery Mobile gebruikt
• Omschrijving
• Thema's toepassen op HTML-elementen
• Twee manieren om een ​​thema toe te passen:
• Omschrijving
• Perspectief

Dit is een bewerkt fragment uit hoofdstuk 15 van Murach's HTML5 en CSS3 door Zak Ruvalcaba en Anne Boehm.

jQuery Mobile is een gratis, open-source, platformonafhankelijke JavaScript-bibliotheek die u kunt gebruiken voor het ontwikkelen van mobiele websites. Met deze bibliotheek kunt u pagina's maken die eruitzien en aanvoelen als de pagina's van een native mobiele applicatie.

Hoewel jQuery Mobile momenteel beschikbaar is als bètatestversie, biedt deze versie al alle functies die u nodig heeft om een ​​uitstekende mobiele website te ontwikkelen. Het resultaat is dat u het meteen kunt gebruiken. Je kunt ook verwachten dat deze versie voortdurend wordt verbeterd, dus jQuery Mobile wordt alleen maar beter.

In dit artikel leer je de basistechnieken voor het maken van de pagina's van een mobiele website. Dat omvat het gebruik van dialoogvensters, knoppen en navigatiebalken.

Hoe meerdere pagina's in één HTML-bestand te coderen

In tegenstelling tot de manier waarop u de webpagina's voor een schermwebsite ontwikkelt, kunt u met jQuery Mobile meerdere pagina's in één HTML-bestand maken. Dit wordt geïllustreerd in figuur 15-7. Hier kunt u twee pagina's van een site zien, samen met de HTML voor deze pagina's. Wat verrassend is, is dat beide pagina's zijn gecodeerd in één HTML-bestand.

Voor elke pagina codeert u één div-element met “page” als de waarde van het data-role attribuut. Vervolgens codeert u binnen elk van die div-elementen de div-elementen voor de koptekst, inhoud en voettekst van elke pagina. Later, wanneer het HTML-bestand is geladen, wordt de eerste pagina in de hoofdtekst van het bestand weergegeven.

Om tussen de pagina's in het HTML-bestand te linken, gebruik je tijdelijke aanduidingen zoals weergegeven in figuur 7-11 van hoofdstuk 7. Het a> -element op de eerste pagina in dit voorbeeld gaat bijvoorbeeld naar "#toobin" wanneer de gebruiker op de knop tikt. h2- of img-element dat is gecodeerd als de inhoud van deze link. Dit verwijst naar het div-element met "toobin" als zijn id-attribuut, wat betekent dat het tikken op de link de lezer naar de tweede pagina in het bestand brengt.

Hoewel dit voorbeeld slechts twee pagina's toont, kunt u veel pagina's binnen één HTML-bestand coderen. Onthoud echter dat alle pagina's samen met hun afbeeldingen, JavaScript en CSS-bestanden worden geladen met het enkele HTML-bestand. Als gevolg hiervan wordt de laadtijd buitensporig als u te veel pagina's in één bestand opslaat. Als dat gebeurt, kunt u uw pagina's opsplitsen in meer dan één HTML-bestand.

De HTML voor de twee pagina's in de hoofdtekst van één HTML-bestand:

div data-role = "pagina"> header data-role = "header"> h1> SJV Town Hall / h1> / header> sectie data-role = "content"> h3> The 2011-2012 Speakers / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> 19 oktober 2011 / h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>! - DE ELEMENTEN VOOR DE REST VAN DE LUIDSPREKERS - -> / sectie> footer data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "pagina" id = "toobin"> header data-role = "header"> h1> SJV Town Hall / h1> / header> section data-role = "content"> h3> The Supreme Nine: br> Black Robed Secrets / h3> img src = "images / toobin_court.cnn.webp" alt = "Jeffrey Toobin "> p> Auteur van de veelgeprezen bestseller, i> The Nine:! - DE KOPIE VERVOLGT -> / sectie> footer data-role =" footer "> h4> © 2011 / h4> / footer> / div>

Omschrijving

• Wanneer u jQuery Mobile gebruikt, hoeft u niet voor elke pagina een apart HTML-bestand te ontwikkelen. In plaats daarvan codeert u binnen het body-element van een enkel HTML-bestand één div-element voor elke pagina met het kenmerk data-role ingesteld op "page".
• Voor elk div-element stelt u het id-attribuut in op een tijdelijke aanduiding-waarde die toegankelijk is via de href-attributen in de a> -elementen van andere pagina's.

Dialoogvensters en overgangen gebruiken

Afbeelding 15-8 laat zien hoe u een dialoogvenster maakt dat wordt geopend wanneer op een link wordt getikt. Om dat te doen, codeert u het dialoogvenster op dezelfde manier als elke pagina. Maar in het a> -element dat naar die pagina gaat, codeert u een data-rel-attribuut met "dialoog" als zijn waarde.

Zoals de voorbeelden in deze afbeelding laten zien, maakt het jQuery Mobile CSS-bestand een dialoogvenster anders op dan een normale webpagina. Standaard heeft een dialoogvenster een donkere achtergrond met witte voorgrondtekst en zullen de kop- en voettekst niet de breedte van de pagina beslaan. Een dialoogvenster heeft ook een "X" in de koptekst waarop de gebruiker moet tikken om terug te keren naar de vorige pagina.

Wanneer u een a> -element codeert dat naar een andere pagina of dialoogvenster gaat, kunt u ook het kenmerk data-transitie gebruiken om een ​​van de zes overgangen op te geven die in de tabel in deze afbeelding worden samengevat. Elk van deze overgangen is bedoeld om een ​​effect na te bootsen dat een mobiel apparaat zoals een iPhone gebruikt.

De overgangen die kunnen worden gebruikt

HTML die de pagina opent als een dialoogvenster met de "pop" -overgang:

a href = "# toobin" data-rel = "dialog" data-transition = "pop">

HTML die de pagina opent met de overgang "vervagen":

a href = "# toobin" data-transition = "fade">

Omschrijving

• De HTML voor een dialoog venster wordt gecodeerd zoals elke pagina is gecodeerd. Het a> -element dat naar de pagina linkt, bevat echter het data-rel-attribuut met "dialog" als zijn waarde. Om het dialoogvenster te sluiten, tikt de gebruiker op de X in de koptekst van het vak.
• Om de manier te specificeren waarop een pagina of een dialoogvenster wordt geopend, kunt u het gegevensovergangsattribuut gebruiken met een van de waarden in de bovenstaande tabel. Als een apparaat de door u opgegeven overgang niet ondersteunt, wordt het kenmerk genegeerd.
• De opmaak van een dialoogvenster wordt gedaan door het jQuery Mobile CSS-bestand.

Hoe knoppen te maken

Figuur 15.9 laat zien hoe je knoppen gebruikt om van de ene pagina naar de andere te navigeren. Om dat te doen, zet je gewoon het data-role attribuut voor een a> element op "button", en jQuery Mobile doet de rest.
U kunt echter ook enkele andere attributen voor knoppen instellen. Als u bijvoorbeeld twee of meer knoppen naast elkaar wilt laten verschijnen, zoals de eerste twee knoppen in deze afbeelding, kunt u het data-inline-attribuut instellen op "true".

Als u een van de 18 pictogrammen die door jQuery Mobile worden geleverd aan een knop wilt toevoegen, codeert u ook het kenmerk data-icon. De derde knop in dit voorbeeld gebruikt bijvoorbeeld het pictogram "verwijderen" en de vierde knop gebruikt het pictogram "Home". Al deze pictogrammen zien eruit als de pictogrammen die u zou kunnen zien in een native mobiele applicatie. Deze pictogrammen zijn overigens geen aparte bestanden waartoe de pagina toegang moet hebben. In plaats daarvan worden ze geleverd door de jQuery Mobile-bibliotheek.

Als u twee of meer knoppen horizontaal wilt groeperen, zoals de knoppen Ja, Nee en Misschien in deze afbeelding, kunt u de a> -elementen coderen voor de knoppen binnen een div-element met 'controlgroup' als zijn gegevensrolkenmerk en "Horizontaal" als het gegevenstype-attribuut. Of, om de knoppen verticaal te groeperen, kunt u het gegevenstype-attribuut wijzigen in "verticaal".

Als u het data-rel-attribuut voor een knop instelt op "terug" en het href-attribuut op het hekje (#), keert de knop terug naar de pagina die het heeft aangeroepen. Met andere woorden, de knop werkt als een terugknop. Dit wordt geïllustreerd door de laatste knop in de inhoud van de pagina.

De laatste twee knoppen laten zien hoe knoppen in de voettekst van een pagina verschijnen. Hier zijn de pictogrammen en tekst wit tegen een zwarte achtergrond. In dit geval wordt het class-attribuut voor de voettekst ingesteld op "ui-bar", wat jQuery Mobile vertelt dat het wat meer ruimte rond de inhoud van de voettekst moet plaatsen. Je leert daar meer over in figuur 15-12.

De HTML voor de knoppen in de sectie:

! - Voor inline-knoppen stelt u het datalijnkenmerk in op true -> a href = "#" data-role = "button" data-inline = "true"> Annuleren / a> a href = "#" data -role = "button" data-inline = "true"> OK / a>! - Om een ​​pictogram aan een knop toe te voegen, gebruikt u het kenmerk data-icon -> a href = "#" data-role = "knop "data-icon =" delete "> Delete / a> a href =" # "data-role =" button "data-icon =" home "> Home / a>! - Om knoppen te groeperen, gebruik je een div-element met de attributen die volgen -> div data-role = "controlgroup" data-type = "horizontal"> a href = "#" data-role = "button" data-icon = "check"> Ja / a> a href = "#" data-role = "button" data-icon = "arrow-d"> Nee / a> a href = "#" data-role = "button"> Misschien / a> / div>! - Naar code a Back-knop, zet het data-rel attribuut op back -> a href = "#" data-role = "button" dat-rel = "back" data-icon = "back"> Terug naar vorige pagina / a >

De HTML voor de knoppen in de voettekst:

footer data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> Toevoegen aan Facebook / a> a href = "http: //www.twitter.com "data-role =" button "data-icon =" plus "> Tweet deze pagina / a> / footer>

Omschrijving

• Om een ​​knop aan een webpagina toe te voegen, codeert u een a> -element met het kenmerk data-role ingesteld op "button".

Hoe u een navigatiebalk maakt

Figuur 15-10 laat zien hoe u een navigatiebalk aan een webpagina kunt toevoegen. Om dat te doen, codeert u een div-element waarvan de gegevensrol is ingesteld op "navbar". Binnen dit element codeer je een ul-element dat li-elementen bevat die de a> -elementen bevatten voor de items in de navigatiebalk. Merk echter op dat u het data-role-attribuut voor de a> -elementen niet codeert.

Om de kleur van de items in de navigatiebalk te wijzigen, bevat de code in dit voorbeeld het attribuut data-theme-b voor elk item. Als gevolg hiervan verandert jQuery Mobile de achtergrondkleur van elk item van zwart, wat de standaard is, in een aantrekkelijk blauw. Bovendien stelt deze code het class-attribuut voor de actieve knop in op "ui-btn-active", zodat jQuery Mobile de kleur voor de actieve knop lichter blauw maakt. Dit laat zien hoe u de opmaak kunt wijzigen die door jQuery Mobile wordt gebruikt, en daarover leert u meer.

De HTML voor de navigatiebalk:

header data-role = "header"> h1> SJV Town Hall / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-theme = "b "> Home / a> / li> li> a href =" # speakers "data-icon =" star "data-theme =" b "> Luidsprekers / a> / li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> Neem contact met ons op / a> / li> / ul> / div> / header>

Hoe de HTML voor een navigatiebalk te coderen:

• Codeer een div-element binnen het header-element. Stel vervolgens het kenmerk data-role voor het div-element in op "navbar".
• Codeer binnen het div-element een ul-element dat één li-element voor elke link bevat.
• Codeer binnen elk li-element een a> -element met een href-attribuut dat een tijdelijke aanduiding gebruikt voor de pagina waarnaar de link moet gaan. Stel vervolgens het kenmerk data-icon in op het pictogram van uw keuze.
• Stel voor het actieve item in de navigatiebalk het class-attribuut in op “ui-btn-active”.De kleur van dit item is dan lichter dan de andere items in de navigatiebalk.
• U moet ook het kenmerk data-theme gebruiken om een ​​jQuery Mobile-thema toe te passen op elk item in de navigatiebalk. Anders hebben de knoppen in de balk dezelfde kleur als de rest van de koptekst. Zie figuur 15-12 voor meer informatie over het toepassen van thema's.

Inhoud opmaken met jQuery Mobile

Zoals je al hebt gezien, formatteert jQuery Mobile automatisch de componenten van een webpagina op basis van zijn eigen stylesheet. Nu zul je daar meer over leren, en ook hoe je de standaardstijl aanpast die jQuery Mobile gebruikt.

De standaardstijlen die jQuery Mobile gebruikt

Figuur 15-13 toont de standaardstijlen die jQuery Mobile gebruikt voor algemene HTML-elementen. Voor al zijn stijlen vertrouwt jQuery Mobile op de rendering-engine van de browser, zodat de eigen stijl minimaal is. Dit houdt de laadtijden snel en minimaliseert de overhead die buitensporige CSS op een pagina zou veroorzaken.

Zoals u kunt zien, is de stijl van jQuery Mobile zo effectief dat u de stijl niet hoeft aan te passen door uw eigen CSS-stijlblad op te geven. De afstand tussen de items in de ongeordende lijst en de opmaak van de tabel zijn bijvoorbeeld beide acceptabel zoals ze zijn. Ook is het zwarte type op de grijze achtergrond consistent met de opmaak voor native mobiele applicaties.

Omschrijving

• Standaard past jQuery Mobile automatisch stijlen toe op de HTML-elementen voor een pagina. Deze stijlen zijn niet alleen aantrekkelijk, maar bootsen ook de eigen stijlen van een browser na.
• Standaard past jQuery Mobile een kleine hoeveelheid opvulling toe aan de linker-, rechter-, boven- en onderkant van elke mobiele pagina.
• Links zijn standaard iets groter dan normale tekst. Dit maakt het gemakkelijker voor de gebruiker om op de links te tikken.
• Koppelingen worden standaard onderstreept met blauw als tekstkleur.

Thema's toepassen op HTML-elementen

In sommige gevallen wilt u de standaardstijlen wijzigen die jQuery Mobile gebruikt. Dat heb je al gezien in de navigatiebalk van figuur 15-10. Om de standaardstijlen te wijzigen, kunt u de vijf thema's gebruiken die jQuery Mobile biedt. Deze zijn samengevat in figuur 15-12. Ook hier zijn deze thema's bedoeld om het uiterlijk van een native mobiele applicatie na te bootsen.

Een manier om thema's toe te passen, is door een data-theme-attribuut te coderen met de themaletter als waarde. Dit zag je in de navigatiebalk in figuur 15-10, en je kunt dit zien in de code voor de tweede navigatiebalk in deze figuur. Hier past het data-theme-attribuut thema "e" toe op de koptekst en thema "d" op de items in de navigatiebalk.

De andere manier om thema's toe te passen, is door het class-attribuut voor een element in te stellen op een class-naam die een thema aangeeft. Dit wordt geïllustreerd door het eerste voorbeeld na de tabel. Hier wordt het class-attribuut gebruikt om zowel de klassen "ui-bar" als "ui-bar-b" toe te passen op het div-element. Als resultaat past jQuery Mobile eerst de standaardstijl voor een balk toe op het element en past vervolgens het b-thema toe op die stijl. Op de volgende pagina's ziet u andere voorbeelden van dit type styling.

Houd er rekening mee dat de tabel in deze afbeelding zegt dat u spaarzaam met thema e moet omgaan. Dat komt omdat het een oranje kleur gebruikt die goed werkt om een ​​item te accentueren, maar niet aantrekkelijk is in grote hoeveelheden. Dit wordt geïllustreerd door de tweede koptekst en navigatiebalk in deze afbeelding, die de neiging heeft om schokkend te zijn als je het in kleur ziet.

Over het algemeen is het het beste om bij de standaardstijlen en de eerste drie thema's te blijven, die meestal goed samenwerken. Vervolgens kun je experimenteren met thema's d en e als je denkt dat je iets meer nodig hebt.

De HTML voor de tweede koptekst en navigatiebalk:

header data-role = "header" data-theme = "e"> h1> SJV Town Hall / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home "data-theme =" d "> Home / a> / li> li> a href =" # speakers "data-icon =" star "data-theme =" d "> Luidsprekers / a> / li> li> a href = "# news" id = "news" data-icon = "grid" data-theme = "d"> Nieuws / a> / li> / ul> / div> / header>

De vijf jQuery Mobile-thema's:

Twee manieren om een ​​thema toe te passen:

Door een data-theme-attribuut te gebruiken:

li> a href = "# home" data-icon = "home" data-theme = "b"> Home / a> / li>

Door een class-attribuut te gebruiken dat het thema aangeeft:

div> Bar / div>

Omschrijving

• Door de vijf thema's te gebruiken die bij jQuery Mobile worden geleverd, kunt u de juiste aanpassingen maken aan de standaardstijlen voor de HTML-elementen.
• Hoewel u uw eigen CSS-stylesheet kunt gebruiken met een jQuery Mobile-applicatie, moet u dat zoveel mogelijk vermijden.

Perspectief

Het gebruik van mobiele apparaten is de afgelopen jaren enorm toegenomen. Daarom is het steeds belangrijker geworden om websites te ontwerpen die gemakkelijk te gebruiken zijn vanaf deze apparaten. Hoewel dat meestal betekent dat u een aparte website moet ontwikkelen, kan dit een cruciaal aspect zijn om uw aanwezigheid op internet te behouden.

Gelukkig is het bouwen van een mobiele website veel eenvoudiger geworden met de komst van jQuery Mobile. Mobiele webpagina's zijn niet langer beperkt tot statische pagina's die koppen, alinea's, links en miniatuurafbeeldingen bevatten. Met jQuery Mobile kunnen webontwikkelaars nu websites met veel functies bouwen die eruitzien en aanvoelen als native mobiele applicaties.