Skapa en mobilwebbplats med jQuery Mobile

Innehåll

• Hur man kodar flera sidor i en enda HTML-fil
• Beskrivning
• Hur man använder dialogrutor och övergångar
• Övergångarna som kan användas
• Beskrivning
• Hur man skapar knappar
• Beskrivning
• Hur man skapar ett navigeringsfält
• Så här kodar du HTML-koden för ett navigeringsfält:
• Hur man formaterar innehåll med jQuery Mobile
• Standardstilarna som jQuery Mobile använder
• Beskrivning
• Hur man tillämpar teman på HTML-element
• Två sätt att tillämpa ett tema:
• Beskrivning
• Perspektiv

Detta är ett redigerat utdrag från kapitel 15 av Murachs HTML5 och CSS3 av Zak Ruvalcaba och Anne Boehm.

jQuery Mobile är ett gratis JavaScript-bibliotek med öppen källkod, plattform, som du kan använda för att utveckla mobila webbplatser. Med det här biblioteket kan du skapa sidor som ser ut och känns som sidorna i en mobil mobilapplikation.

Även om jQuery Mobile för närvarande finns som en beta-testversion, har den här versionen redan alla funktioner du behöver för att utveckla en utmärkt mobilwebbplats. Som ett resultat kan du börja använda den direkt. Du kan också förvänta dig att den här versionen ständigt förbättras, så jQuery Mobile blir bara bättre.

I den här artikeln lär du dig de grundläggande teknikerna för att skapa sidorna på en mobilwebbplats. Det inkluderar användning av dialogrutor, knappar och navigeringsfält.

Hur man kodar flera sidor i en enda HTML-fil

Till skillnad från hur du utvecklar webbsidorna för en skärmwebbplats, låter jQuery Mobile dig skapa flera sidor i en enda HTML-fil. Detta illustreras av figur 15-7. Här kan du se två sidor på en webbplats tillsammans med HTML för dessa sidor. Det som är förvånande är att båda sidorna är kodade i en enda HTML-fil.

För varje sida kodar du ett div-element med ”sida” som värdet för datarollattributet. Sedan kodar du div-elementen för vart och ett av dessa div-element för sidhuvud, innehåll och sidfot. Senare, när HTML-filen laddas, visas den första sidan i filens kropp.

För att länka mellan sidorna i HTML-filen använder du platshållare som visas i figur 7-11 i kapitel 7. Exempelvis går a> -elementet på den första sidan i detta exempel till "#toobin" när användaren trycker på h2 eller img-element som kodas som innehållet för den här länken. Detta hänvisar till div-elementet med "toobin" som id-attribut, vilket innebär att genom att trycka på länken tas läsaren till andra sidan i filen.

Även om det här exemplet bara visar två sidor kan du koda många sidor i en enda HTML-fil. Kom dock ihåg att alla sidor tillsammans med deras bilder, JavaScript och CSS-filer laddas med en enda HTML-fil. Som ett resultat blir laddningstiden överdriven om du lagrar för många sidor i en enda fil. När det händer kan du dela dina sidor i mer än en HTML-fil.

HTML för de två sidorna i en HTML-fil:

div data-role = "page"> header data-role = "header"> h1> SJV Town Hall / h1> / header> avsnitt data-role = "content"> h3> 2011-2012-högtalarna / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> 19 oktober 2011 / h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>! - ELEMENTEN FÖR TALARENS RESTA - -> / avsnitt> sidfot data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "page" id = "toobin"> header data-role = "header"> h1> SJV Town Hall / h1> / header> avsnitt data-role = "content"> h3> The Supreme Nine: br> Black Robed Secrets / h3> img src = "images / toobin_court.cnn.webp" alt = "Jeffrey Toobin "> p> Författare till den kritikerrosade bästsäljaren, i> The Nine:! - KOPIERINGEN FORTSÄTTER -> / avsnitt> sidfot data-role =" sidfot "> h4> © 2011 / h4> / sidfot> / div>

Beskrivning

