Cum se construiește un document mobil pentru mai multe pagini pentru programarea HTML5 și CSS3 - dummies

Este minunat să poți găsi o pagină Web HTML5 și CSS3 se potrivește pe un dispozitiv mobil, dar, evident, dacă pagina este mai mică, veți avea nevoie de mai multe dintre ele. Aplicațiile mobile utilizează adesea o metaforă de tip "page-flipping" pentru a împacheta mai multe date într-o mică bucată de ecran imobiliar, iar biblioteca mobilă jQuery are un alt instrument minunat pentru a face acest lucru ușor.

Până în prezent, această aplicație arată la fel ca celelalte aplicații mobile jQuery pe care le-ați văzut până acum. Un lucru este diferit, și acesta este butonul din antet. Este foarte comun pentru aplicațiile mobile să aibă butoane de navigare în antet. Apăsați butonul Următor.

După o tranziție de decolorare, apare următoarea pagină. Acesta are două butoane în antet. Apăsând din nou pe Next, utilizatorul ajunge la a treia pagină.

A treia pagină este din nou foarte familiarizată, dar de data aceasta are un singur buton din partea stângă a antetului și un alt buton din zona de conținut principal.

Lucrul interesant despre aceste trei pagini este că nu sunt deloc trei pagini! Totul este doar o pagină, destinată să acționeze ca trei pagini diferite. Există câteva avantaje pentru acest aranjament.

• Resursele CSS și JavaScript trebuie să fie încărcate o singură dată: Acest lucru menține sistemul consistent și îmbunătățește ușor timpul de încărcare.

• Nu există timp de întârziere: Când documentul se încarcă, totul este în memorie, chiar dacă numai o parte este vizibilă la un moment dat. Acest lucru vă permite să mutați rapid între pagini fără a aștepta accesul la server.

În mod normal, ați pune în aplicare acest tip de mecanism atunci când aveți o pagină mare pe care doriți să o tratați ca mai multe pagini mai mici, astfel încât utilizatorul nu trebuie să deruleze.

Iată codul pentru multipagina. html în întregime.

Multipage. html #foot {font-size: 75%; font-style: italic; text-align: center;} pre {margine-stânga: auto; margin-dreapta: auto; fundal-culoare: alb;

Pagina
pagina 9
Pagina 2
următoarea
A doua pagină este la fel ca prima, cu excepția faptului că nu este prima și are text mai degrabă decât butoane. Este a doua pagină. Dacă vă place primul, cred că vă puteți întoarce, dar ar trebui să mergeți la următoarea pagină, pentru că am auzit că este foarte frumos. din pagina HTML

prev
Pagina 3

3333333 3 3 33333 3 3 3333333
Accesați indexul

din HTML All in One pentru Dummies < În timp ce codul pentru acest exemplu este lung, acesta nu rupe o mulțime de teren nou.

1. Încărcați conținutul mobil jQuery.

   Trageți fișierele CSS și JavaScript necesare din jQuery. com site-ul.

2. Aplicați propriul CSS.

   Chiar dacă "împrumuți" codul CSS de la jQuery, iți mai permite să-ți adaugi propriul. Puteți adăuga CSS pentru a face ca subsolul și pre elemente să funcționeze așa cum doriți.

3. Construiți-vă paginile.

   Aveți posibilitatea să construiți cât mai multe pagini pe care le doriți, dar toate urmează același model mobil jQuery general: Creați o pagină div cu antet, conținut și subsoluri de subsol. Utilizați atributul de date-rol pentru a indica rolul fiecărei div.

4. Denumiți fiecare div de nivel de pagină cu atributul id.

   Deoarece utilizatorul va roti paginile, fiecare pagină are nevoie de un fel de identificator. Dați fiecărei pagini un atribut id unic.

5. Creați butoane în interiorul anteturilor.

   Singura parte cu adevărat nouă a acestui exemplu (în afară de pagina care se învârte) este butoanele din anteturi. Treceți la antetul paginii 2 și veți vedea ceva cu adevărat interesant:

   prev
   
   Pagina 2
   următorul
   

   Dacă definiți o legătură într-un element cu rolul de date antet, acel link va deveni automat un buton. Mai mult, prima definită astfel de legături va fi plasată automat în partea stângă a antetului, iar cea de-a doua va fi plasată la dreapta.

6. forțați un singur buton spre dreapta.

   Dacă doriți ca un buton să fie în partea dreaptă, adăugați o clasă la buton:

   
   Pagina One
   următoare
   

7. Utilizați ancore interne pentru a sări peste pagini.

   Uitați-vă la adresele URL din toate butoanele. Începe cu un hash, care indică o legătură internă în interiorul documentului. Amintiți-vă, deși acest lucru se simte ca trei pagini diferite pentru utilizator, este într-adevăr o singură pagină web mare.

8. Experimentați cu tranziții.

   Consultați cu atenție butonul din pagina a treia:

   Mergeți la index
   

   Acest buton are un atribut special de tranziție a datelor. Implicit, paginile mobile se schimbă cu o decolorare. Puteți seta trecerea la slide, slideshow, slidedown, pop, fade sau flip. De asemenea, puteți inversa tranziția adăugând un alt atribut: direcția de date = "inversă".