Crea un sito web per dispositivi mobili con jQuery Mobile

Contenuto

• Come codificare più pagine in un unico file HTML
• Descrizione
• Come utilizzare le finestre di dialogo e le transizioni
• Le transizioni che possono essere utilizzate
• Descrizione
• Come creare i pulsanti
• Descrizione
• Come creare una barra di navigazione
• Come codificare l'HTML per una barra di navigazione:
• Come formattare i contenuti con jQuery Mobile
• Gli stili predefiniti utilizzati da jQuery Mobile
• Descrizione
• Come applicare temi agli elementi HTML
• Due modi per applicare un tema:
• Descrizione
• Prospettiva

Questo è un estratto modificato dal Capitolo 15 di HTML5 e CSS3 di Murach di Zak Ruvalcaba e Anne Boehm.

jQuery Mobile è una libreria JavaScript gratuita, open source e multipiattaforma che puoi utilizzare per lo sviluppo di siti Web per dispositivi mobili. Questa libreria ti consente di creare pagine che sembrano le pagine di un'applicazione mobile nativa.

Sebbene jQuery Mobile sia attualmente disponibile come versione beta test, questa versione fornisce già tutte le funzionalità necessarie per lo sviluppo di un eccellente sito Web mobile. Di conseguenza, puoi iniziare a usarlo subito. Puoi anche aspettarti che questa versione venga continuamente migliorata, quindi jQuery Mobile migliorerà solo.

In questo articolo imparerai le tecniche di base per creare le pagine di un sito web per dispositivi mobili. Ciò includerà l'uso di finestre di dialogo, pulsanti e barre di navigazione.

Come codificare più pagine in un unico file HTML

In contrasto con il modo in cui sviluppi le pagine web per un sito web su schermo, jQuery Mobile ti consente di creare più pagine in un unico file HTML. Ciò è illustrato dalla figura 15-7. Qui puoi vedere due pagine di un sito insieme all'HTML per queste pagine. La cosa sorprendente è che entrambe le pagine sono codificate all'interno di un singolo file HTML.

Per ogni pagina, codifichi un elemento div con "page" come valore dell'attributo data-role. Quindi, all'interno di ciascuno di questi elementi div, codifichi gli elementi div per l'intestazione, il contenuto e il piè di pagina di ciascuna pagina. Successivamente, quando viene caricato il file HTML, viene visualizzata la prima pagina nel corpo del file.

Per collegare le pagine nel file HTML, si utilizzano segnaposto come mostrato nella figura 7-11 del capitolo 7. Ad esempio, l'elemento a> nella prima pagina in questo esempio va a "#toobin" quando l'utente tocca il elemento h2 o img codificato come contenuto per questo collegamento. Questo si riferisce all'elemento div con "toobin" come attributo id, il che significa che toccando il collegamento si porta il lettore alla seconda pagina del file.

Sebbene questo esempio mostri solo due pagine, puoi codificare molte pagine all'interno di un singolo file HTML. Ricorda, tuttavia, che tutte le pagine insieme alle loro immagini, JavaScript e file CSS vengono caricate con il singolo file HTML. Di conseguenza, il tempo di caricamento diventerà eccessivo se si memorizzano troppe pagine in un singolo file. Quando ciò accade, puoi dividere le tue pagine in più di un file HTML.

L'HTML per le due pagine nel corpo di un file HTML:

div data-role = "page"> header data-role = "header"> h1> SJV Town Hall / h1> / header> section data-role = "content"> h3> The 2011-2012 Speakers / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> 19 ottobre 2011 / h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>! - GLI ELEMENTI PER IL RESTO DEI RELATORI - -> / section> footer data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "page" id = "toobin"> header data-role = "header"> h1> SJV Town Hall / h1> / header> section data-role = "contenuto"> h3> The Supreme Nine: br> Black Robed Secrets / h3> img src = "images / toobin_court.cnn.webp" alt = "Jeffrey Toobin "> p> Autore del best seller acclamato dalla critica, i> The Nine:! - LA COPIA CONTINUA -> / section> footer data-role =" footer "> h4> © 2011 / h4> / footer> / div>

Descrizione

• Quando usi jQuery Mobile, non devi sviluppare un file HTML separato per ogni pagina. Invece, all'interno dell'elemento body di un singolo file HTML, codifichi un elemento div per ogni pagina con il relativo attributo data-role impostato su "page".
• Per ogni elemento div, si imposta l'attributo id su un valore segnaposto a cui è possibile accedere dagli attributi href negli elementi a> di altre pagine.

