Hvordan man bygger et flersidet mobildokument for HTML5 og CSS3 programmering - dummies

Det er flott å kunne samle en HTML5 og CSS3-nettside så det passer på en mobil enhet, men selvsagt hvis siden er mindre, trenger du flere av dem. Mobilapper bruker ofte en sidebladet metafor for å pakke flere data i et lite skjermområde, og jQuery mobilbibliotek har et annet flott verktøy for å gjøre det enkelt.

Så langt ser denne applikasjonen ut som de andre jQuery-mobilappene du har sett så langt. En ting er annerledes, og det er knappen i overskriften. Det er veldig vanlig at mobilapper har navigasjonsknapper i overskriften. Trykk på Neste-knappen.

Etter en skarp fadingovergang vises neste side. Denne har to knapper i overskriften. Ved å trykke Neste igjen tar brukeren til den tredje siden.

Den tredje siden er igjen veldig kjent, men denne gangen har den en enkelt knapp til venstre for toppteksten, og en annen knapp i hovedinnholdsområdet.

Det interessante med disse tre sidene er at de ikke er tre sider i det hele tatt! Det er bare en side, designet for å fungere som tre forskjellige sider. Det er et par fordeler med dette arrangementet.

• CSS og JavaScript-ressurser trenger bare å lastes én gang: Dette holder systemet konsekvent og forbedrer belastningstiden litt.

• Det er ingen lagringstid: Når dokumentet laster, er hele greia i minnet, selv om bare en del er synlig om gangen. Dette gjør at du raskt kan flytte mellom sider uten å måtte vente på servertilgang.

Du vil normalt implementere denne typen mekanisme når du har en stor side du vil behandle som flere mindre sider, slik at brukeren ikke trenger å rulle.

Her er koden for multiPage. html i sin helhet.

flersidige. html #foot {font-size: 75%; font-style: kursiv; tekst-align: center;} pre {margin-left: auto; margin-høyre: auto; bakgrunnsfarge: hvit; bredde: 8em;}


Side One
next
Dette er indeksen

side 1
side 2
side 3
fra HTML All in One for Dummies prev


Side To
neste
Den andre siden er som den første, bortsett fra at den ikke er den første, og den har tekst i stedet for knapper. Det er den andre siden. Hvis du liker den første, antar jeg at du kan gå tilbake, men du burde virkelig gå til neste side, fordi jeg hører det er veldig fint.
fra HTML Alt i One for Dummies prev

Side Tre
3333333 3 3 3 33333 3 3 3 3333333

Gå til indeksen
fra HTML All in One for Dummies

Mens koden for dette eksemplet er lang, bryter det ikke mye nytt grunnlag.

1. Last opp jQuery-mobilinnholdet.

   Trekk inn nødvendige CSS- og JavaScript-filer fra jQuery. com nettsted.

2. Bruk ditt eget CSS.

   Selv om du er "låne" CSS-kode fra jQuery, kan du fortsatt legge til din egen. Du kan legge til CSS for å gjøre footer og pre-elementene fungerer som du vil.

3. Bygg sidene dine.

   Du kan bygge så mange sider som du vil, men de følger det samme generelle jQuery-mobilmønsteret: Lag en side div med topptekst, innhold og bunntekst-divs. Bruk data-rollattributtet til å angi hvilken rolle hver div har.

4. Navn på hver side på divisjonsnivå med id-attributtet.

   Siden brukeren skal bla gjennom sidene, trenger hver side en slags identifikator. Gi hver side et unikt idattributt.

5. Bygg knapper inne i toppene.

   Den eneste helt nye delen av dette eksemplet (bortsett fra sideblinkingen) er knappene i topptekstene. Gå videre til siden 2-overskriften, og du vil se noe som er veldig interessant:

   prev
   
   
   Side To
   neste
   

   Hvis du definerer en lenke inne i et element med header data-rollen, vil automatisk bli en knapp. Videre vil den første sliktte lenken automatisk bli plassert til venstre for toppteksten, og den andre vil bli plassert til høyre.

6. Tvinge en enkelt knapp til høyre.

   Hvis du vil ha en knapp til høyre, legger du til en klasse på knappen:

   
   
   Side One
   neste
   

7. Bruk interne ankre til å hoppe over mellom sider.

   Ta en titt på nettadressene i alle knappene. De begynner med en hash, som indikerer en intern lenke inne i dokumentet. Husk, selv om dette føles som tre forskjellige sider til brukeren, er det egentlig en stor webside.

8. Eksperiment med overganger.

   Se nøye på knappen på side tre:

   Gå til indeksen
   

   Denne knappen har en spesiell datatilpassingsattributt. Som standard bytter mobilsider med en fade. Du kan angi overgangen til lysbilde, lysbildefremvisning, skyvevisning, pop, fade eller flip. Du kan også reversere overgangen ved å legge til et annet attributt: data-direction = "reverse".