Opret en mobilwebsite med jQuery Mobile

Indhold

• Sådan kodes flere sider i en enkelt HTML-fil
• Beskrivelse
• Sådan bruges dialogbokse og overgange
• De overgange, der kan bruges
• Beskrivelse
• Sådan oprettes knapper
• Beskrivelse
• Sådan oprettes en navigationslinje
• Sådan kode HTML for en navigationslinje:
• Sådan formateres indhold med jQuery Mobile
• Standardformaterne, som jQuery Mobile bruger
• Beskrivelse
• Sådan anvendes temaer til HTML-elementer
• To måder at anvende et tema på:
• Beskrivelse
• Perspektiv

Dette er et redigeret uddrag fra kapitel 15 af Murachs HTML5 og CSS3 af Zak Ruvalcaba og Anne Boehm.

jQuery Mobile er et gratis, open-source, JavaScript-bibliotek på tværs af platforme, som du kan bruge til at udvikle mobile websteder. Dette bibliotek giver dig mulighed for at oprette sider, der ligner og føles som siderne i en indbygget mobilapplikation.

Selvom jQuery Mobile i øjeblikket er tilgængelig som en beta-testversion, indeholder denne version allerede alle de funktioner, du har brug for til at udvikle et fremragende mobilwebsite. Som et resultat kan du begynde at bruge det med det samme. Du kan også forvente, at denne version løbende forbedres, så jQuery Mobile bliver kun bedre.

I denne artikel lærer du de grundlæggende teknikker til oprettelse af siderne på et mobilwebsted. Dette inkluderer brug af dialogbokse, knapper og navigationslinjer.

Sådan kodes flere sider i en enkelt HTML-fil

I modsætning til den måde, du udvikler websiderne til et skærmwebsite på, giver jQuery Mobile dig mulighed for at oprette flere sider i en enkelt HTML-fil. Dette er illustreret i figur 15-7. Her kan du se to sider på et websted sammen med HTML for disse sider. Hvad der er overraskende er, at begge sider er kodet i en enkelt HTML-fil.

For hver side koder du et div-element med “side” som værdien af ​​attributten data-rolle. Derefter koder du div-elementerne inden for hvert af disse div-elementer til sidehoved, indhold og sidefod på hver side. Senere, når HTML-filen er indlæst, vises den første side i filens brødtekst.

For at linke mellem siderne i HTML-filen bruger du pladsholdere som vist i figur 7-11 i kapitel 7. F.eks. Går elementet a> på den første side i dette eksempel til "#toobin", når brugeren trykker på h2 eller img-element, der er kodet som indholdet af dette link. Dette refererer til div-elementet med "toobin" som id-attribut, hvilket betyder at tryk på linket fører læseren til den anden side i filen.

Selvom dette eksempel kun viser to sider, kan du kode mange sider inden for en enkelt HTML-fil. Husk dog, at alle sider sammen med deres billeder, JavaScript og CSS-filer er indlæst med den enkelte HTML-fil. Som et resultat bliver indlæsningstiden for lang, hvis du gemmer for mange sider i en enkelt fil. Når det sker, kan du opdele dine sider i mere end en HTML-fil.

HTML for de to sider i brødteksten til en HTML-fil:

div data-role = "page"> header data-role = "header"> h1> SJV Rådhus / h1> / header> sektion data-role = "content"> h3> 2011-2012 højttalere / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> 19. oktober 2011 / h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>! - ELEMENTERNE FOR TALENES REST - -> / sektion> footer data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "page" id = "toobin"> header data-role = "header"> h1> SJV Rådhus / h1> / header> sektion data-role = "content"> h3> The Supreme Nine: br> Black Robed Secrets / h3> img src = "images / toobin_court.cnn.webp" alt = "Jeffrey Toobin "> p> Forfatter til den kritikerroste bestseller, i> The Nine:! - KOPIERET FORTSÆTTER -> / sektion> footer data-role =" footer "> h4> © 2011 / h4> / footer> / div>

Beskrivelse

