Share
La versione ufficiale di jQuery Mobile 1.0 è stata recentemente annunciata e questo tutorial ti fornirà una panoramica di come questo framework popolare può aiutarti nello sviluppo di app multipiattaforma e web based!
jQuery Mobile è un'estensione del popolare framework jQuery JavaScript. Come suggerisce il nome, si tratta di un'implementazione specificamente orientata verso i dispositivi mobili, e nell'ultimo anno ha fatto molta strada. Ora è uno dei framework più diffusi per lo sviluppo di applicazioni basate sul web su dispositivi mobili. Oltre a fornire un'ottima soluzione per le app standalone basate sul Web, è spesso inclusa in un SDK come PhoneGap per servire come componente essenziale per molte applicazioni native.
Il team dietro a jQuery Mobile ha lavorato duramente per ottenere il framework dove è oggi, e negli ultimi tre mesi lo ha preso in modo specifico da una versione beta a una versione ufficiale.
Diamo un'occhiata ad alcune delle funzionalità offerte da jQuery Mobile in modo che tu possa vedere solo rapidamente è possibile configurare un'applicazione di base con questa grande soluzione!
Prima di iniziare, dobbiamo assicurarci di avere un paio di cose nel posto giusto. Per prima cosa, dobbiamo assicurarci che stiamo impostando il viewport per il nostro dispositivo usando il meta etichetta.
Quindi, solo per poterlo utilizzare come home page su iOS, possiamo impostare il meta tag per app-grado.
I meta tag di cui sopra non sono strettamente necessari, ma penso che siano spesso una buona idea.
Successivamente dobbiamo includere CSS e Javascript per jQuery Mobile. Al momento, useremo il CSS predefinito, anche se in seguito discuteremo di separare la struttura dallo stile. Per JavaScript, dobbiamo assicurarci di includere la versione 1.6.4 di jQuery e jQuery mobile 1.0. jQuery è una dipendenza di jQuery Mobile, quindi devi prima includere la libreria principale. Al momento della stesura di questo documento, l'ultima versione di jQuery Core è 1.7, ma jQuery Mobile offre attualmente solo il supporto per 1.6.4. Tuttavia, secondo il team responsabile del progetto, il supporto per 1.7 arriverà presto!
Ora possiamo spostarci nel corpo del documento e creare la struttura tipica di una pagina. jQuery Mobile utilizza HTML5 dati- atrribuire per assegnare comportamenti specifici agli elementi, Dati-ruolo essendo il più popolare in quanto definisce il ruolo degli elementi all'interno dell'applicazione. Aggiungi l'attributo data-role = "pagina" al tuo primo elemento nella pagina.
Non deve essere un div, può essere una sezione se preferibile, ma il risultato finale è lo stesso - avrai creato la tua prima pagina con jQuery Mobile.
Per ora, puoi costruire la tua pagina usando solo il Dati-ruolo attributi. Puoi usare Dati-role = "header" e data-role = "footer" per l'intestazione e il piè di pagina rispettivamente, e data-role = "content" per il contenuto principale del corpo.
jQuery Mobile Page L'intestazione
Questo è un modello di pagina unica che puoi copiare per creare la tua prima pagina jQuery Mobile. Ogni link o modulo da qui tirerà una nuova pagina in via Ajax per supportare le transizioni delle pagine animate.
Basta vedere la fonte e copiare il codice per iniziare. Tutti i CSS e JS sono collegati alle versioni di CDN di jQuery, quindi è semplicissimo da configurare. Ricorda di includere un tag meta viewport in testa per impostare il livello di zoom.
Questo modello è un documento HTML standard con all'interno un singolo contenitore "pagina", a differenza di un modello multipagina con più pagine al suo interno. Ti consigliamo vivamente di creare il tuo sito o la tua app come una serie di pagine separate come questa perché è più pulito, più leggero e funziona meglio senza JavaScript.
La tua app dovrebbe essere simile alla seguente.
E il codice completo per questo è qui sotto:
Modello di pagina singola L'intestazione
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet odio ipsum, non volutpat sapien. Sed consequat gravida eros, vitae convallis dui rutrum in. Curabitur ipsum leo, pulvinar tincidunt sodales vel, lobortis a massa. Pellentesque eget molestie mauris. Mauris aliquam dui rutrum in. Curabitur ipsum leo, pulvinar tincidunt sodales vel, lobortis a massa. Pellentesque eget molestie mauris. Mauris aliquam dui rutrum in. Curabitur ipsum leo, pulvinar tincidunt sodales vel, lobortis a massa. Pellentesque eget molestie mauris. Mauris aliquam dui rutrum in. Curabitur ipsum leo, pulvinar
Il piè di pagina
Ora questo è abbastanza semplice per quanto riguarda le app Web, ma è un inizio. Tutto con jQuery Mobile può essere fatto abbastanza rapidamente, ed è superbo sia per lo sviluppo rapido di un prototipo che per lo sviluppo di app complete.
Ovviamente, l'utilizzo di un'intera libreria per un'app a singola pagina è un po 'eccessivo, quindi iniziamo a occuparci delle cose carine e aggiungiamo alcune pagine alla nostra app.
È possibile aggiungere due ulteriori div contenitori dopo il tag di chiusura del div con data-role = "content" e data-role = "pagina", ma il ruolo dei dati della pagina dovrebbe avere l'attributo id impostato su "two" e "three" rispettivamente. Sono sicuro che vedi dove stiamo andando con questo, quindi vai avanti e aggiungi un ID di "uno" anche alla nostra prima pagina. Aggiungi intestazioni, contenuti e piè di pagina alle pagine aggiuntive come desiderato.
Il codice aggiuntivo dovrebbe apparire come il seguente:
L'intestazione
Questa è la seconda pagina
Il piè di pagina
L'intestazione
Questo è il contenuto della terza pagina
Il piè di pagina
Se controlli la tua app ora, non vedrai alcuna differenza. Questo perché dobbiamo andare avanti e collegarci a quelle pagine dalla prima pagina prima che vengano visualizzate. Aggiungi alcuni collegamenti arbitrari nella prima pagina, in questo modo:
Pagina Due Pagina
Se apri il primo link alla seconda pagina, vedrai la tua prima animazione di paging, ma al momento non c'è modo di tornare alla prima pagina. Vai avanti e aggiungi un link alle pagine due e tre per tornare alla prima pagina.
Tutto dovrebbe essere paging bene avanti e indietro ora. Dolce!
Ora, in questo momento i nostri link sono un po 'noiosi, ma senza troppi sforzi possiamo andare avanti e cambiarli con alcuni bei pulsanti.
Se si aggiunge l'attributo data-role = "button" ai collegamenti in ciascuna pagina e aggiorna la tua app, ora dovresti avere dei pulsanti dall'aspetto piacevole.
Al momento, la nostra pagina funziona bene e siamo in grado di navigare tra un paio di pagine, ma tutto sembra un po 'noioso. Per fortuna, jQuery Mobile è fornito in bundle con temi. Questi temi consentono allo sviluppatore di cambiare molto rapidamente i colori e l'aspetto generale dell'app. Questo è fatto dal Dati-tema attributo. Vai avanti e aggiungi Dati-theme = "a", Dati-theme = "b" e Dati-theme = "a" a ciascuna delle div di pagina che abbiamo creato sopra. Aggiorna la tua app e vedrai cosa è successo. Ciascuna delle tue pagine dovrebbe apparire leggermente diversa!
Fino a poco tempo fa, l'unico modo per creare il proprio tema personalizzato era includere un foglio di stile aggiuntivo e sovrascrivere il CSS importato con il jQuery CSS. Fortunatamente, quando il secondo Candidato di rilascio per jQuery Mobile è uscito a ottobre, il foglio di stile è stato separato in due parti separate, facendo spazio al ThemeRoller appena rilasciato. Il primo foglio di stile si occupa della struttura dell'applicazione e il secondo gestirà tutto il tema per l'app.
Vai alla pagina del Tema del rullo e verrai accolto dalla schermata seguente:
Sul lato sinistro, hai le impostazioni del tema. Puoi scegliere di filtrare ciascuna delle sezioni una alla volta e regolare ciò che vuoi, oppure, come mi piace fare, andare avanti e trascinare i colori dall'alto per modellare quello che vuoi, e quindi affinare la selezione usando il menu laterale. Puoi creare i tuoi temi, con un massimo di 26, e quindi scaricare il file del tema da utilizzare all'interno dell'applicazione.
Quando si scarica il file ZIP e si estrae il suo contenuto, si avrà un index.html file che contiene alcuni stili di base e una conferma che il tuo foglio di stile è stato scaricato correttamente. Avrai quindi una cartella di temi e all'interno troverai una cartella di immagini e due fogli di stile con il nome che hai dato al tema all'esportazione. Esiste una versione minificata per la produzione o una versione completa per tutte le modifiche che potresti voler realizzare.
Ora, quando inizi il tuo progetto mobile, includi semplicemente questo foglio di stile Theme Roller piuttosto che il tema predefinito CSS.
jQuery Mobile
Ora, quando accedi ai campioni che hai creato attraverso il solito modo con jQuery Mobile in alto impostando il Dati-tema attributo, ti riferirai al CSS del Roller temi che hai creato al posto dei default.
jQuery Mobile L'intestazione
Il contenuto della pagina va qui.
Il piè di pagina
È possibile aggiungere il Dati-tema attributo a qualsiasi elemento della pagina. Se lo aggiungi al div con il data-role = "pagina" elemento, quindi quel tema si applica a tutti gli elementi all'interno di quella pagina. Probabilmente non andrai fino a 26 campioni diversi, ma molto probabilmente utilizzerai 3 o 4 campioni diversi per ottenere un bel mix di colori diversi nella tua applicazione. Gioca con il ThemeRoller, ci sono molte più opzioni del semplice trascinamento e rilascio dei colori di default! È possibile regolare i gradienti, eliminare le ombre e persino modificare la luminosità e la saturazione dei colori.
Negli ultimi tre rilasci RC, ci sono state alcune aggiunte significative al framework, quindi se stai ancora usando una delle versioni beta o semplicemente non sai che RC1, RC2 o RC3 sono stati rilasciati, quanto segue è un po ' recuperare i cambiamenti.
RC1 ha introdotto alcuni ritocchi di design nei Collapsibles, rimuovendo lo stile del pulsante extra attorno all'icona +/- e aggiungendo la capacità al contenitore del contenuto collassabile. Aggiungere l'attributo -Contenuto dei dati-tema al contenitore collassabile ha anche squadrato gli angoli dell'intestazione in basso, conferendo all'estetica del contenitore un'estetica più fluida.
Se vuoi iniziare con i materiali collassabili, ecco il codice di base. Quanto segue ti darà un singolo contenitore pieghevole:
Intestazione nella barra del titolo
Contenuto all'interno del contenitore pieghevole.
Se vuoi raggruppare insieme un gruppo di contenitori collassabili e ottenere l'effetto accorrdion popolare, tutto ciò che devi fare è avvolgere un gruppo di contenitori pieghevoli in un wrapper div con il ruolo dei dati di pieghevole-set.
Le opzioni fisse per la posizione di iOS 5 sono state migliorate dalla versione beta con questo RC, ma erano ancora disattivate per impostazione predefinita. Per utilizzare questa funzione dovrai applicare l'override quando il mobileinit l'evento è attivato. Per impostazione predefinita, jQuery Mobile applica alcuni miglioramenti del markup quando viene caricato e viene caricato in precedenza document.ready incendi. Fortunatamente, una delle grandi cose di jQuery Mobile è che le impostazioni sono facilmente configurabili usando jQuery $ .extend metodo e vincolante per il mobileinit evento. Assicurarsi che il file di script contenente le opzioni siano inclusi dopo jQuery, ma prima di jQuery Mobile. Per fare ciò, il tuo codice sarà simile a quanto segue:
Accentsconagua
$ (document) .bind ("mobileinit", function () $ .extend ($. mobile, touchOverflowEnabled: true);); Ci sono un sacco di opzioni configurabili che puoi leggere qui. Alcuni di quelli che ho usato regolarmente sono:
loadingMessage che è una stringa e per impostazione predefinita è impostata su "caricamento". pageLoadErrorMessage di nuovo è una stringa e per impostazione predefinita è impostata su "Errore durante il caricamento della pagina". defaultPageTransition è una stringa e per impostazione predefinita è impostata su "slide". RC2 è stato rilanciato a metà ottobre e acquistato insieme ad alcuni buoni cambiamenti chiave. Ci sono state aggiunte al supporto HTML5 per i tipi di input inclusi tempo, Data e colore. Questo era solo assicurando che quegli elementi fossero in stile quando appaiono sulla pagina. È stata introdotta la possibilità di avere selezioni personalizzate come parte di un gruppo, in modo che risultassero più integrate. Se avvolgi il tuo fieldset in un div con il data-role = "controllo alimentati" attributo, i tuoi campi appariranno raggruppati in un unico modulo. Aggiunta Dati-type = "orizzontale" li raggrupperà orizzontalmente.
Uno dei più grandi cambiamenti nell'ultima versione era la separazione dei fogli di stile per il tema e la struttura. Un tempo era che avresti incluso un foglio di stile da jQuery che includeva tutti i CSS strutturati e gli stili per i diversi temi. Se si desidera aggiungere la personalizzazione al CSS, è necessario disporre di un proprio foglio di lavoro che sostituisca quello già impostato. Ovviamente, dato che stiamo sviluppando per dispositivi mobili e la larghezza di banda è importante, la struttura e i fogli di stile dei temi sono stati ora separati.
Ci sono state altre aggiunte e correzioni di bug, tra cui la creazione di moduli 100% di larghezza per impostazione predefinita, finestre di dialogo con larghezza massima e una nuova classe di supporto per nascondere gli elementi in un modo in modo che possano essere ancora accessibili da tecnologie di supporto come gli screen reader. Controlla le note di rilascio e il registro delle modifiche per tutti i dettagli.
Il rilascio di RC3 è stato uno shock per alcuni il 13 novembre, in quanto il team aveva dichiarato che la versione ufficiale 1.0 sarebbe arrivata subito dopo RC2. RC3 ne è valsa la pena, dato che sono stati apportati molti miglioramenti alle prestazioni, il team voleva solo assicurarsi che il codice funzionasse correttamente prima di distribuire la versione finale. Puoi leggere la versione RC3 qui e la prima cosa che noterai sono i miglioramenti delle prestazioni. C'erano anche alcune nuove aggiunte:
Ora puoi impostare linkBindingEnabled a false (true per impostazione predefinita) se si desidera gestire tutti gli eventi di clic con un'altra libreria o utilizzando un codice personalizzato. Puoi anche modellare la sovrapposizione che appare con il dialogo impostando Dati-overlay-tema sul wrapper della pagina di sovrapposizione o sul modulo di selezione.
Infine, la documentazione ha ottenuto una revisione necessaria ed è stata aggiornata con demo di tutte le funzionalità, alcuni suggerimenti per iniziare e alcuni suggerimenti sulla creazione di app jQuery insieme a PhoneGap che possono essere trovati qui.
jQuery Mobile ha fatto molta strada negli ultimi mesi, per non parlare dello scorso anno, e se è qualcosa di simile alla sua biblioteca principale, diventerà la scelta numero uno per molti sviluppatori di dedicarsi direttamente alla creazione di app web mobili. La curva di apprendimento è molto meno di una soluzione come SenchaTouch o Titanium Mobile e, a mio parere, ciò farà sì che l'adozione salga alle stelle. ThemeRoller e le opzioni di configurazione globali offrono anche un livello di personalizzazione così facile da usare che anche il più amato dei programmatori dovrebbe trovarlo rapido da raccogliere e iniziare con temi personalizzati.
Ci sono alcune cose che sono sicuro che tutti vorremmo vedere aggiunte, e nel tempo - proprio come con jQuery - non ho dubbi che verranno apportati ulteriori miglioramenti. Vi esorto ad andare a controllare jQuery Mobile se non lo avete ancora fatto, e se state usando una versione precedente di esso, assicuratevi di controllare il registro delle modifiche per le note di rilascio per ogni versione in cui vi trovate prima di aggiornare.
Ti terremo sicuramente aggiornato su Mobiletuts + man mano che jQuery Mobile progredisce, ma se desideri vedere altri suggerimenti e tutorial su jQuery Mobile, faccelo sapere nei commenti!
