Come creare un documento mobile multipagina per la programmazione HTML5 e CSS3 - manichini

È fantastico poter abbattere una pagina Web HTML5 e CSS3 in modo da si adatta a un dispositivo mobile, ma ovviamente se la pagina è più piccola, ne avrai bisogno di più. Le app mobili utilizzano spesso una metafora per sfogliare più dati in un piccolo spazio sullo schermo e la libreria mobile di jQuery ha un altro meraviglioso strumento per semplificare le cose.

Finora, questa applicazione ha lo stesso aspetto delle altre app mobili jQuery che hai visto finora. Una cosa è diversa, e questo è il pulsante nell'intestazione. È molto comune che le app mobili abbiano pulsanti di navigazione nell'intestazione. Premi il pulsante Avanti.

Dopo una transizione di dissolvenza elegante, viene visualizzata la pagina successiva. Questo ha due pulsanti nell'intestazione. Premendo di nuovo Avanti porta l'utente alla terza pagina.

La terza pagina è ancora una volta molto familiare, ma questa volta ha un singolo pulsante a sinistra dell'intestazione e un altro pulsante nell'area di contenuto principale.

La cosa interessante di queste tre pagine è che non sono affatto tre pagine! È tutto solo una pagina, progettata per agire come tre pagine diverse. Ci sono un paio di vantaggi a questa disposizione.

• Le risorse CSS e JavaScript devono essere caricate solo una volta: Ciò mantiene il sistema coerente e migliora leggermente i tempi di caricamento.

• Non c'è tempo di ritardo: Quando il documento viene caricato, l'intera operazione è in memoria, anche se solo una parte è visibile alla volta. Ciò consente di spostarsi rapidamente tra le pagine senza dover attendere l'accesso al server.

Normalmente si implementerà questo tipo di meccanismo quando si ha una pagina grande che si desidera trattare come diverse pagine più piccole in modo che l'utente non debba scorrere.

Ecco il codice per multiPage. html nella sua interezza.

multipagina. html #foot {font-size: 75%; stile di carattere: corsivo; text-align: center;} pre {margin-left: auto; margin-right: auto; colore di sfondo: bianco; width: 8em;}

Page One
next
Questo è l'indice

pagina 1
pagina 2
pagina 3
da HTML All in One for Dummies prev


Pagina Due
successiva La seconda pagina è molto simile alla prima, tranne che non è la prima e ha testo anziché pulsanti. È la seconda pagina. Se ti piace il primo, suppongo che tu possa tornare indietro, ma dovresti davvero andare alla pagina successiva, perché sento che è davvero bello.
da HTML All in One for Dummies prev

Pagina Tre
3333333 3 3 3 33333 3 3 3 3333333

Vai all'indice
da HTML All in One for Dummies

Mentre il codice per questo esempio è lungo, non rompe un sacco di novità.

1. Carica il contenuto jQuery per dispositivi mobili.

   Inserisci i file CSS e JavaScript necessari da jQuery. com sito.

2. Applica il tuo CSS.

   Anche se stai "prendendo in prestito" il codice CSS da jQuery, puoi comunque aggiungere il tuo. Puoi aggiungere CSS per far sì che il piè di pagina e gli elementi pre si comportino nel modo desiderato.

3. Crea le tue pagine.

   Puoi costruire tutte le pagine che vuoi, ma tutte seguono lo stesso schema generale di jQuery per dispositivi mobili: crea un div di pagina con div header, content e footer. Utilizzare l'attributo ruolo dati per indicare il ruolo di ciascun div.

4. Assegna un nome a ciascuno dei div di livello pagina con l'attributo id.

   Poiché l'utente sfoglia le pagine, ogni pagina richiede una sorta di identificatore. Assegna a ogni pagina un attributo id univoco.

5. Costruisci pulsanti all'interno delle intestazioni.

   L'unica parte veramente nuova di questo esempio (a parte il page flipping stesso) è i pulsanti nelle intestazioni. Passa all'intestazione della pagina 2 e vedrai qualcosa di veramente interessante:

   precedente
   
   
   Pagina Due
   successivo
   

   Se definisci un collegamento all'interno di un elemento con il ruolo di dati dell'intestazione, quel collegamento diventerà automaticamente un pulsante. Inoltre, il primo collegamento definito verrà automaticamente posizionato a sinistra dell'intestazione e il secondo verrà posizionato a destra.

6. Forza un singolo pulsante a destra.

   Se si desidera che un pulsante sia sulla destra, aggiungere una classe al pulsante:

   
   Pagina uno
   successivo
   

7. Usa ancore interne per saltare tra le pagine.

   Dai un'occhiata agli URL in tutti i pulsanti. Iniziano con un hash, che indica un collegamento interno all'interno del documento. Ricorda, anche se questo sembra tre pagine diverse per l'utente, è davvero tutta una grande pagina web.

8. Esperimento con le transizioni.

   Guarda attentamente il pulsante a pagina tre:

   Vai all'indice
   

   Questo pulsante ha uno speciale attributo di transizione dei dati. Per impostazione predefinita, le pagine mobili si scambiano con una dissolvenza. È possibile impostare la transizione su diapositiva, slide-up, slidingown, pop, fade o flip. Puoi anche invertire la transizione aggiungendo un altro attributo: data-direction = "reverse".