Opprett et mobilnettsted med jQuery Mobile

Innhold

• Hvordan kode flere sider i en enkelt HTML-fil
• Beskrivelse
• Hvordan bruke dialogbokser og overganger
• Overgangene som kan brukes
• Beskrivelse
• Hvordan lage knapper
• Beskrivelse
• Hvordan lage en navigasjonslinje
• Hvordan kode HTML for en navigasjonslinje:
• Hvordan formatere innhold med jQuery Mobile
• Standard stilene som jQuery Mobile bruker
• Beskrivelse
• Hvordan bruke temaer på HTML-elementer
• To måter å bruke et tema på:
• Beskrivelse
• Perspektiv

Dette er et redigert utdrag fra kapittel 15 av Murachs HTML5 og CSS3 av Zak Ruvalcaba og Anne Boehm.

jQuery Mobile er et gratis, åpen kildekode, kryssplattform, JavaScript-bibliotek som du kan bruke til å utvikle mobile nettsteder. Dette biblioteket lar deg lage sider som ser ut og føles som sidene til en innfødt mobilapplikasjon.

Selv om jQuery Mobile for øyeblikket er tilgjengelig som en beta-testversjon, inneholder denne versjonen allerede alle funksjonene du trenger for å utvikle et utmerket mobilnettsted. Som et resultat kan du begynne å bruke den med en gang. Du kan også forvente at denne versjonen forbedres kontinuerlig, så jQuery Mobile blir bare bedre.

I denne artikkelen lærer du de grunnleggende teknikkene for å lage sidene til et mobilnettsted. Dette inkluderer bruk av dialogbokser, knapper og navigasjonsfelt.

Hvordan kode flere sider i en enkelt HTML-fil

I motsetning til måten du utvikler nettsidene til et skjermnettsted, lar jQuery Mobile deg lage flere sider i en enkelt HTML-fil. Dette illustreres av figur 15-7. Her kan du se to sider på et nettsted sammen med HTML for disse sidene. Det som er overraskende er at begge sidene er kodet i en enkelt HTML-fil.

For hver side koder du ett div-element med “side” som verdien av datarolle-attributtet. Deretter koder du div-elementene i hvert av disse div-elementene for topptekst, innhold og bunntekst på hver side. Senere, når HTML-filen er lastet, vises den første siden i brødteksten til filen.

For å koble mellom sidene i HTML-filen, bruker du plassholdere som vist i figur 7-11 i kapittel 7. For eksempel går a> -elementet på den første siden i dette eksemplet til "#toobin" når brukeren trykker på h2 eller img-element som er kodet som innholdet for denne lenken. Dette refererer til div-elementet med "toobin" som id-attributt, noe som betyr at å trykke på lenken fører leseren til den andre siden i filen.

Selv om dette eksemplet bare viser to sider, kan du kode mange sider i en enkelt HTML-fil. Husk imidlertid at alle sidene sammen med bildene, JavaScript og CSS-filer er lastet med den eneste HTML-filen. Som et resultat vil lastetiden bli overdreven hvis du lagrer for mange sider i en enkelt fil. Når det skjer, kan du dele sidene dine i mer enn en HTML-fil.

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

div data-role = "page"> header data-role = "header"> h1> SJV rådhus / h1> / header> seksjon data-role = "content"> h3> Høyttalerne 2011-2012 / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> 19. oktober 2011 / h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>! - ELEMENTENE FOR RESTEN AV TALERNE - -> / seksjon> bunntekst data-role = "bunntekst"> h4> © 2011 / h4> / bunntekst> / div> div data-role = "page" id = "toobin"> header data-role = "header"> h1> SJV Town Hall / h1> / header> seksjon data-role = "content"> h3> The Supreme Nine: br> Black Robed Secrets / h3> img src = "images / toobin_court.cnn.webp" alt = "Jeffrey Toobin "> p> Forfatter av den kritikerroste bestselgeren, i> The Nine:! - KOPIERET FORTSETTER -> / seksjon> bunntekst data-role =" bunntekst "> h4> © 2011 / h4> / bunntekst> / div>

Beskrivelse