• Når du bruger jQuery Mobile, behøver du ikke udvikle en separat HTML-fil til hver side. I stedet koder du inden for body-elementet i en enkelt HTML-fil et div-element for hver side med dets datarolle-attribut indstillet til "side".
• For hvert div-element indstiller du id-attributten til en pladsholderværdi, der kan tilgås af href-attributterne i a> -elementerne på andre sider.

Sådan bruges dialogbokse og overgange

Figur 15-8 viser, hvordan man opretter en dialogboks, der åbnes, når der trykkes på et link. For at gøre det koder du dialogboksen, ligesom du ville gøre det for enhver side. Men i det a> -element, der går til den side, koder du en datarelateret attribut med "dialog" som værdi.

Som eksemplerne i denne figur viser, formaterer jQuery Mobile CSS-filen en dialogboks på en anden måde end en normal webside. Som standard har en dialogboks en mørk baggrund med hvid forgrundstekst, og sidehovedet og sidefoden spænder ikke over sidens bredde. En dialogboks vil også have et "X" i overskriften, som brugeren skal trykke for at vende tilbage til den forrige side.

Når du koder et a> -element, der går til en anden side eller dialogboks, kan du også bruge dataovergangsattributten til at angive en af ​​de seks overgange, der er opsummeret i tabellen i denne figur. Hver af disse overgange er beregnet til at efterligne en effekt, som en mobilenhed som en iPhone bruger.

De overgange, der kan bruges

HTML, der åbner siden som en dialogboks med "pop" -overgangen:

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

HTML, der åbner siden med "fade" -overgangen:

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

Beskrivelse

• HTML til en dialog boks er kodet, som en side er kodet. Imidlertid inkluderer a> -elementet, der linker til siden, data-rel-attributten med "dialog" som værdi. For at lukke dialogboksen banker brugeren på X i boksens overskrift.
• For at specificere, hvordan en side eller en dialogboks åbnes, kan du bruge dataovergangsattributten med en af ​​værdierne i tabellen ovenfor. Hvis en enhed ikke understøtter den overgang, du angiver, ignoreres attributten.
• Styling af en dialogboks udføres af jQuery Mobile CSS-filen.

Sådan oprettes knapper

Figur 15-9 viser, hvordan man bruger knapper til at navigere fra en side til en anden. For at gøre det skal du blot indstille datarolle-attributten for et a> -element til "knap", og jQuery Mobile gør resten.
Du kan dog også indstille nogle andre attributter til knapper. Hvis du f.eks. Ønsker, at to eller flere knapper skal vises side om side, som de to første knapper i denne figur, kan du indstille datainline-attributten til "sand".

Hvis du vil tilføje et af de 18 ikoner, der leveres af jQuery Mobile til en knap, koder du også data-ikonattributten. For eksempel bruger den tredje knap i dette eksempel ikonet “slet”, og den fjerde knap bruger ikonet “hjem”. Alle disse ikoner ligner de ikoner, som du muligvis ser i en indbygget mobilapplikation. I øvrigt er disse ikoner ikke separate filer, som siden skal have adgang til. I stedet leveres de af jQuery Mobile-biblioteket.

Hvis du vil gruppere to eller flere knapper vandret, som knapperne Ja, Nej og Måske i denne figur, kan du kode a> -elementerne til knapperne inden for et div-element, der har "kontrolgruppe" som datarolle-attribut og "Vandret" som attribut for datatype. Eller for at gruppere knapperne lodret kan du ændre datatypeattributten til "lodret".

