Een mobiel document voor meerdere pagina's maken voor HTML5- en CSS3-programmering - dummies

Het is geweldig om een ​​HTML5- en CSS3-webpagina zo te kunnen verkleinen dat het past op een mobiel apparaat, maar natuurlijk, als de pagina kleiner is, heb je er meer nodig. Mobiele apps gebruiken vaak een paginavouwende metafoor om meer gegevens in een klein stukje schermvastgoed te verpakken, en de mobiele bibliotheek van jQuery heeft nog een geweldige tool om dit gemakkelijk te maken.

Tot nu toe lijkt deze applicatie op de andere jQuery mobiele apps die je tot nu toe hebt gezien. Een ding is anders, en dat is de knop in de kop. Het komt vaak voor dat mobiele apps navigatieknoppen in de kop hebben. Druk op de knop Volgende.

Na een handige fade-overgang verschijnt de volgende pagina. Deze heeft twee knoppen in de kop. Door nogmaals op Volgende te drukken, gaat de gebruiker naar de derde pagina.

De derde pagina is weer heel vertrouwd, maar deze keer heeft het een enkele knop aan de linkerkant van de kop en een andere knop in het hoofdgedeelte van de inhoud.

Het interessante aan deze drie pagina's is dat ze helemaal geen drie pagina's zijn! Het is allemaal maar één pagina, ontworpen om te werken als drie verschillende pagina's. Er zijn een paar voordelen aan deze regeling.

• CSS- en JavaScript-bronnen hoeven maar één keer te worden geladen: Dit houdt het systeem consistent en verbetert de laadtijden enigszins.

• Er is geen vertraging: Wanneer het document wordt geladen, bevindt het hele geheugen zich in het geheugen, zelfs als slechts één onderdeel tegelijk zichtbaar is. Hiermee kunt u snel van pagina wisselen zonder op servertoegang te hoeven wachten.

Normaal zou u dit type mechanisme implementeren als u een grote pagina wilt behandelen als meerdere kleinere pagina's, zodat de gebruiker niet hoeft te scrollen.

Hier is de code voor multiPage. html in zijn geheel.

MultiPage. html #foot {font-size: 75%; lettertype-stijl: cursief; text-align: center;} pre {margin-left: auto; marge-rechts: auto; achtergrondkleur: wit; width: 8em;}


Pagina één
volgende
Dit is de index

pagina 1
pagina 2
pagina 3
van HTML All-in-one voor Dummies vorig

Pagina twee
volgende
De tweede pagina lijkt veel op de eerste, behalve dat deze niet de eerste is en tekst bevat in plaats van knoppen. Het is de tweede pagina. Als je de eerste leuk vindt, dan denk ik dat je terug kunt gaan, maar je moet echt naar de volgende pagina gaan, want ik hoor dat het heel leuk is.
van HTML All in One voor Dummies vorig

pagina drie
3333333 3 3 3 33333 3 3 3 3333333

Ga naar index
van HTML All-in-one voor Dummies

Hoewel de code voor dit voorbeeld lang is, is er niet veel nieuwe reden.

1. Laad de mobiele inhoud van jQuery.

   Trek de benodigde CSS- en JavaScript-bestanden uit de jQuery. com site.

2. Pas uw eigen CSS toe.

   Zelfs als u CSS-code "leent" van jQuery, mag u nog steeds uw eigen code toevoegen. U kunt CSS toevoegen om de voettekst en pre-elementen naar eigen inzicht te laten werken.

3. Bouw uw pagina's.

   Je kunt zoveel pagina's maken als je wilt, maar ze volgen allemaal hetzelfde algemene mobiele jQuery-patroon: Maak een pagina-div met header, content en footer divs. Gebruik het kenmerk data-role om de rol van elke div aan te geven.

4. Geef elk van de div-eenheden op paginaniveau een naam met het kenmerk id.

   Omdat de gebruiker door de pagina's bladert, heeft elke pagina een soort ID nodig. Geef elke pagina een uniek id-kenmerk.

5. Bouw knoppen in de headers.

   Het enige echt nieuwe deel van dit voorbeeld (afgezien van het zelf omslaan van de pagina) zijn de knoppen in de kopteksten. Spring vooruit naar de kop van pagina 2 en je zult iets heel interessants zien:

   vorige
   
   pagina twee
   volgende
   

   Als je een link in een element definieert met de kop data-rol, die link wordt automatisch een knop. Bovendien wordt de eerste gedefinieerde koppeling automatisch links van de koptekst geplaatst en de tweede wordt rechts geplaatst.

6. Forceer een enkele knop naar rechts.

   Als u een knop aan de rechterkant wilt toevoegen, voegt u een klasse toe aan de knop:

   
   
   Pagina één
   volgende
   

7. Gebruik interne ankers om tussen pagina's over te slaan.

   Bekijk de URL's in alle knoppen. Ze beginnen met een hash, die een interne link in het document aangeeft. Vergeet niet, hoewel dit voor de gebruiker als drie verschillende pagina's aanvoelt, het is echt allemaal één grote webpagina.

8. Experimenteer met overgangen.

   Kijk goed naar de knop op pagina drie:

   Ga naar index
   

   Deze knop heeft een speciaal kenmerk voor gegevensoverdracht. Mobiele pagina's wisselen standaard met vervagen. U kunt de overgang instellen op dia, slide-up, slidedown, pop, fade of flip. U kunt de overgang ook omkeren door een ander kenmerk toe te voegen: gegevensrichting = "omgekeerd".