• Når du bruker jQuery Mobile, trenger du ikke å utvikle en egen HTML-fil for hver side. I stedet, i hovedelementet til en enkelt HTML-fil, koder du ett div-element for hver side med dets datarolle-attributt satt til "side".
• For hvert div-element setter du id-attributtet til en plassholderverdi som er tilgjengelig for href-attributtene i a> elementene på andre sider.

Hvordan bruke dialogbokser og overganger

Figur 15-8 viser hvordan du oppretter en dialogboks som åpnes når det trykkes på en lenke. For å gjøre det, koder du dialogboksen akkurat som på en hvilken som helst side. Men i a> -elementet som går til den siden, koder du en data-relattributt med "dialog" som verdi.

Som eksemplene i denne figuren viser, formaterer jQuery Mobile CSS-filen en dialogboks annerledes enn en vanlig webside. Som standard vil en dialogboks ha en mørk bakgrunn med hvit forgrunnstekst, og topp- og bunntekst strekker seg ikke over sidens bredde. En dialogboks vil også ha et "X" i overskriften som brukeren må trykke for å gå tilbake til forrige side.

Når du koder et a> -element som går til en annen side eller dialogboks, kan du også bruke dataovergangsattributtet til å spesifisere en av de seks overgangene som er oppsummert i tabellen i denne figuren. Hver av disse overgangene er ment å etterligne en effekt som en mobilenhet som en iPhone bruker.

Overgangene som kan brukes

HTML som åpner siden som en dialogboks med "pop" -overgangen:

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

HTML som åpner siden med "fade" -overgangen:

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

Beskrivelse

• HTML-koden for en dialogboks er kodet slik en side er kodet. Imidlertid inkluderer a> -elementet som lenker til siden data-rel-attributtet med "dialog" som verdi. For å lukke dialogboksen trykker brukeren på X i toppteksten til boksen.
• For å spesifisere måten en side eller en dialogboks åpnes på, kan du bruke dataovergangsattributtet med en av verdiene i tabellen ovenfor. Hvis en enhet ikke støtter overgangen du spesifiserer, ignoreres attributtet.
• Stylingen for en dialogboks gjøres av jQuery Mobile CSS-filen.

Hvordan lage knapper

Figur 15-9 viser hvordan du bruker knapper til å navigere fra en side til en annen. For å gjøre det, stiller du bare datarolle-attributtet for et a> -element til “knapp”, og jQuery Mobile gjør resten.
Du kan imidlertid også angi noen andre attributter for knapper. Hvis du for eksempel vil at to eller flere knapper skal vises side om side, i likhet med de to første knappene i denne figuren, kan du sette datainline-attributtet til "true".

Hvis du vil legge til ett av de 18 ikonene som leveres av jQuery Mobile til en knapp, koder du også data-ikonattributtet. For eksempel bruker den tredje knappen i dette eksemplet "slett" -ikonet, og den fjerde knappen bruker "hjem" -ikonet. Alle disse ikonene ser ut som ikonene du kan se i en innfødt mobilapplikasjon. Disse ikonene er forøvrig ikke separate filer som siden må få tilgang til. I stedet blir de levert av jQuery Mobile-biblioteket.

Hvis du vil gruppere to eller flere knapper horisontalt, som knappene Ja, Nei og Kanskje i denne figuren, kan du kode a> elementene for knappene i et div-element som har "kontrollgruppe" som datarolle-attributt og “Horisontal” som datatypeattributt. Eller for å gruppere knappene vertikalt, kan du endre datatypeattributtet til "vertikal".