• När du använder jQuery Mobile behöver du inte utveckla en separat HTML-fil för varje sida. I stället kodar du in en del HTML-element för en enda HTML-fil för varje sida med dess datarollattribut inställt på "sida".
• För varje div-element ställer du in attributet till ett platshållarvärde som kan nås av href-attributen i a> -elementen på andra sidor.

Hur man använder dialogrutor och övergångar

Figur 15-8 visar hur man skapar en dialogruta som öppnas när man trycker på en länk. För att göra det kodar du dialogrutan precis som på en sida. Men i elementet a> som går till den sidan kodar du ett datarelaterat attribut med "dialog" som sitt värde.

Som exemplen i denna figur visar formaterar jQuery Mobile CSS-filen en dialogruta annorlunda än en vanlig webbsida. Som standard har en dialogruta en mörk bakgrund med vit förgrundstext och sidhuvudet och sidfoten spänner inte över sidans bredd. En dialogruta kommer också att ha ett “X” i rubriken som användaren måste trycka på för att återgå till föregående sida.

När du kodar ett a> -element som går till en annan sida eller dialogruta kan du också använda dataövergångsattributet för att ange en av de sex övergångarna som sammanfattas i tabellen i denna figur. Var och en av dessa övergångar är tänkt att efterlikna en effekt som en mobil enhet som en iPhone använder.

Övergångarna som kan användas

HTML som öppnar sidan som en dialogruta med "pop" -övergången:

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

HTML som öppnar sidan med "blekna" övergång:

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

Beskrivning

• HTML för en dialog ruta kodas på samma sätt som vilken sida som helst. Emellertid innehåller elementet a> som länkar till sidan data-rel-attributet med "dialog" som värde. För att stänga dialogrutan knackar användaren på X i rubriken i rutan.
• För att ange hur en sida eller en dialogruta öppnas kan du använda dataövergångsattributet med ett av värdena i tabellen ovan. Om en enhet inte stöder den övergång som du anger ignoreras attributet.
• Stylingen för en dialogruta görs av jQuery Mobile CSS-filen.

Hur man skapar knappar

Figur 15-9 visar hur man använder knappar för att navigera från en sida till en annan. För att göra det ställer du bara in datarolle-attributet för ett a> -element till "knapp", och jQuery Mobile gör resten.
Du kan dock också ställa in några andra attribut för knappar. Om du till exempel vill att två eller flera knappar ska visas sida vid sida, liksom de två första knapparna i denna bild, kan du ställa in datainline-attributet till "true".

Om du vill lägga till en av de 18 ikonerna som tillhandahålls av jQuery Mobile till en knapp kodar du också data-ikonattributet. Till exempel använder den tredje knappen i detta exempel ikonen "radera" och den fjärde knappen använder ikonen "hem". Alla dessa ikoner ser ut som de ikoner som du kan se i en inbyggd mobilapplikation. Förresten är dessa ikoner inte separata filer som sidan måste komma åt. Istället tillhandahålls de av jQuery Mobile-biblioteket.

Om du vill gruppera två eller flera knappar horisontellt, som knapparna Ja, Nej och Kanske i den här figuren, kan du koda a> -elementen för knapparna inom ett div-element som har "kontrollgrupp" som attribut för dataroll och "Horisontellt" som attribut för datatyp. Eller om du vill gruppera knapparna vertikalt kan du ändra datatypsattributet till "vertikalt".