Come utilizzare le finestre di dialogo e le transizioni

La Figura 15-8 mostra come creare una finestra di dialogo che si apre quando si tocca un collegamento. Per fare ciò, codifichi la finestra di dialogo proprio come faresti con qualsiasi pagina. Ma nell'elemento a> che va a quella pagina, codifichi un attributo data-rel con "dialog" come suo valore.

Come mostrano gli esempi in questa figura, il file CSS jQuery Mobile formatta una finestra di dialogo in modo diverso rispetto a una normale pagina web. Per impostazione predefinita, una finestra di dialogo avrà uno sfondo scuro con testo bianco in primo piano e l'intestazione e il piè di pagina non copriranno la larghezza della pagina. Una finestra di dialogo avrà anche una "X" nell'intestazione che l'utente deve toccare per tornare alla pagina precedente.

Quando si codifica un elemento a> che va a un'altra pagina o finestra di dialogo, è anche possibile utilizzare l'attributo di transizione dei dati per specificare una delle sei transizioni riepilogate nella tabella di questa figura. Ciascuna di queste transizioni ha lo scopo di imitare un effetto utilizzato da un dispositivo mobile come un iPhone.

Le transizioni che possono essere utilizzate

HTML che apre la pagina come una finestra di dialogo con la transizione "pop":

a href = "# toobin" data-rel = "dialog" data-transition = "pop">

HTML che apre la pagina con la transizione "dissolvenza":

a href = "# toobin" data-transition = "fade">

Descrizione

• L'HTML per un file la finestra di dialogo è codificato nel modo in cui è codificata qualsiasi pagina. Tuttavia, l'elemento a> che si collega alla pagina include l'attributo data-rel con "dialog" come valore. Per chiudere la finestra di dialogo, l'utente tocca la X nell'intestazione della casella.
• Per specificare il modo in cui viene aperta una pagina o una finestra di dialogo, è possibile utilizzare l'attributo di transizione dei dati con uno dei valori nella tabella sopra. Se un dispositivo non supporta la transizione specificata, l'attributo viene ignorato.
• Lo stile per una finestra di dialogo viene eseguito dal file CSS jQuery Mobile.

Come creare i pulsanti

La Figura 15-9 mostra come utilizzare i pulsanti per navigare da una pagina all'altra. Per farlo, devi solo impostare l'attributo data-role per un elemento a> su "button" e jQuery Mobile fa il resto.
Tuttavia, puoi anche impostare alcuni altri attributi per i pulsanti. Se, ad esempio, vuoi che due o più pulsanti appaiano fianco a fianco, come i primi due pulsanti in questa figura, puoi impostare l'attributo data-inline su "true".

Se desideri aggiungere una delle 18 icone fornite da jQuery Mobile a un pulsante, codifica anche l'attributo data-icon. Ad esempio, il terzo pulsante in questo esempio utilizza l'icona "elimina" e il quarto pulsante utilizza l'icona "home". Tutte queste icone assomigliano alle icone che potresti vedere all'interno di un'applicazione mobile nativa. Per inciso, queste icone non sono file separati a cui la pagina deve accedere. Invece, sono forniti dalla libreria jQuery Mobile.

Se desideri raggruppare due o più pulsanti orizzontalmente, come i pulsanti Sì, No e Forse in questa figura, puoi codificare gli elementi a> per i pulsanti all'interno di un elemento div che ha "controlgroup" come attributo data-role e "Orizzontale" come attributo del tipo di dati. Oppure, per raggruppare i pulsanti verticalmente, è possibile modificare l'attributo del tipo di dati in "verticale".

