Non molto tempo fa, il team di jQuery ha rilasciato jQuery Mobile 1.2. Questa nuova versione ha delle modifiche fantastiche! In questo articolo, esamineremo alcuni dei nuovi widget disponibili per gli sviluppatori, daremo un'occhiata alle modifiche apportate ai widget esistenti e daremo un'occhiata ad alcuni miglioramenti di impatto che potrebbero influire sull'applicazione jQuery Mobile. Iniziamo, dobbiamo?

Innanzitutto, dovremo scaricare i bit e i byte. Vai alla pagina di download di jQuery Mobile e scarica l'opzione più adatta alle tue esigenze. In alternativa, è sufficiente utilizzare il codice boilerplate fornito di seguito.

Inoltre, ora potrebbe essere il momento giusto per discutere rapidamente del Download Builder che il team di jQuery Mobile sta creando. È ancora in Alpha, ma ti permette di personalizzare il tuo download per includere solo le parti di jQuery Mobile che ti servono e nient'altro. Puoi escludere eventi specifici, transizioni, elementi di moduli o widget di cui non ti interessa. È pensato per gli sviluppatori che sono estremamente interessati a cogliere il massimo livello di prestazioni dalla propria applicazione.

---

widget

Il cuore pulsante di qualsiasi applicazione jQuery Mobile sono i suoi widget. Probabilmente sono la parte più visibile della pagina e la parte che consente agli utenti di interagire con la pagina in modo così semplice. Il team di jQuery Mobile ha dedicato innumerevoli ore a testare, costruire e rifinire i propri widget per assicurarsi che siano il meglio che possono essere. Nella versione 1.2, il team l'ha davvero buttato fuori dal parco con un widget che gli sviluppatori chiedevano da quando il framework è stato rilasciato per la prima volta: popup modals.

popup

Una modal popup è una piccola sezione della pagina che si sovrappone ad altre parti della pagina. Solitamente sono usati come tooltip, o per visualizzare foto, mappe e contenuti aggiuntivi. Questa informazione di solito non è abbastanza importante da giustificare un'altra pagina, ma è comunque importante aver bisogno di essere visualizzata da sola. Il modo in cui jQuery Mobile 1.2 ha implementato i popup è perfetto. Impariamo quanto è facile aggiungere popup a un progetto.

Una breve nota, per brevità: tutti i seguenti esempi di codice utilizzeranno il seguente codice HTML. I file jQuery Mobile CSS e JS (incluso jQuery) sono hotlinked utilizzando il jQuery CDN per comodità dell'utente.

L'aggiunta di un popup a una pagina nell'applicazione è una procedura in due passaggi. Innanzitutto avrai bisogno di un mezzo per attivare il popup. Questo è generalmente un collegamento, un pulsante o qualcosa con cui l'utente interagisce. Per attivare l'elemento, aggiungiamo il seguente attributo:

Dati-rel = "pop-up"

In secondo luogo, è necessario che il contenuto sia visualizzato. Questo potrebbe variare da un singolo div a a menu, un modulo, o anche foto. L'elemento di contenuto ottiene il proprio attributo:

data-role = "pop-up"

Infine, per i pulsanti di collegamento semplici, il href l'attributo deve corrispondere al id del contenuto da visualizzare. Esaminiamo l'implementazione completa.

Apri popup 
 
Questo è un popup completamente semplice, senza opzioni.
 

Quello che vedrai nella pagina dovrebbe apparire simile a questo:

Tooltips

Ora che sai come creare un popup, diamo un'occhiata ad altre possibilità. Un uso comune è un suggerimento; testo di aiuto o testo espanso mostrato quando un utente fa clic su un pulsante. Imposta il codice come prima:

Scopri di più 
 
Hai scoperto di più!.
 

Questa volta, stiamo stilando il contenuto risultante usando il e campione da jQuery Mobile per dargli un aspetto più gradevole. Questo ci aiuta a ricordare che i popup sono cittadini jQuery Mobile di prima classe e possono essere trattati come qualsiasi altro nella pagina.

menu

Passiamo a qualcosa di un po 'più complicato: un menu. Questo è un approccio popolare alla navigazione della pagina. Dare all'utente un menu a portata di mano. Che aspetto ha questo con i popup?

Menu 
 
 
Il mio menu
 
Unlinked
 
connesso
 
Conteggio42
 
 

E l'output risultante dovrebbe assomigliare a questo:

Puoi anche usare gli elenchi comprimibili di 1.2 nei popup. Ecco un rapido esempio:

Menu annidato 
 
 
 
Colori
 
 
Rosso
 
Blu
 
 
 
 
forme
 
 
Cerchio
 
Piazza
 
 
 
 

E i risultati:

Vale la pena notare questo Dati-inserto = "true" è richiesto sul visualizzazione elenco o gli angoli del tuo elenco verranno visualizzati. Prova e vedrai.

Le forme

Un altro approccio UX popolare è quello di mostrare un modulo di login che passa sopra la parte superiore di una pagina. Ora è possibile con i popup di jQuery Mobile. Ecco un semplice modulo nome utente / password.

Accesso 
 
 
Per favore accedi
 Nome utente:  Parola d'ordine:  registrati 
 

Che ti dà:

Per impostazione predefinita, i popup si centrano sull'oggetto che li ha attivati. C'è un attributo opzionale che vedrai nei prossimi tre esempi. Suo Dati-position-to = "finestra" e lo si applica all'elemento che attiva il popup. Prova ad aggiungerlo al Accesso pulsante sopra per vedere cosa succede.

Finestre di dialogo