Om du ställer in data-rel-attributet för en knapp till "back" och href-attributet till pundsymbolen (#), återgår knappen till den sida som kallade den. Med andra ord fungerar knappen som en Back-knapp. Detta illustreras av den sista knappen i sidans innehåll.

De två sista knapparna visar hur knapparna visas i sidfoten för en sida. Här är ikonerna och texten vit mot svart bakgrund. I det här fallet är klassattributet för sidfoten inställt på "ui-bar", vilket säger till jQuery Mobile att det borde lägga lite mer utrymme runt innehållet i sidfoten. Du lär dig mer om det i figur 15-12.

HTML för knapparna i avsnittet:

! - För inline-knappar, ställ in datalinjeattributet till true -> a href = "#" data-role = "button" data-inline = "true"> Avbryt / a> a href = "#" data -role = "button" data-inline = "true"> OK / a>! - För att lägga till en ikon till en knapp, använd data-ikonattributet -> en href = "#" data-role = "knapp "data-icon =" delete "> Radera / a> a href =" # "data-role =" button "data-icon =" home "> Hem / a>! - För att gruppera knappar, använd ett div-element med attributen som följer -> 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"> Kanske / a> / div>! - Till koda en Tillbaka-knapp, ställ in data-rel-attributet på baksidan -> a href = "#" data-role = "button" dat-rel = "back" data-icon = "back"> Tillbaka till föregående sida / a >

HTML för knapparna i sidfoten:

footer data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> Lägg till Facebook / a> a href = "http: //www.twitter.com "data-role =" button "data-icon =" plus "> Tweeta den här sidan / a> / footer>

Beskrivning

• För att lägga till en knapp på en webbsida kodar du ett a> -element med dess datarollattribut inställt på "knapp".

Hur man skapar ett navigeringsfält

Figur 15-10 visar hur du kan lägga till ett navigeringsfält på en webbsida. För att göra det kodar du ett div-element med dess dataroll inställd på "navbar". Inom detta element kodar du ett ul-element som innehåller li-element som innehåller a> -elementen för objekten i navigeringsfältet. Observera dock att du inte kodar data-roll-attributet för a> -elementen.

För att ändra färgen för objekten i navigeringsfältet innehåller koden i det här exemplet data-tema-b-attributet för varje objekt. Som ett resultat ändrar jQuery Mobile bakgrundsfärgen för varje objekt från svart, vilket är standard, till ett attraktivt blått. Dessutom sätter den här koden klassattributet för den aktiva knappen till "ui-btn-aktiv" så jQuery Mobile ändrar färgen för den aktiva knappen till en ljusare blå. Detta visar hur du kan ändra den formatering som används av jQuery Mobile, och du lär dig mer om det nästa.

HTML för navigeringsfältet:

header data-role = "header"> h1> SJV Town Hall / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-tema = "b "> Hem / a> / li> li> a href =" # högtalare "data-icon =" stjärna "data-tema =" b "> Högtalare / a> / li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> Kontakta oss / a> / li> / ul> / div> / header>

Så här kodar du HTML-koden för ett navigeringsfält:

• Kod ett div-element i huvudelementet. Ställ sedan in datarollattributet för div-elementet till “navbar”.
• Inom div-elementet kodar du ett ul-element som innehåller ett li-element för varje länk.
• Inom varje li-element kodar du ett a> -element med ett href-attribut som använder en platshållare för den sida som länken ska gå till. Ställ sedan in data-ikonattributet till den ikon du väljer.
• För det aktiva objektet i navigeringsfältet, ställ in klassattributet till "ui-btn-aktivt".Då blir färgen på det här objektet ljusare än de andra objekten i navigeringsfältet.
• Du bör också använda datatemaattributet för att tillämpa ett jQuery Mobile-tema på varje objekt i navigeringsfältet. Annars kommer knapparna i fältet att ha samma färg som resten av rubriken. För att lära dig mer om att tillämpa teman, se figur 15-12.

Hur man formaterar innehåll med jQuery Mobile

Som du redan har sett formaterar jQuery Mobile automatiskt komponenterna på en webbsida baserat på sitt eget stilark. Nu lär du dig mer om det samt hur du justerar standardstylingen som jQuery Mobile använder.

Standardstilarna som jQuery Mobile använder

Figur 15-13 visar standardformaten som jQuery Mobile använder för vanliga HTML-element. För alla dess stilar förlitar sig jQuery Mobile på webbläsarens renderingsmotor så att den egna stilen är minimal. Detta håller laddningstiderna snabba och minimerar de omkostnader som överdriven CSS skulle medföra på en sida.

Som du kan se är jQuery Mobils styling så effektiv att du inte behöver ändra dess styling genom att tillhandahålla ditt eget CSS-stilark. Till exempel är avståndet mellan objekten i den oordnade listan och formateringen av tabellen båda acceptabla som de är. Den svarta typen på den grå bakgrunden överensstämmer också med formateringen för inbyggda mobilapplikationer.

Beskrivning

• Som standard använder jQuery Mobile automatiskt stilar på HTML-elementen för en sida. Dessa stilar är inte bara attraktiva utan efterliknar också webbläsarens inhemska stilar.
• Som standard använder jQuery Mobile en liten mängd stoppning till vänster, höger, överst och längst ner på varje mobilsida.
• Som standard är länkar något större än normal text. Detta gör det lättare för användaren att trycka på länkarna.
• Som standard är länkar understrukna med blått som teckensnittsfärg.

Hur man tillämpar teman på HTML-element

I vissa fall vill du ändra standardstilarna som jQuery Mobile använder. Du har redan sett det i navigeringsfältet i figur 15-10. För att ändra standardformaten kan du använda de fem teman som jQuery Mobile tillhandahåller. Dessa sammanfattas i figur 15-12. Även här är dessa teman avsedda att efterlikna utseendet på en inbyggd mobilapplikation.

Ett sätt att tillämpa teman är att koda ett datatemaattribut med temabokstaven som dess värde. Du såg detta i navigeringsfältet i figur 15-10, och du kan se detta i koden för det andra navigeringsfältet i denna figur. Här tillämpar datatema-attributet temat "e" i rubriken och temat "d" på objekten i navigeringsfältet.

Det andra sättet att tillämpa teman är att ställa in klassattributet för ett element till ett klassnamn som indikerar ett tema. Detta illustreras av det första exemplet efter tabellen. Här används klassattributet för att tillämpa både "ui-bar" och "ui-bar-b" -klasserna på div-elementet. Som ett resultat tillämpar jQuery Mobile först sin standardstyling för en bar på elementet och tillämpar sedan b-temat på den stylingen. På sidorna som följer ser du andra exempel på denna typ av styling.

Observera att tabellen i den här figuren säger att du ska använda tema e sparsamt. Det beror på att den använder en orange färg som fungerar okej för att accentuera en artikel, men som inte är attraktiv i stora doser. Detta illustreras av den andra rubriken och navigeringsfältet i den här figuren, som tenderar att skaka när du ser den i färg.

I allmänhet är det bäst att hålla sig till standardstilarna och de tre första teman, som vanligtvis fungerar bra tillsammans. Sedan kan du experimentera med teman d och e när du tror att du behöver något mer.

HTML för den andra rubriken och navigeringsfältet:

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 "> Hem / a> / li> li> a href =" # högtalare "data-icon =" stjärna "data-tema =" d "> Högtalare / a> / li> li> a href = "# nyheter" id = "nyheter" data-ikon = "rutnät" data-tema = "d"> Nyheter / a> / li> / ul> / div> / header>

De fem jQuery Mobile-teman:

Två sätt att tillämpa ett tema:

Genom att använda ett datatema-attribut:

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

Genom att använda ett klassattribut som anger temat:

div> Bar / div>

Beskrivning

• Genom att använda de fem teman som ingår i jQuery Mobile kan du göra lämpliga justeringar av standardformaten för HTML-elementen.
• Även om du kan använda ditt eget CSS-formatmall med en jQuery Mobile-applikation, bör du undvika att göra det när det är möjligt.

Perspektiv

Användningen av mobila enheter har ökat dramatiskt de senaste åren. På grund av detta har det blivit allt viktigare att utforma webbplatser som är lätta att använda från dessa enheter. Även om det vanligtvis innebär att du utvecklar en separat webbplats kan det vara en viktig aspekt för att behålla din närvaro på Internet.

Lyckligtvis har uppgiften att bygga en mobilwebbplats blivit mycket enklare med tillkomsten av jQuery Mobile. Mobila webbsidor är inte längre begränsade till statiska sidor som innehåller rubriker, stycken, länkar och miniatyrbilder. Med jQuery Mobile kan webbutvecklare nu bygga funktionsrika webbplatser som ser ut och känns som inbyggda mobilapplikationer.