Se si imposta l'attributo data-rel per un pulsante su "back" e l'attributo href sul simbolo cancelletto (#), il pulsante tornerà alla pagina che lo ha chiamato. In altre parole, il pulsante funziona come un pulsante Indietro. Ciò è illustrato dall'ultimo pulsante nel contenuto della pagina.

Gli ultimi due pulsanti mostrano come vengono visualizzati i pulsanti nel piè di pagina di una pagina. Qui, le icone e il testo sono bianchi su sfondo nero. In questo caso, l'attributo class per il piè di pagina è impostato su "ui-bar", che dice a jQuery Mobile che dovrebbe mettere un po 'più di spazio intorno al contenuto del piè di pagina. Imparerai di più a riguardo nella figura 15-12.

L'HTML per i pulsanti nella sezione:

! - Per i pulsanti in linea, imposta l'attributo data-line su true -> a href = "#" data-role = "button" data-inline = "true"> Annulla / a> a href = "#" data -role = "button" data-inline = "true"> OK / a>! - Per aggiungere un'icona a un pulsante, usa l'attributo data-icon -> a href = "#" data-role = "button "data-icon =" delete "> Elimina / a> a href =" # "data-role =" button "data-icon =" home "> Home / a>! - Per raggruppare i pulsanti, utilizza un elemento div con gli attributi che seguono -> div data-role = "controlgroup" data-type = "horizontal"> a href = "#" data-role = "button" data-icon = "check"> Sì / a> a href = "#" data-role = "button" data-icon = "arrow-d"> No / a> a href = "#" data-role = "button"> Forse / a> / div>! - A codifica un pulsante Indietro, imposta l'attributo data-rel su back -> a href = "#" data-role = "button" dat-rel = "back" data-icon = "back"> Torna alla pagina precedente / a >

L'HTML per i pulsanti nel piè di pagina:

footer data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> Aggiungi a Facebook / a> a href = "http: //www.twitter.com "data-role =" button "data-icon =" plus "> Tweet questa pagina / a> / footer>

Descrizione

• Per aggiungere un pulsante a una pagina web, codifichi un elemento a> con il suo attributo data-role impostato su "button".

Come creare una barra di navigazione

La Figura 15-10 mostra come aggiungere una barra di navigazione a una pagina web. Per farlo, codifichi un elemento div con il suo ruolo dati impostato su "navbar". All'interno di questo elemento, codifichi un elemento ul che contiene elementi li che contengono gli elementi a> per gli elementi nella barra di navigazione. Nota, tuttavia, che non codifichi l'attributo data-role per gli elementi a>.

Per cambiare il colore degli elementi nella barra di navigazione, il codice in questo esempio include l'attributo data-theme-b per ogni articolo. Di conseguenza, jQuery Mobile cambia il colore di sfondo di ogni elemento da nero, che è l'impostazione predefinita, a un attraente blu. Inoltre, questo codice imposta l'attributo di classe per il pulsante attivo su "ui-btn-active", quindi jQuery Mobile cambia il colore del pulsante attivo in un blu più chiaro. Questo mostra come puoi modificare la formattazione utilizzata da jQuery Mobile e imparerai di più a riguardo in seguito.

L'HTML per la barra di navigazione:

header data-role = "header"> h1> SJV Town Hall / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-theme = "b "> Home / a> / li> li> a href =" # speakers "data-icon =" star "data-theme =" b "> Speakers / a> / li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> Contattaci / a> / li> / ul> / div> / header>

Come codificare l'HTML per una barra di navigazione:

• Codifica un elemento div all'interno dell'elemento header. Quindi, imposta l'attributo data-role per l'elemento div su "navbar".
• All'interno dell'elemento div, codifica un elemento ul che contiene un elemento li per ogni collegamento.
• All'interno di ogni elemento li, codifica un elemento a> con un attributo href che utilizza un segnaposto per la pagina a cui deve andare il collegamento. Quindi, imposta l'attributo data-icon sull'icona di tua scelta.
• Per l'elemento attivo nella barra di navigazione, imposta l'attributo class su "ui-btn-active".Quindi, il colore di questo elemento sarà più chiaro rispetto agli altri elementi nella barra di navigazione.
• È inoltre necessario utilizzare l'attributo data-theme per applicare un tema jQuery Mobile a ciascun elemento nella barra di navigazione. In caso contrario, i pulsanti nella barra saranno dello stesso colore del resto dell'intestazione. Per ulteriori informazioni sull'applicazione dei temi, vedere la figura 15-12.

Come formattare i contenuti con jQuery Mobile

Come hai già visto, jQuery Mobile formatta automaticamente i componenti di una pagina web in base al proprio foglio di stile. Ora imparerai di più su questo, oltre a come regolare lo stile predefinito utilizzato da jQuery Mobile.

Gli stili predefiniti utilizzati da jQuery Mobile

La Figura 15-13 mostra gli stili predefiniti che jQuery Mobile utilizza per gli elementi HTML comuni. Per tutti i suoi stili, jQuery Mobile si basa sul motore di rendering del browser, quindi il suo stile è minimo. Ciò mantiene i tempi di caricamento rapidi e riduce al minimo il sovraccarico che un CSS eccessivo imporrebbe a una pagina.

Come puoi vedere, lo stile di jQuery Mobile è così efficace che non dovresti aver bisogno di modificarne lo stile fornendo il tuo foglio di stile CSS. Ad esempio, la spaziatura tra gli elementi nell'elenco non ordinato e la formattazione della tabella sono entrambe accettabili così come sono. Inoltre, il tipo nero su sfondo grigio è coerente con la formattazione per le applicazioni mobili native.

Descrizione

• Per impostazione predefinita, jQuery Mobile applica automaticamente gli stili agli elementi HTML di una pagina. Questi stili non sono solo attraenti, ma imitano anche gli stili nativi di un browser.
• Per impostazione predefinita, jQuery Mobile applica una piccola quantità di riempimento a sinistra, destra, in alto e in basso di ogni pagina mobile.
• Per impostazione predefinita, i collegamenti sono leggermente più grandi del testo normale. Ciò rende più facile per l'utente toccare i collegamenti.
• Per impostazione predefinita, i collegamenti sono sottolineati con il blu come colore del carattere.

Come applicare temi agli elementi HTML

In alcuni casi, ti consigliamo di modificare gli stili predefiniti utilizzati da jQuery Mobile. Lo avete già visto nella barra di navigazione della figura 15-10. Per modificare gli stili predefiniti, puoi utilizzare i cinque temi forniti da jQuery Mobile. Questi sono riassunti nella figura 15-12. Anche in questo caso, questi temi hanno lo scopo di imitare l'aspetto di un'applicazione mobile nativa.

Un modo per applicare i temi è codificare un attributo del tema dei dati con la lettera del tema come valore. L'hai visto nella barra di navigazione nella figura 15-10, e puoi vederlo nel codice per la seconda barra di navigazione in questa figura. Qui, l'attributo data-theme applica il tema "e" all'intestazione e il tema "d" agli elementi nella barra di navigazione.

L'altro modo per applicare i temi è impostare l'attributo di classe per un elemento su un nome di classe che indica un tema. Ciò è illustrato dal primo esempio dopo la tabella. Qui, l'attributo class viene utilizzato per applicare entrambe le classi "ui-bar" e "ui-bar-b" all'elemento div. Di conseguenza, jQuery Mobile applica prima il suo stile predefinito per una barra all'elemento e quindi applica il tema b a quello stile. Nelle pagine che seguono, vedrai altri esempi di questo tipo di stile.

Si noti che la tabella in questa figura dice di utilizzare il tema e con parsimonia. Questo perché utilizza un colore arancione che funziona bene per accentuare un oggetto, ma non è attraente a grandi dosi. Ciò è illustrato dalla seconda intestazione e dalla barra di navigazione in questa figura, che tende a essere stridente quando la vedi a colori.

In generale, è meglio rimanere con gli stili predefiniti e i primi tre temi, che di solito funzionano bene insieme. Quindi, puoi sperimentare con i temi d ed e quando pensi di aver bisogno di qualcosa di più.

L'HTML per la seconda intestazione e barra di navigazione:

header data-role = "header" data-theme = "e"> h1> SJV Town Hall / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home "data-theme =" d "> Home / a> / li> li> a href =" # speakers "data-icon =" star "data-theme =" d "> Speakers / a> / li> li> a href = "# news" id = "news" data-icon = "grid" data-theme = "d"> News / a> / li> / ul> / div> / header>

I cinque temi di jQuery Mobile:

Due modi per applicare un tema:

Utilizzando un attributo del tema dei dati:

li> a href = "# home" data-icon = "home" data-theme = "b"> Home / a> / li>

Utilizzando un attributo di classe che indica il tema:

div> Bar / div>

Descrizione

• Utilizzando i cinque temi inclusi in jQuery Mobile, è possibile apportare le modifiche appropriate agli stili predefiniti per gli elementi HTML.
• Sebbene tu possa utilizzare il tuo foglio di stile CSS con un'applicazione jQuery Mobile, dovresti evitare di farlo quando possibile.

Prospettiva

L'uso dei dispositivi mobili è aumentato notevolmente negli ultimi anni. Per questo motivo, è diventato sempre più importante progettare siti Web facili da usare da questi dispositivi. Sebbene questo di solito significhi sviluppare un sito web separato, questo può essere un aspetto critico per mantenere la tua presenza su Internet.

Fortunatamente, il compito di costruire un sito web mobile è diventato molto più semplice con l'avvento di jQuery Mobile. Le pagine Web mobili non sono più limitate a pagine statiche che contengono titoli, paragrafi, collegamenti e immagini in miniatura. Con jQuery Mobile, gli sviluppatori Web possono ora creare siti Web ricchi di funzionalità che sembrano applicazioni mobili native.