Come creare una pagina jQuery Mobile di base per la programmazione HTML5 e CSS3 - manichini

C'è un approccio molto popolare tra i programmatori HTML5 e CSS3 per creare siti Web ottimizzati per dispositivi mobili con AJAX, e cioè utilizzare una libreria aggiuntiva su jQuery chiamato jQuery Mobile . Jquery Mobile è una potente combinazione di codice JavaScript e CSS costruita sulla parte superiore della libreria.

La libreria jQuery funziona prendendo una normale pagina HTML5 e modificandola in modo da emulare un aspetto e un aspetto nativi. Il codice assomiglia molto all'HTML ordinario:

Demo mobile

Demo JQuery Mobile
Sito Web jQuery Mobile

Questa è una lista ordinaria
Codificata per apparire come
una lista mobile

da > HTML All in One for Dummies Alcuni dettagli trasformano questa pagina in una meraviglia mobile:

Include il jQuery Mobile CSS.

1. Questo è un file CSS speciale progettato per trasformare elementi HTML nelle loro controparti mobili. Sebbene tu possa scaricarlo da solo, la maggior parte degli sviluppatori si collega direttamente al sito jQuery.

   Include la libreria jQuery standard.

2. Gran parte del codice è basato su jQuery, quindi integra anche la libreria jQuery. Ancora una volta, è necessario estrarre jQuery dal sito Web principale di jQuery.

   Incorporare la libreria mobile jQuery.

3. Questa è una libreria JavaScript che estende la libreria per aggiungere un nuovo comportamento specifico per i dispositivi mobili.

   Aggiungi un attributo data-role = "page" al div principale.

4. Crea un div principale nella tua pagina e forniscici l'attributo. Questo è un attributo di ruolo dati personalizzato aggiunto da jQuery mobile. jQuery controlla i ruoli dei dati dei vari elementi e applica automaticamente modifiche di stile e comportamento a questi elementi. Assegna il tuo div principale alla pagina dei ruoli dei dati. Questo dice al browser di trattare l'intero div come una pagina.

   Specifica un tema di dati.

5. È possibile applicare un tema dati a qualsiasi elemento, ma si applica quasi sempre un tema alla pagina. jquery mobile è dotato di una serie di temi predefiniti incorporati, chiamati "a" a "e". "Prova a trovare quello che ti piace, oppure puoi costruirlo da solo con la speciale versione mobile di ThemeRoller.

   Aggiungi altre div nella tua pagina.

6. Aggiungi altre div al tuo div di pagina. Generalmente avrai tre: intestazione, contenuto e piè di pagina.

   Specifica l'intestazione div con data-role = "header".

7. Inserendo una qualsiasi delle informazioni di intestazione all'interno di un div con un ruolo di dati "header", stai dicendo a jQuery di trattare questo elemento come un'intestazione mobile e applicare gli stili appropriati. L'intestazione include in genere un tag

   .

   Tipicamente specificherete l'intestazione da correggere con l'attributo data-position = "fixed". Ciò garantisce che l'intestazione rimanga al suo posto se il resto del contenuto viene fatto scorrere, il che è un comportamento tipico in un'applicazione mobile.

   Imposta un div di contenuto.

8. Aggiungi un div con data-role = "content" per impostare l'area di contenuto principale della tua pagina. Tutti gli elementi del corpo principale del tuo sito dovrebbero andare in questo segmento.

   Qualsiasi link può essere convertito in un pulsante.

9. La convenzione standard nelle app Web consiste nel trasformare i collegamenti in pulsanti con un obiettivo più grande dell'input basato sul mouse. È facile convertire qualsiasi link in un pulsante aggiungendo l'attributo data-role = "button" al tag anchor.

   Converti elenchi in visualizzazioni di elenchi mobili.

10. Le liste hanno anche convenzioni speciali nel mondo mobile. È possibile utilizzare l'attributo ruolo dati per trasformare qualsiasi elenco in un elenco.

    Costruisci un piè di pagina.

11. Aggiungi un altro div con il ruolo dei dati impostato a "piè di pagina". Normalmente, il piè di pagina (come l'intestazione) viene fissato con l'attributo posizione dati.