Hvis du indstiller data-rel-attributten for en knap til "tilbage" og href-attributten til pundsymbolet (#), vender knappen tilbage til den side, der kaldte det. Med andre ord fungerer knappen som en Tilbage-knap. Dette illustreres med den sidste knap i sidens indhold.

De sidste to knapper viser, hvordan knapper vises i sidefoden på en side. Her er ikonerne og teksten hvide mod en sort baggrund. I dette tilfælde er klasseattributten for sidefoden sat til "ui-bar", som fortæller jQuery Mobile, at den skal lægge lidt mere plads omkring indholdet af sidefoden. Du lærer mere om det i figur 15-12.

HTML til knapperne i sektionen:

! - For inline-knapper skal du indstille datalineattributten til true -> a href = "#" data-role = "button" data-inline = "true"> Annuller / a> a href = "#" data -role = "button" data-inline = "true"> OK / a>! - Hvis du vil føje et ikon til en knap, skal du bruge data-icon-attributten -> en href = "#" data-role = "knap "data-icon =" delete "> Slet / a> a href =" # "data-role =" button "data-icon =" home "> Hjem / a>! - For at gruppere knapper skal du bruge et div-element med de attributter, der følger -> 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"> Nej / a> a href = "#" data-role = "button"> Måske / a> / div>! - Til kode en Tilbage-knap, indstil data-rel-attributten til tilbage -> a href = "#" data-role = "button" dat-rel = "back" data-icon = "back"> Tilbage til forrige side / a >

HTML til knapperne i sidefoden:

footer data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> Føj til Facebook / a> a href = "http: //www.twitter.com "data-role =" button "data-icon =" plus "> Tweet denne side / a> / footer>

Beskrivelse

• For at tilføje en knap til en webside koder du et a> -element med dets datarolle-attribut indstillet til "knap".

Sådan oprettes en navigationslinje

Figur 15-10 viser, hvordan du kan føje en navigationslinje til en webside. For at gøre det kode du et div-element med dets datarolle indstillet til "navbar". Inden for dette element koder du et ul-element, der indeholder li-elementer, der indeholder a> -elementerne for elementerne i navigationslinjen. Bemærk dog, at du ikke koder data-rolleattributten for a> -elementerne.

For at ændre farven på elementerne i navigationslinjen, indeholder koden i dette eksempel data-tema-b-attributten for hvert element. Som et resultat ændrer jQuery Mobile baggrundsfarven på hvert element fra sort, som er standard, til en attraktiv blå. Derudover indstiller denne kode klasseattributten for den aktive knap til “ui-btn-aktiv”, så jQuery Mobile ændrer farven for den aktive knap til en lysere blå. Dette viser, hvordan du kan ændre den formatering, der bruges af jQuery Mobile, og du lærer mere om det næste.

HTML til navigationslinjen:

header data-role = "header"> h1> SJV Town Hall / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-tema = "b "> Hjem / a> / li> li> a href =" # højttalere "data-icon =" stjerne "data-tema =" b "> Højttalere / a> / li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> Kontakt os / a> / li> / ul> / div> / header>

Sådan kode HTML for en navigationslinje:

• Kod et div-element i header-elementet. Indstil derefter datarolle-attributten for div-elementet til "navbar".
• Inden for div-elementet skal du kode et ul-element, der indeholder et li-element for hvert link.
• Inden for hvert li-element skal du kode et a> -element med en href-attribut, der bruger en pladsholder til den side, som linket skal gå til. Indstil derefter data-ikonattributten til det ikon, du vælger.
• For det aktive element i navigationslinjen skal du indstille klasseattributten til "ui-btn-aktiv".Derefter vil farven på dette element være lysere end de andre elementer i navigationslinjen.
• Du skal også bruge datatemaattributten til at anvende et jQuery Mobile-tema på hvert emne i navigationslinjen. Ellers vil knapperne i bjælken have den samme farve som resten af ​​overskriften. For at lære mere om anvendelse af temaer, se figur 15-12.

Sådan formateres indhold med jQuery Mobile

Som du allerede har set, formaterer jQuery Mobile automatisk komponenterne på en webside baseret på sit eget stilark. Nu lærer du mere om det såvel som hvordan du justerer den standard styling, som jQuery Mobile bruger.

Standardformaterne, som jQuery Mobile bruger

Figur 15-13 viser standardformaterne, som jQuery Mobile bruger til almindelige HTML-elementer. For alle dens stilarter er jQuery Mobile afhængig af browserens gengivelsesmotor, så dens egen styling er minimal. Dette holder indlæsningstiderne hurtige og minimerer omkostningerne, som overdreven CSS vil pålægge en side.

Som du kan se, er jQuery Mobils styling så effektiv, at du ikke behøver at ændre dens styling ved at give dit eget CSS-stilark. F.eks. Er afstanden mellem elementerne i den ikke-ordnede liste og formateringen af ​​tabellen begge acceptable, som de er. Den sorte type på den grå baggrund er også i overensstemmelse med formateringen til native mobilapplikationer.

Beskrivelse

• Som standard anvender jQuery Mobile automatisk typografier på HTML-elementerne for en side. Disse stilarter er ikke kun attraktive, men efterligner også en browsers indbyggede stilarter.
• Som standard anvender jQuery Mobile en lille mængde polstring til venstre, højre, top og bund på hver mobilside.
• Links er som standard lidt større end normal tekst. Dette gør det lettere for brugeren at trykke på linkene.
• Som standard er links understregede med blå som skriftfarve.

Sådan anvendes temaer til HTML-elementer

I nogle tilfælde vil du ændre de standardformater, som jQuery Mobile bruger. Du har allerede set det i navigationslinjen i figur 15-10. For at ændre standardformaterne kan du bruge de fem temaer, som jQuery Mobile leverer. Disse er opsummeret i figur 15-12. Også her er disse temaer beregnet til at efterligne udseendet af en native mobilapplikation.

En måde at anvende temaer på er at kode en datatemaattribut med temabrevet som værdi. Du så dette i navigationslinjen i figur 15-10, og du kan se dette i koden til den anden navigationslinje i denne figur. Her anvender datatema-attributten temaet "e" på overskriften og temaet "d" på elementerne i navigationslinjen.

Den anden måde at anvende temaer på er at indstille klasseattributten for et element til et klassenavn, der angiver et tema. Dette illustreres af det første eksempel efter tabellen. Her bruges klasseattributten til at anvende både "ui-bar" og "ui-bar-b" klasser til div-elementet. Som et resultat anvender jQuery Mobile først sin standard styling for en bar på elementet og anvender derefter b-temaet på den styling. På de efterfølgende sider kan du se andre eksempler på denne type styling.

Bemærk, at tabellen i denne figur siger at bruge tema e sparsomt. Det er fordi den bruger en orange farve, der fungerer okay til at accentuere en vare, men ikke er attraktiv i store doser. Dette illustreres af den anden overskrift og navigationslinje i denne figur, der har en tendens til at skære, når du ser den i farve.

Generelt er det bedst at holde sig til standardformaterne og de første tre temaer, som normalt fungerer godt sammen. Derefter kan du eksperimentere med temaer d og e, når du tror, ​​du har brug for noget mere.

HTML til den anden overskrift og navigationslinje:

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-tema =" d "> Hjem / a> / li> li> a href =" # højttalere "data-icon =" stjerne "data-tema =" d "> Højttalere / a> / li> li> a href = "# nyheder" id = "nyheder" data-ikon = "gitter" data-tema = "d"> Nyheder / a> / li> / ul> / div> / header>

De fem jQuery Mobile-temaer:

To måder at anvende et tema på:

Ved hjælp af en datatemaattribut:

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

Ved at bruge en klasseattribut, der angiver temaet:

div> Bar / div>

Beskrivelse

• Ved at bruge de fem temaer, der er inkluderet i jQuery Mobile, kan du foretage passende justeringer af standardformaterne for HTML-elementerne.
• Selvom du kan bruge dit eget CSS-stilark med en jQuery Mobile-applikation, bør du undgå at gøre det, når det er muligt.

Perspektiv

Brugen af ​​mobile enheder er steget dramatisk i løbet af de sidste par år. På grund af det er det blevet stadig vigtigere at designe websteder, der er nemme at bruge fra disse enheder. Selvom det normalt betyder at udvikle et separat websted, kan dette være et kritisk aspekt ved at opretholde din tilstedeværelse på Internettet.

Heldigvis er opgaven med at opbygge et mobilwebsted blevet meget lettere med jQuery Mobile. Mobile websider er ikke længere begrænset til statiske sider, der indeholder overskrifter, afsnit, links og miniaturebilleder. Med jQuery Mobile kan webudviklere nu oprette funktionsrige websteder, der ser ud og føles som indfødte mobilapplikationer.