Hvordan man opbygger et flersidigt mobildokument til HTML5 og CSS3-programmering - dummies

Det er dejligt at kunne samle en HTML5 og CSS3 webside så den passer på en mobil enhed, men selvfølgelig hvis siden er mindre, skal du have flere af dem. Mobilapps bruger ofte en sidebladende metafor til at pakke flere data i et lille stykke skærm fast ejendom, og jQuery-mobilbiblioteket har et andet vidunderligt redskab til at gøre det nemt.

Hidtil ser denne applikation ligesom de andre jQuery-mobilapps, du har set indtil videre. Én ting er anderledes, og det er knappen i overskriften. Det er meget almindeligt, at mobilapps har navigationsknapper i overskriften. Tryk på knappen Næste.

Efter en nifty fade overgang vises næste side. Denne har to knapper i overskriften. Ved at trykke på Næste tager brugeren igen til den tredje side.

Den tredje side er endnu en gang meget bekendt, men denne gang har den en enkelt knap til venstre for overskriften og en anden knap i hovedindholdsområdet.

Det interessante ved disse tre sider er, at de slet ikke er tre sider! Det er kun en side, der er designet til at fungere som tre forskellige sider. Der er et par fordele ved dette arrangement.

• CSS- og JavaScript-ressourcer skal kun indlæses én gang: Dette holder systemet konsekvent og forbedrer belastningstiden lidt.

• Der er ingen forsinkelsestid: Når dokumentet indlæses, er det hele i hukommelse, selvom kun en del er synlig ad gangen. Dette giver dig mulighed for hurtigt at flytte mellem sider uden at skulle vente på serveradgang.

Du vil normalt implementere denne type mekanisme, når du har en stor side, du vil behandle som flere mindre sider, så brugeren ikke behøver at rulle.

Her er koden til multiPage. html i sin helhed.

flersidet. html #foot {font-size: 75%; skrifttypestil: kursiv tekst-align: center;} pre {margin-left: auto; margin-højre: auto; baggrundsfarve: hvid; bredde: 8em;}


Side One
næste
Dette er indekset

side 1
side 2
side 3
fra HTML Alt i One til Dummies prev


Side To
næste
Den anden side er meget som den første, medmindre den ikke er den første, og den har tekst i stedet for knapper. Det er den anden side. Hvis du kan lide den første, antager jeg, at du kan gå tilbage, men du skal virkelig gå til næste side, fordi jeg hører det er rigtig flot.
fra HTML Alt i One til Dummies prev

Side Tre
3333333 3 3 3 33333 3 3 3 3333333

Gå til indeks
fra HTML Alt i One til Dummies

Mens koden til dette eksempel er lang, bryder den ikke meget ny grund.

1. Indlæs jQuery-mobilt indhold.

   Træk de nødvendige CSS- og JavaScript-filer fra jQuery. com site.

2. Anvend din egen CSS.

   Selvom du "låner" CSS-kode fra jQuery, kan du stadig tilføje din egen. Du kan tilføje CSS for at gøre footer- og preelementerne virker som du vil.

3. Byg dine sider.

   Du kan bygge så mange sider som du vil, men de følger alle de samme generelle jQuery mobile mønstre: Opret en side div med overskrift, indhold og footer-divs. Brug attributten datatrolle til at angive hver divs rolle.

4. Navngiv hver af sidens divider med id-attributten.

   Fordi brugeren skal vende gennem siderne, har hver side brug for en slags identifikator. Giv hver side en unik idattribut.

5. Byg knapper inde i hovedene.

   Den eneste helt nye del af dette eksempel (bortset fra side-flipping selv) er knapperne i overskrifterne. Gå videre til side 2-overskriften, og du vil se noget rigtig interessant:

   prev
   
   
   Side To
   næste
   

   Hvis du definerer et link inde i et element med header data-rollen, bliver automatisk en knap. Desuden vil det første sådanne link defineret automatisk placeres til venstre for overskriften, og det andet vil blive placeret til højre.

6. Tving en enkelt knap til højre.

   Hvis du vil have en knap til højre, skal du tilføje en klasse til knappen:

   
   
   Side One
   næste
   

7. Brug interne ankre til at springe mellem sider.

   Se på webadresserne i alle knapperne. De begynder med en hash, der angiver et internt link inde i dokumentet. Husk, selv om dette føles som tre forskellige sider til brugeren, er det virkelig en stor webside.

8. Eksperiment med overgange.

   Se omhyggeligt på knappen på side tre:

   Gå til indeks
   

   Denne knap har en særlig datatransitionattribut. Som standard bytter mobilsider med en falme. Du kan indstille overgangen til dias, diasshow, slidown, pop, fade eller flip. Du kan også vende overgangen ved at tilføje en anden attribut: data-direction = "reverse".