Hur man bygger ett flersidigt mobildokument för HTML5 och CSS3-programmering - dummies

Det är fantastiskt att kunna para ner en HTML5 och CSS3 webbsida så det passar på en mobil enhet, men självklart om sidan är mindre behöver du fler av dem. Mobila appar använder ofta en sida-omvänd metafor för att packa mer data i en liten skärmfastighet, och jQuery-mobilbiblioteket har ett annat underbart verktyg för att göra det enkelt.

Hittills ser den här applikationen ut som de andra jQuery-mobilapparna du hittills hittat. En sak är annorlunda, och det är knappen i rubriken. Det är mycket vanligt att mobilappar har navigeringsknappar i rubriken. Tryck på knappen Nästa.

Efter en smutsig övergång visas nästa sida. Den här har två knappar i rubriken. Om du trycker på Nästa tar du användaren till tredje sidan.

Den tredje sidan är återigen mycket bekant, men den här gången har den en enda knapp till vänster om rubriken och en annan knapp i huvudinnehållet.

Det intressanta med dessa tre sidor är att de inte alls är tre sidor! Det är bara en sida, utformad för att fungera som tre olika sidor. Det finns ett par fördelar med detta arrangemang.

• CSS och JavaScript-resurser behöver bara laddas en gång: Detta håller systemet konsistent och förbättrar belastningstiderna något.

• Det finns ingen fördröjningstid: När dokumentet laddas är hela saken i minnet, även om endast en del är synlig i taget. Detta gör att du snabbt kan flytta mellan sidor utan att behöva vänta på serveråtkomst.

Du brukar implementera denna typ av mekanism när du har en stor sida du vill behandla som flera mindre sidor, så användaren behöver inte bläddra.

Här är koden för multiPage. html i sin helhet.

flersidiga. html #foot {font-size: 75%; typsnittstyp: kursiv; text-align: center;} pre {margin-left: auto; marginal-höger: auto; bakgrundsfärg: vit; bredd: 8em;}

Sidan One
next
Detta är indexet

sidan 1
sidan 2
sidan 3
från HTML All in One for Dummies prev

Sida Två
Nästa Den andra sidan är ungefär som den första, förutom att den inte är den första, och den har text snarare än knappar. Det är den andra sidan. Om du gillar det första antar jag att du kan gå tillbaka, men du borde verkligen gå till nästa sida, för jag hör det är riktigt snällt.
från HTML Allt i ett för Dummies prev

Sida Tre
3333333 3 3 3 33333 3 3 3 3333333

Gå till index
från HTML All in One for Dummies

Medan koden för det här exemplet är lång, bryter det inte mycket nytt underlag.

1. Ladda upp mobilt innehåll för jQuery.

   Dra in de nödvändiga CSS- och JavaScript-filerna från jQuery. com webbplats.

2. Använd din egen CSS.

   Även om du låser upp CSS-kod från jQuery, får du fortfarande lägga till din egen. Du kan lägga till CSS för att göra sidfot och preelementen så som du vill.

3. Bygg dina sidor.

   Du kan bygga så många sidor som du vill, men alla följer samma allmänna jQuery-mobilmönster: Skapa en sid div med sidhuvud, innehåll och sidfot. Använd attributet data-roll för att ange rollen för varje div.

4. Namnge var och en av sidsnivåerna med id-attributet.

   Eftersom användaren bläddrar igenom sidorna behöver varje sida någon typ av identifierare. Ge varje sida ett unikt ID-attribut.

5. Bygg knappar inuti huvudet.

   Den enda riktigt nya delen av det här exemplet (bortsett från sidbladet) är knapparna i rubrikerna. Gå vidare till sidan 2-rubriken, så ser du något riktigt intressant:

   prev
   
   Sida Two
   next
   

   Om du definierar en länk inuti ett element med huvuddatadelrollen, den länken kommer automatiskt att bli en knapp. Dessutom kommer den första länken som definieras automatiskt att placeras till vänster om rubriken och den andra kommer att placeras till höger.

6. Knappa en enda knapp till höger.

   Om du vill att en knapp ska vara till höger lägger du till en klass på knappen:

   
   Sida One
   next
   

7. Använd inre ankare för att hoppa över sidor.

   Ta en titt på webbadresserna i alla knapparna. De börjar med en hash, vilket indikerar en intern länk inuti dokumentet. Kom ihåg, men det känns som tre olika sidor till användaren, det är verkligen en stor webbsida.

8. Experimentera med övergångar.

   Se noga på knappen på sidan tre:

   Gå till index
   

   Den här knappen har en särskild dataövergångsattribut. Som standard byter mobilsidor med en blekning. Du kan ställa in övergången till bildspel, bildspel, glidning, pop, blekna eller flip. Du kan också vända övergången genom att lägga till ett annat attribut: data-direction = "reverse".