Una necessità comune per le applicazioni Web è la capacità di interagire con l'utente. Abbiamo appena esaminato un approccio: un modulo di accesso. Ma, a volte, è necessario richiedere all'utente domande. Un dialogo è una soluzione perfetta per questo; e cosa sai, popup hai coperto! Che aspetto ha quel codice? Ecco un semplice esempio:

Dialogo 
 
 
Elimina pagina?
 
 
 
Sei sicuro di voler cancellare questa pagina?
 
Questa azione non può essere annullata.
 No Sì, cancellalo 
 

Nel contenitore di contenuti popup, nota un altro nuovo attributo per il tuo uso: Dati-overlay-theme = "a". Questo attributo è ciò che applica lo sfondo ombreggiato alla finestra di dialogo. È influenzato dal tuo tema, quindi fai attenzione quando lavori con temi creati con ThemeRoller.

Fotografie

Non riesco a contare il numero di volte in cui ho visto gli sviluppatori di jQuery Mobile chiedere un modo migliore di gestire le gallerie di immagini. Sebbene i popup non siano la soluzione perfetta per un gran numero di immagini, sono perfetti per una manciata di immagini che devono essere visualizzate più grandi. Ancora meglio, è incredibilmente facile; controlla:

Foto 
 Vicino 

Il codice sopra ti offre una foto elegante centrata sulla finestra, incluso un pulsante di chiusura della finestra.

Come hanno fatto? Nel contesto di un popup, il ancora il tag ha attributi che si comportano in modo leggermente diverso rispetto a quando sono utilizzati in altre posizioni della pagina. In particolare, il ui-btn-destra la classe posiziona l'immagine nell'angolo dell'immagine piuttosto che il lato, mentre il Dati-icon e data-iconpos gli attributi ti consentono di applicare uno stile al pulsante proprio come faresti con un normale pulsante.

Puoi diventare piuttosto fantasioso con i popup che includono, ma non solo, la visualizzazione di video in linea e persino mappe interattive. Controlla la documentazione di jQuery Mobile per i popup e gli iframe.

Viste elenco comprimibili

Un'altra grande novità è la possibilità di combinare insiemi comprimibili con viste elenco. Chiama "Visualizzazioni elenco comprimibile" e hai un nuovo widget in jQuery Mobile 1.2. Come funzionano? Sono contento che tu abbia chiesto. Crea semplicemente una lista che ti piace, quindi avvolgila in un set comprimibile. Le viste dell'elenco comprimibili supportano anche più elenchi, quindi impazzisci!

 
Spice Girl preferita?
 
 
Elegante
 
pauroso
 
Sportivo
 
Bambino
 
Zenzero
 
 

Il codice sopra risulterebbe in questa vista dell'elenco comprimibile:

---

miglioramenti

Oltre ai nuovi tipi di widget, jQuery Mobile 1.2 offre numerosi miglioramenti utili alle funzionalità esistenti. Diamo un'occhiata ad alcuni dei più preziosi.

modifiche al supporto di jQuery

Uno dei maggiori miglioramenti apportati nella versione 1.2 è il supporto aggiunto per jQuery 1.8. Ciò comporta significativi aumenti delle prestazioni sotto forma di Sizzle.js completamente riscritto (il motore di selezione per jQuery), insieme a numerosi altri miglioramenti.

Il compromesso è che il team di jQuery Mobile ha deciso che era giunto il momento di supportare il tramonto per jQuery 1.6. Questo può essere sfortunato per alcune persone che usano ancora versioni precedenti di jQuery, ma è un commercio equo.

Visualizza lista Autodividers

Se hai mai dovuto gestire un elenco di persone, luoghi o cose in continua evoluzione in jQuery Mobile, probabilmente hai dovuto scrivere un codice complicato per visualizzare intestazioni dinamiche di listview. Peccato che tu abbia passato tutto quel tempo, perché il team di jQuery Mobile ha reso facile come far cadere un singolo attributo.

data-autodividers = "true"

Questo trasforma questa lista:

In:

Si noti che questo non gestisce l'ordinamento, il raggruppamento o il filtraggio. Per quel tipo di funzionalità, prova a provare il mio plug-in Tinysort jQuery Mobile.

Liste di sola lettura

jQuery Mobile offre visualizzazioni di elenchi "di sola lettura", ma era difficile dire che non erano cliccabili. La versione 1.2 rimuove il gradiente dell'elenco, rendendo la riga un colore piatto. Questo dovrebbe fornire un segnale visivo migliore ai tuoi utenti.

Aggiustamenti della larghezza migliore sugli elementi del modulo

La versione 1.2 corregge un problema semi-fastidioso con gli elementi del modulo, in cui in alcuni casi non avrebbero occupato l'intera larghezza dell'elemento principale.

Aggiunti dispositivi aggiuntivi

Potresti aver notato che nuovi dispositivi vengono aggiunti quasi ogni giorno. Il team di jQuery Mobile fa del suo meglio per testare il maggior numero possibile di dispositivi. Appena aggiunti all'elenco delle piattaforme di livello A sono i seguenti dispositivi / sistemi operativi / browser: iOS 6, Android 4.1 (Jellybean), Tizen, Firefox per Android e Kindle Fire HD.

---

Elenco completo delle modifiche

Puoi trovare un elenco completo delle modifiche apportate per la versione 1.2 sul blog di jQuery Mobile.

Spero che alcuni di questi miglioramenti contribuiranno a migliorare le tue applicazioni. Ricorda che il team di jQuery Mobile è dalla tua parte! Se vedi qualcosa che ritieni utile, chiedilo: crea un problema nel loro repository Github e suggeriscilo. Meglio ancora, forchetta il loro repo e aggiungi qualche codice tu stesso!