Share
jQuery Mobile è un framework web mobile relativamente nuovo, con la sua prima versione rilasciata nell'ottobre 2010. Il framework ha molte caratteristiche interessanti per supportare lo sviluppo di applicazioni mobili basate sul web. In questo tutorial, ci concentreremo su alcuni elementi di base di jQuery Mobile: struttura della pagina, moduli e invio di moduli Ajax. Il tutorial è basato sulla versione 1.0 alpha release 2 del framework jQuery Mobile.
Come parte del tutorial scriveremo una piccola applicazione B2C. Una società di spedizioni di pacchi ha un modulo nel proprio sito Web per consentire ai clienti di immettere informazioni sui pacchetti persi o danneggiati durante la spedizione. Utilizzando un dispositivo portatile (ad esempio un telefono abilitato per il Web), un cliente immette le informazioni sul modulo relativo al reclamo: il numero di spedizione dalla ricevuta originale, il nome / indirizzo e una descrizione di perdita / danno. Quando il cliente invia il modulo, il sito Web risponde con un ID di reclamo per ulteriori tracciamenti. Lo scenario è mostrato nello schema seguente:
Il framework jQuery Mobile supporta una varietà di browser tra cui dispositivi iOS, dispositivi Android, Blackberry OS 6 e webOS (per una matrice di supporto, vedi http://jquerymobile.com/gbs/). L'applicazione in questo tutorial è stata testata su un dispositivo Android 2.2 e un dispositivo iOS 4.1.
Prima di entrare nei dettagli tecnici, parliamo delle principali considerazioni che guidano il design dell'applicazione.
Naturalmente, una tipica applicazione della vita reale avrà problemi di progettazione aggiuntivi o diversi. Ai fini di questo tutorial, il nostro ambito sarà limitato alle considerazioni precedenti.
La maggior parte della discussione in questa sezione è stata presa in prestito dalla documentazione in http://jquerymobile.com. Vedere il riferimento originale per ulteriori dettagli.
jQuery Mobile è un sistema di interfaccia utente costruito sul popolare framework jQuery JavaScript. È costituito da elementi dell'interfaccia utente e costrutti di programmazione che forniscono funzionalità coerenti su una vasta gamma di browser Web mobili e desktop. I principi di 'Progressive Enhancement' e 'Graceful Degradation' sono alla base del suo design. Le funzionalità principali del framework supportano un'ampia gamma di piattaforme, mentre le nuove piattaforme beneficiano di funzionalità più avanzate.
jQuery Mobile ha un ingombro relativamente ridotto. Poiché la configurazione di base di una pagina jQuery Mobile viene eseguita esclusivamente tramite markup, è possibile ottenere rapidi cicli di sviluppo, in particolare se l'applicazione non richiede funzioni di programmazione complesse. Sebbene sia basato su jQuery core, il sistema tematico di jQuery Mobile si basa su un nuovo framework CSS che mira a separare il colore e la trama dagli stili strutturali che definiscono elementi come il riempimento e le dimensioni. Un'API per la gestione degli eventi gestisce i metodi di input utente basati su focus, mouse e cursore in modo unificato.
jQuery Mobile è pronto all'uso con molti elementi dell'interfaccia utente, come barre degli strumenti di intestazione e piè di pagina, pulsanti con icone, elementi di forma (inclusi slider e interruttori a sfioramento sensibili al tocco) ed elenchi. Sono inoltre disponibili stili HTML di base, due o tre colonne di colonne ed elementi comprimibili.
A partire dalla versione di jQuery Mobile 1.0 alpha 2, il seguente foglio di stile e librerie JavaScript devono essere inclusi nelle pagine HTML. Puoi fare riferimento come di seguito o servirli dal tuo server:
Cerchiamo di introdurre la struttura di base di una pagina in jQuery Mobile. Una pagina in framework jQuery Mobile può essere una singola pagina o una "pagina" interna interna all'interno di una pagina. Una pagina 'contenitore' includerà una o più pagine 'di contenuto'. Il limite di una pagina del contenitore è definito come segue:
...
Osservare che il valore del Dati-ruolo l'attributo è pagina. D'altra parte, il confine di una pagina di contenuto è definito come segue:
...
Osservare che il valore del Dati-ruolo l'attributo è soddisfare.
Una pagina di contenuto può avere un'intestazione e un piè di pagina associati. Ad esempio, una pagina contenitore con diverse pagine di contenuto potrebbe avere la seguente struttura:
.....................
Quando viene caricata una pagina del contenitore, tutte le pagine di contenuto in essa saranno visibili. Nella nostra applicazione, dobbiamo visualizzare solo un contenuto alla volta. Pertanto, è necessario controllare a livello di codice quale contenuto verrà visualizzato in base al contesto.
Per nascondere un elemento, utilizza l'API jQuery Mobile nascondere() funzione:
$ ( '# HdrMain') nascondere ().;
nasconderà l'intestazione con id hdrMain. Qui, abbiamo usato il selettore jQuery ID passando id dell'elemento che vorremmo selezionare preceduto da # cartello. Al contrario, il mostrare() la funzione mostra un elemento nascosto:
$ ( '# HdrMain') show ().;
Il La nostra applicazione demo consiste in una singola pagina html, Le transizioni di contenuto sono mostrate nello schema seguente: Osservazioni aggiuntive sulla lista di codici qui sopra: Il nostro modulo di richiesta comprende i seguenti campi: Ad esempio, esaminiamo il campo di testo per il numero di spedizione: Abbiamo usato un Come vedremo più avanti, questa convenzione di denominazione speciale ci aiuterà a rilevare i campi mancanti durante l'invio del modulo. Un altro elemento di forma notevole è il Di seguito viene mostrata la pagina del modulo visualizzata in un telefono Android 2.2. L'utente scorrerà la pagina per accedere agli elementi nel modulo: La stessa forma è mostrata in un iPod touch con iOS 4.1: Faremo riferimento a vari elementi nella pagina html in tutto il nostro codice. Ha senso definire quei riferimenti una sola volta e riutilizzarli secondo necessità. Per questo motivo, dichiariamo variabili usate globalmente e costanti nel Le assegnazioni di queste variabili sono fatte in jQuery Vediamo ora le funzioni di selezione del contenuto che verranno chiamate dai gestori di eventi. Per nascondere e visualizzare il contenuto principale e la sua intestazione / piè di pagina, usiamo il Per nascondere e visualizzare il contenuto della transizione, usiamo il Per nascondere e visualizzare il contenuto della finestra di dialogo, usiamo il Infine, per nascondere e visualizzare il contenuto di conferma e la sua intestazione / piè di pagina, usiamo il Quando la pagina viene caricata, dovrebbe essere visualizzato solo il contenuto principale. Per questo motivo, altre pagine di contenuto sono nascoste: Discuteremo come legare insieme le funzioni di selezione dei contenuti con i gestori di eventi di seguito. Quando un utente preme il pulsante di invio, è necessario convalidare i dati del modulo prima di inviare effettivamente il modulo. Per semplificare le cose, controlleremo solo se sono stati forniti tutti i campi richiesti. Se la convalida del modulo ha esito positivo, viene visualizzato il contenuto della transizione che consiste in un'immagine di selezione con un breve testo che informa l'utente che il modulo è stato inviato. Se la validazione fallisce, viene visualizzato il contenuto della finestra di dialogo che consiste in un avvertimento e un pulsante OK per chiudere la finestra di dialogo. Le etichette degli elementi del modulo con i dati mancanti saranno evidenziate in rosso. A tal fine, aggiungiamo una nuova classe di stile chiamata mancante ed estensione di jQuery Mobile Di seguito è riportato il gestore eventi per l'invio del modulo. Nella tipica notazione jQuery, l'identificativo per Impostiamo un flag di errore su Il Dopo aver ripristinato tutte le etichette evidenziate in precedenza, rivisitiamo il necessario Inoltre, il flag di errore è impostato su true e viene mostrata la finestra di errore. La figura seguente mostra la finestra di errore nel nostro telefono Android 2.2: Dopo che l'utente preme il pulsante OK, l'utente visualizza la pagina del modulo con i campi mancanti evidenziati, come mostrato di seguito. In questa immagine, l'orientamento dello schermo del telefono è orizzontale. Osserva che ogni etichetta e il suo campo di testo fratello sono visualizzati in una singola riga anziché l'orientamento verticale nella Figura 3 dove l'etichetta è sopra il campo di testo. D'altra parte, se la convalida ha esito positivo, mostriamo il contenuto della transizione e inviamo il modulo come discusso di seguito. L'invio del modulo utilizza jQuery Mobile Si noti che il La funzione in-line per elaborare la risposta viene eseguita solo quando il server restituisce la sua risposta. Per semplicità, l'applicazione server che elabora i dati del modulo, Quando viene ricevuta la risposta del server, viene eseguito il codice del gestore eventi. Il primo passo è popolare il Quindi, nascondiamo il contenuto della Transizione e mostriamo il contenuto della Conferma che contiene il È stata creata una nuova richiesta in base ai dati inviati. Il tuo numero di conferma é: Di seguito viene mostrata la pagina di conferma visualizzata sul nostro telefono Android 2.2 (l'orientamento del telefono è orizzontale): La stessa pagina di conferma viene visualizzata su un iPod touch come segue (l'orientamento è verticale): Il codice sorgente per il tutorial ha una struttura di cartelle semplice. Tutte le risorse sono memorizzate in una cartella denominata In questo tutorial sono stati introdotti concetti di base dal framework jQuery Mobile con particolare attenzione alla struttura della pagina, lo stile di base, gli elementi del modulo e l'invio del modulo Ajax. Un'applicazione di elaborazione delle attestazioni di esempio è stata introdotta per dimostrare tali concetti. Abbiamo fornito screenshot di varie pagine dell'applicazione in esecuzione su un telefono Android 2.2 e un dispositivo iPod touch con iOS 4.1. Di seguito alcune osservazioni e osservazioni conclusive:nascondere() e mostrare() le funzioni si applicano a elementi di molti tipi diversi, in particolare, ( tag). In questo tutorial, useremo nascondere() e mostrare() funziona estesamente per visualizzare solo il contesto pertinente all'utente dell'applicazione. Di seguito sono riportati ulteriori dettagli.
Passaggio 1: Struttura della pagina dell'applicazione demo
index.html, che consiste in una pagina del contenitore come mostrato di seguito:
Dati-tema attributo ci consente di scegliere tra gli stili disponibili nel framework jQuery Mobile: a, b, c, d, e, ognuno di questi fornisce un insieme coerente di colori per diversi elementi nella pagina. Per la nostra applicazione abbiamo scelto il colore corrispondente a B. Dati-nobackbtn = "true".Elementi del modulo
ingresso campi di testo tipo: numero di spedizione, nome, cognome, email, telefono, indirizzo, città e codice postale. Tutti sono campi obbligatori tranne il telefono.selezionare elemento per lo stato. Questo è un campo obbligatorio.textarea elemento per un utente per inserire informazioni relative alla spedizione mancante o danneggiata. Questo è un campo obbligatorio.
etichetta con un per attributo il cui valore è uguale al id del ingresso elemento il etichetta è collegato a. Inoltre, abbiamo avvolto il etichetta e ingresso in un div con Dati-ruolo attributo valutato come fieldcontain. Il framework jQuery Mobile utilizzerà il fieldcontain valore attributo per lo styling speciale. Inoltre, guarda name = "shipNo_r". Per questa particolare applicazione, abbiamo deciso di definire il valore di nome attributo di qualsiasi elemento modulo richiesto per essere il valore del id attributo aggiunto da _r. Se l'elemento non è richiesto, il valore di nome l'attributo sarà uguale al valore di id attributo. Ad esempio, poiché il telefono non è un campo obbligatorio, è definito come segue:
selezionare elemento. Simile a quanto sopra, il valore di per l'attributo è uguale all'ID del selezionare elemento il etichetta è collegato a. Anche il etichetta e selezionare sono avvolti in a div con il Dati-ruolo valore attributo come fieldcontain. Con la lunga lista di opzioni che abbiamo in questa applicazione, il framework jQuery Mobile aprirà l'elenco in una nuova pagina quando l'utente si focalizzerà sul selezionare elemento.
Passaggio 2: definizioni variabili
capo sezione della pagina:
$ (Document) .ready () funzione utilizzando i selettori ID, come mostrato di seguito. (Ricorda che jQuery $ (Document) .ready () la funzione viene chiamata quando viene caricata l'intera gerarchia DOM nella pagina. Quella funzione è la posizione migliore per inizializzare le nostre variabili.) Definiamo anche inputMapVar come una collezione composta da tutti ingresso elementi con _R nel loro nome attributo (la chiamata di funzione $ ( 'Ingresso [nome * = "_ r"]') seleziona tutti questi elementi).
Passaggio 3: Funzioni di selezione del contenuto
hideMain () e showMain () funzioni: function hideMain () hdrMainVar.hide (); contentMainVar.hide (); ftrMainVar.hide (); function showMain () hdrMainVar.show (); contentMainVar.show (); ftrMainVar.show ();
hideContentTransition () e showContentTransition () funzioni: function hideContentTransition () contentTransitionVar.hide (); function showContentTransition () contentTransitionVar.show ();
hideContentDialog () e showContentDialog () funzioni: function hideContentDialog () contentDialogVar.hide (); function showContentDialog () contentDialogVar.show ();
hideConfirmation () e showConfirmation () funzioni: function hideConfirmation () hdrConfirmationVar.hide (); contentConfirmationVar.hide (); ftrConfirmationVar.hide (); function showConfirmation () hdrConfirmationVar.show (); contentConfirmationVar.show (); ftrConfirmationVar.show ();
Passaggio 4: invio modulo
Convalida del modulo
etichetta classe. label.missing color: # FF0000; font-weight: bold;
form1 viene passato alla chiamata all'oggetto jQuery per gestire l'evento di invio: $ ('# form1'). submit (function () var err = false; // Nascondi il contenuto principale hideMain (); // Reimposta gli elementi del modulo precedentemente evidenziati stateLabelVar.removeClass (MISSING); whatLabelVar.removeClass (MISSING) ; inputMapVar.each (function (index) $ (this) .prev (). removeClass (MISSING);); // Esegui convalida del form inputMapVar.each (function (index) if ($ (this) .val ( ) == null || $ (this) .val () == EMPTY) $ (this) .prev (). addClass (MISSING); err = true;); if (stateVar.val () == NO_STATE) stateLabelVar.addClass (MISSING); err = true; if (whatVar.val () == null || whatVar.val () == EMPTY) whatLabelVar.addClass (MISSING); err = true; / / Se la convalida fallisce, mostra il contenuto della finestra di dialogo if (err == true) showContentDialog (); restituisce false; // Se la convalida passa, mostra Transition content showContentTransition (); // Invia il modulo $ .post ("/ forms / requestProcessor.php ", form1Var.serialize (), function (data) confirmVar.text (data); hideContentTransition (); showConfirmation ();); return false;); falso e nascondere il contenuto principale che contiene il modulo. Abbiamo quindi ripristinato le etichette evidenziate in precedenza su ciascun membro della raccolta inputMapVar. Per fare ciò, passiamo una funzione inline come argomento a ogni() che semplicemente contiene . $ (This) .PREV () removeClass (mancante);. Nota che Questo è il selezionato ingresso elemento e prev () restituisce il suo fratello precedente immediato che è il etichetta associato ad esso.stato per la selezione dello stato e che cosa per la descrizione del reclamo non si tratta di campi di testo. Pertanto, le etichette corrispondenti hanno il loro stile resettato separatamente.ingresso elementi per verificare se qualcuno di essi ha un valore mancante. In questo caso aggiungiamo la classe mancante all'etichetta associata al campo di input: // Esegui convalida del form inputMapVar.each (function (index) if ($ (this) .val () == null || $ (this) .val () == EMPTY) $ (this) .prev () .addClass (MISSING); err = true;); if (stateVar.val () == NO_STATE) stateLabelVar.addClass (MISSING); err = true; if (whatVar.val () == null || whatVar.val () == EMPTY) whatLabelVar.addClass (MISSING); err = true;
Invio del modulo tramite Ajax
inviare funzione che accetta tre argomenti: $ .post ("/ forms / requestProcessor.php", form1Var.serialize (), function (data) ...);
serialize () sull'oggetto jQuery passandogli l'identificatore per il nostro modulo.dati, rimandato dal server.inviare funzione esegue una chiamata Ajax che è asincrona per sua natura. Subito dopo aver chiamato il inviare, l'esecuzione del programma continuerà restituendo false da Sottoscrivi la funzione e l'utente inizieranno a vedere il contenuto della Transizione.
requestProcessor.php, restituisce un ID reclamo hard-coded per l'utente da utilizzare per riferimento futuro. Prima di inviare l'ID reclamo requestProcessor.php, dorme 4 secondi per emulare il tempo di elaborazione del server. È in questo periodo che l'applicazione mostrerà il contenuto della Transizione.
campata tag chiamato conferma con il valore restituito dal server. Questo è fatto semplicemente con: confirmationVar.text (dati);
campata tag chiamato conferma:
Distribuzione del codice sorgente
le forme. In quella cartella ci sono due sottocartelle, css e img. Il css cartella contiene colors.css, che ha il label.missing classe, e img I negozi wait.gif, l'immagine di spinner. Il index.html e requestProcessor.php i file sono direttamente sotto il le forme cartella. Nei nostri test, abbiamo utilizzato un server Web Apache con versione 2.2.11 con PHP versione 5.3.0. Se si posiziona il le forme cartella direttamente sotto il DocumentRoot del server Web, è possibile accedere all'applicazione tramite http: // [nome_host] /folder/index.html.
Conclusione
Accentsconagua