Hvis du setter data-rel-attributtet for en knapp til "tilbake" og href-attributtet til pundsymbolet (#), vil knappen gå tilbake til siden som kalte det. Med andre ord fungerer knappen som en Tilbake-knapp. Dette illustreres av den siste knappen i innholdet på siden.

De to siste knappene viser hvordan knappene vises i bunnteksten for en side. Her er ikonene og teksten hvite mot svart bakgrunn. I dette tilfellet er klasse-attributtet for bunnteksten satt til "ui-bar", som forteller jQuery Mobile at den skal sette litt mer plass rundt innholdet i bunnteksten. Du lærer mer om det i figur 15-12.

HTML for knappene i seksjonen:

! - For innebygde knapper, sett datalinjeattributtet til true -> a href = "#" data-role = "button" data-inline = "true"> Avbryt / a> a href = "#" data -role = "button" data-inline = "true"> OK / a>! - Hvis du vil legge til et ikon på en knapp, bruker du data-ikonattributtet -> en href = "#" data-role = "knapp "data-icon =" delete "> Delete / a> a href =" # "data-role =" button "data-icon =" home "> Hjem / a>! - For å gruppere knapper, bruk et div-element med attributtene som følger -> div data-role = "controlgroup" data-type = "horizontal"> a href = "#" data-role = "button" data-icon = "check"> Yes / a> a href = "#" data-role = "button" data-icon = "arrow-d"> No / a> a href = "#" data-role = "button"> Kanskje / a> / div>! - Til kode en Back-knapp, sett data-rel-attributtet til back -> a href = "#" data-role = "button" dat-rel = "back" data-icon = "back"> Tilbake til forrige side / a >

HTML for knappene i bunnteksten:

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

Beskrivelse

• For å legge til en knapp på en webside, koder du et a> -element med dets datarolle-attributt satt til "knapp".

Hvordan lage en navigasjonslinje

Figur 15-10 viser hvordan du kan legge til en navigasjonsfelt på en webside. For å gjøre det, koder du et div-element med datarollen satt til "navbar". Innen dette elementet koder du et ul-element som inneholder li-elementer som inneholder a> elementene for elementene i navigasjonsfeltet. Vær imidlertid oppmerksom på at du ikke koder data-rolle-attributtet for a> -elementene.

For å endre fargen på elementene i navigasjonslinjen, inneholder koden i dette eksemplet data-tema-b-attributtet for hvert element. Som et resultat endrer jQuery Mobile bakgrunnsfargen på hvert element fra svart, som er standard, til et attraktivt blått. I tillegg setter denne koden klasseattributtet for den aktive knappen til “ui-btn-aktiv” slik at jQuery Mobile endrer fargen for den aktive knappen til lysere blå. Dette viser hvordan du kan endre formateringen som brukes av jQuery Mobile, og du vil lære mer om det neste.

HTML for navigeringslinjen:

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øyttalere "data-icon =" stjerne "data-tema =" b "> Høyttalere / a> / li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> Kontakt oss / a> / li> / ul> / div> / header>

Hvordan kode HTML for en navigasjonslinje:

• Kod et div-element i topptekstelementet. Sett deretter datarolle-attributtet for div-elementet til “navbar”.
• Kod et ul-element som inneholder ett li-element for hver lenke i div-elementet.
• Kod et a> -element i hvert li-element med et href-attributt som bruker en plassholder for siden som lenken skal gå til. Sett deretter data-ikonattributtet til ikonet du velger.
• For det aktive elementet i navigasjonsfeltet, sett klasseattributtet til “ui-btn-active”.Deretter vil fargen på dette elementet være lysere enn de andre elementene i navigasjonslinjen.
• Du bør også bruke datatemaattributtet til å bruke et jQuery Mobile-tema på hvert element i navigasjonsfeltet. Ellers vil knappene i linjen ha samme farge som resten av overskriften. For å lære mer om bruk av temaer, se figur 15-12.

Hvordan formatere innhold med jQuery Mobile

Som du allerede har sett, formaterer jQuery Mobile automatisk komponentene på en webside basert på sitt eget stilark. Nå vil du lære mer om det, samt hvordan du justerer standardstilingen som jQuery Mobile bruker.

Standard stilene som jQuery Mobile bruker

Figur 15-13 viser standardstiler som jQuery Mobile bruker for vanlige HTML-elementer. For alle stilene, er jQuery Mobile avhengig av nettleserens gjengivelsesmotor, slik at dens egen styling er minimal. Dette holder lastetiden rask og minimerer overhead som overdreven CSS vil påføre en side.

Som du kan se, er jQuery Mobils styling så effektiv at du ikke trenger å endre stylingen ved å tilby ditt eget CSS-stilark. For eksempel er avstanden mellom elementene i den uordnede listen og formateringen av tabellen begge akseptable slik de er. Også den svarte typen på den grå bakgrunnen stemmer overens med formateringen for native mobilapplikasjoner.

Beskrivelse

• Som standard bruker jQuery Mobile automatisk stiler på HTML-elementene for en side. Disse stilene er ikke bare attraktive, men etterligner også de opprinnelige stilene til en nettleser.
• Som standard bruker jQuery Mobile en liten mengde polstring til venstre, høyre, topp og bunn av hver mobilside.
• Koblinger er som standard litt større enn vanlig tekst. Dette gjør det lettere for brukeren å trykke på koblingene.
• Som standard er koblinger understreket med blå som skriftfarge.

Hvordan bruke temaer på HTML-elementer

I noen tilfeller vil du endre standardstilene som jQuery Mobile bruker. Du har allerede sett det i navigasjonsfeltet i figur 15-10. For å endre standardstiler, kan du bruke de fem temaene som jQuery Mobile tilbyr. Disse er oppsummert i figur 15-12. Også her er disse temaene ment å etterligne utseendet til en innfødt mobilapplikasjon.

En måte å bruke temaer på er å kode et datatema-attributt med temabrevet som verdi. Du så dette i navigasjonsfeltet i figur 15-10, og du kan se dette i koden for den andre navigasjonsfeltet i denne figuren. Her gjelder datatema-attributtet temaet “e” for overskriften og temaet “d” for elementene i navigasjonsfeltet.

Den andre måten å bruke temaer er å sette klasseattributtet for et element til et klassenavn som indikerer et tema. Dette illustreres av det første eksemplet etter tabellen. Her brukes klasseattributtet til å bruke både “ui-bar” og “ui-bar- b” klasser på div-elementet. Som et resultat bruker jQuery Mobile først sin standardstil for en bar på elementet, og bruker deretter b-temaet på den stylingen. På sidene som følger ser du andre eksempler på denne typen styling.

Vær oppmerksom på at tabellen i denne figuren sier at du skal bruke tema e sparsomt. Det er fordi den bruker en oransje farge som fungerer bra for å aksentere en vare, men som ikke er attraktiv i store doser. Dette illustreres av den andre overskriften og navigasjonslinjen i denne figuren, som har en tendens til å skjelve når du ser den i farger.

Generelt er det best å holde seg til standardstiler og de tre første temaene, som vanligvis fungerer godt sammen. Deretter kan du eksperimentere med temaene d og e når du tror du trenger noe mer.

HTML for den andre overskriften og navigasjonslinjen:

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 "> Hjem / a> / li> li> a href =" # høyttalere "data-icon =" star "data-theme =" d "> Høyttalere / a> / li> li> a href = "# nyheter" id = "nyheter" data-ikon = "rutenett" data-tema = "d"> Nyheter / a> / li> / ul> / div> / header>

De fem jQuery Mobile-temaene:

To måter å bruke et tema på:

Ved å bruke et datatema-attributt:

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

Ved å bruke et klasseattributt som indikerer temaet:

div> Bar / div>

Beskrivelse

• Ved å bruke de fem temaene som følger med jQuery Mobile, kan du gjøre passende justeringer av standardstiler for HTML-elementene.
• Selv om du kan bruke ditt eget CSS-stilark med en jQuery Mobile-applikasjon, bør du unngå å gjøre det når det er mulig.

Perspektiv

Bruken av mobile enheter har økt dramatisk de siste årene. På grunn av det har det blitt stadig viktigere å designe nettsteder som er enkle å bruke fra disse enhetene. Selv om det vanligvis betyr å utvikle et eget nettsted, kan dette være et viktig aspekt ved å opprettholde din tilstedeværelse på Internett.

Heldigvis har oppgaven med å bygge et mobilnettsted blitt mye lettere med jQuery Mobile. Mobilsider er ikke lenger begrenset til statiske sider som inneholder overskrifter, avsnitt, lenker og miniatyrbilder. Med jQuery Mobile kan nettutviklere nå bygge funksjonsrike nettsteder som ser ut og føles som innfødte mobilapplikasjoner.