Share
jQuery Mobile este un cadru de web mobil relativ nou, lansat în octombrie 2010. Cadrul are multe caracteristici interesante pentru a sprijini dezvoltarea aplicațiilor mobile web. În acest tutorial, ne vom concentra pe câteva elemente de bază ale jQuery Mobile: structura paginii, formularele și formularul Ajax. Tutorialul se bazează pe versiunea 1.0 alpha release 2 a cadrului jQuery Mobile.
Ca parte a tutorialului vom scrie o mică aplicație B2C. O companie de transport de ambalaje are un formular pe site-ul său web pentru ca clienții să introducă informații despre pachetele care sunt pierdute sau deteriorate în timpul expedierii. Utilizând un dispozitiv portabil (de exemplu, un telefon activat pe web), un client introduce informații în formular cu privire la revendicarea lor: numărul de expediere din chitanța originală, numele / adresa și o descriere a pierderii / daunelor. Atunci când clientul trimite formularul, site-ul web răspunde cu un ID de solicitare pentru urmărirea ulterioară. Scenariul este prezentat în diagrama de mai jos:
jQuery Mobile suportă o varietate de browsere, inclusiv dispozitive iOS, dispozitive Android, Blackberry OS 6 și webOS (pentru o matrice de suport, consultați http://jquerymobile.com/gbs/). Aplicația din acest tutorial a fost testată împotriva unui dispozitiv Android 2.2 și a unui dispozitiv iOS 4.1.
Înainte de a intra în detalii tehnice, să vorbim despre principalele considerente care conduc proiectul aplicației.
Desigur, o aplicație tipică în viața reală va avea probleme de design suplimentare sau diferite. În scopul acestui tutorial, domeniul nostru de aplicare va fi limitat la considerațiile de mai sus.
Majoritatea discuțiilor din această secțiune au fost împrumutate din documentația din http://jquerymobile.com. Consultați referința originală pentru mai multe detalii.
jQuery Mobile este un sistem de interfață cu utilizatorul, construit pe jQuery jQuery. Acesta constă în elemente de interfață utilizator și construite de programare care oferă funcționalitate consistentă într-o mare varietate de browsere web pentru dispozitive mobile și desktop. Principiile de "îmbunătățire progresivă" și "degradare grațioasă" se află în spatele designului său. Core funcționalitatea cadrului acceptă un set larg de platforme, în timp ce platformele mai noi beneficiază de caracteristici mai bune.
jQuery Mobile are o amprentă relativ mică. Deoarece configurația de bază a unei pagini mobile jQuery se face exclusiv prin marcare, este posibilă realizarea unor cicluri rapide de dezvoltare, mai ales dacă aplicația dvs. nu are nevoie de funcții complexe de programare. Deși este construit pe baza jQuery, sistemul tematic al jQuery Mobile se bazează pe un nou cadru CSS care are ca scop separarea culorii și a texturii de stilurile structurale care definesc lucruri precum padding și dimensiunile. Un API de gestionare a evenimentelor manipulează metodele de introducere a utilizatorilor cu atingere, mouse și cursor în mod unificat.
jQuery Mobile iese din cutie cu multe elemente de interfață cu utilizatorul, cum ar fi barele de instrumente pentru antet și subsol, butoanele cu pictograme, elementele de formă (inclusiv butoanele sensibile la atingere și comutatoarele de comutare) și listele. Sunt furnizate de asemenea stiluri de bază HTML, două sau trei grile de coloană și elemente pliabile.
Începând cu versiunea jQuery Mobile 1.0 alpha 2, în paginile dvs. HTML trebuie să fie incluse următoarele biblioteci de stil și biblioteci JavaScript. Aveți posibilitatea să le referiți ca mai jos sau să le serviți de pe propriul dvs. server:
Să prezentăm structura de bază a unei pagini în jQuery Mobile. O pagină din cadrul jQuery Mobile poate fi o singură pagină sau o pagină "internă" internă legată într-o pagină. O pagină "container" va include una sau mai multe pagini "conținut". Limita unei pagini a unui container este definită după cum urmează:
...
Observați că valoarea lui date-rol este atributul pagină. Pe de altă parte, limita unei pagini de conținut este definită după cum urmează:
...
Observați că valoarea lui date-rol este atributul conţinut.
O pagină de conținut poate avea un antet și un subsol asociat. De exemplu, o pagină a unui container cu mai multe pagini de conținut poate avea următoarea structură:
.....................
Când o pagină de container este încărcată, toate paginile de conținut din acesta vor fi vizibile. În aplicația noastră, trebuie să afișăm un singur conținut la un moment dat. Prin urmare, trebuie să controlam programatic ce conținut va fi afișat în funcție de context.
Pentru a ascunde un element, utilizați jQuery Mobile API ascunde() funcţie:
$ ( '# HdrMain') ascunde ().;
va ascunde antetul cu id hdrMain. Aici am folosit selectorul jQuery ID prin trecere id din elementul pe care dorim să-l selectăm precedat # semn. Dimpotrivă, spectacol() funcția arată un element ascuns:
$ ( '# HdrMain') arată ().;
Aplicația noastră demo constă într-o singură pagină html, Conversiile de conținut sunt prezentate în diagrama de mai jos: Observații suplimentare privind listarea de coduri de mai sus: Formularul nostru de revendicări constă în următoarele domenii: De exemplu, să ne uităm la câmpul pentru numărul de expediere: Am folosit a După cum vom vedea mai târziu, această convenție specială de numire ne va ajuta să detectăm câmpurile lipsă în timpul depunerii formularului. Un alt element notabil este forma Pagina de formular afișată într-un telefon Android 2.2 este prezentată mai jos. Utilizatorul va naviga prin pagina pentru a accesa elementele din formular: Același formular este prezentat într-un iPod touch care rulează iOS 4.1: Vom face referire la diferite elemente din pagina html în codul nostru. Este logic să definiți aceste referințe o singură dată și să le refolosiți după cum este necesar. Din acest motiv, declarăm variabilele utilizate la nivel global, precum și constantele în Alocările acestor variabile se fac în jQuery Să ne uităm acum la funcțiile de selecție a conținutului care vor fi numite de agenții de procesare a evenimentelor. Pentru a ascunde și a afișa conținutul principal și antetul / subsolul acestuia, folosim Pentru a ascunde și a afișa conținutul de tranziție, folosim Pentru a ascunde și a afișa conținutul Dialog, vom folosi În cele din urmă, pentru a ascunde și a afișa conținutul de confirmare și antetul / subsolul acestuia, folosim Când pagina este încărcată, trebuie afișat numai conținutul principal. Din acest motiv, alte pagini de conținut sunt ascunse: Vom discuta cum să legăm împreună aceste funcții de selectare a conținutului cu cele de mai jos. Când un utilizator apasă butonul Trimiteți trebuie să validăm datele formularului înainte de a trimite efectiv formularul. Pentru a păstra lucrurile simple, vom verifica doar dacă au fost furnizate toate câmpurile necesare. Dacă validarea formularului are succes, afișăm conținutul de tranziție care constă dintr-o imagine de tip spinner cu un text scurt care informează utilizatorul cu privire la transmiterea formularului. Dacă validarea nu reușește, afișăm conținutul dialogului care constă dintr-un avertisment și un buton OK pentru a închide dialogul. Etichetele elementelor de form cu date care lipsesc vor fi evidențiate în roșu. În acest scop, adăugăm o nouă clasă de stil numită lipsă și extinderea aplicației jQuery Mobile Mai jos este un handler de evenimente pentru trimiterea formularului. În notația jQuery tipică, identificatorul pentru Am stabilit un semn de eroare la După ce toate etichetele evidențiate anterior sunt resetate, revizuim cerințele În plus, semnalizatorul de eroare este setat la adevărat și este afișat dialogul de eroare. Figura de mai jos arată dialogul de eroare din telefonul nostru Android 2.2: După ce utilizatorul apasă butonul OK, utilizatorul este afișat pagina de formular cu câmpurile lipsă evidențiate, după cum se arată mai jos. În acea imagine, orientarea ecranului telefonului este orizontală. Observați că fiecare etichetă și câmpul de text frățios sunt afișate într-o singură linie, spre deosebire de orientarea verticală din Figura 3 unde eticheta este deasupra câmpului de text. Pe de altă parte, dacă validarea este reușită, vom arăta conținutul de tranziție și vom trimite formularul așa cum este prezentat mai jos. Prezentarea formularului utilizează jQuery Mobile Rețineți că Funcția in-line pentru a procesa răspunsul este executată numai atunci când serverul returnează răspunsul său. Pentru simplificare, aplicația de server procesează datele formularului, Când se primește răspunsul serverului, se execută codul de manipulare a evenimentului. Primul pas este de a popula Apoi, ascundem conținutul de tranziție și afișăm conținutul de confirmare care conține O nouă revendicare a fost creată pe baza datelor pe care le-ați trimis. Numărul dvs. de confirmare este: Pagina de confirmare afișată în telefonul nostru Android 2.2 este prezentată mai jos (orientarea telefonului este orizontală): Aceeași pagină de confirmare este afișată pe un iPod touch după cum urmează (orientarea este verticală): Codul sursă pentru tutorial are o structură de directoare. Toate resursele sunt stocate într-un folder numit În acest tutorial am introdus concepte de bază din cadrul jQuery Mobile cu accent pe structura paginii, stilul de bază, elementele formularului și formularul Ajax. A fost introdusă o cerere de procesare a cererilor pentru a demonstra aceste concepte. Am furnizat capturi de ecran ale diferitelor pagini ale aplicației care se execută într-un telefon Android 2.2 și un dispozitiv iPod touch cu iOS 4.1. Unele observații și observații finale sunt prezentate mai jos:ascunde() și spectacol() funcțiile se aplică elementelor de mai multe tipuri diferite, în special, ( Etichete). În acest tutorial, vom folosi ascunde() și spectacol() funcționează extensiv pentru a afișa doar contextul relevant pentru utilizatorul aplicației. Mai multe detalii sunt prezentate mai jos.
Pasul 1: Structura paginii de aplicație demonstrativă
index.html, care constă dintr-o pagină de container după cum se arată mai jos:
date temă atributul ne permite să alegem dintre stilurile disponibile în cadrul jQuery Mobile: a, b, c, d, e, fiecare furnizând un set consistent de culori pentru diferite elemente din pagină. Pentru aplicația noastră am ales culoarea care corespunde b. date-nobackbtn = "true".Elemente formale
intrare câmpuri tip text: Număr de livrare, Prenume, Nume, Email, Telefon, Adresă, Oraș și Cod poștal. Toate campurile sunt obligatorii, cu excepția telefonului.Selectați element pentru stat. Acest câmp este obligatoriu.textarea element pentru ca un utilizator să introducă informații privind expedierea lipsă sau deteriorată. Acest câmp este obligatoriu.
eticheta cu pentru atribut a cărui valoare este aceeași ca și id din intrare elementul eticheta este atașat la. Mai mult, am împachetat eticheta și intrare în a div cu date-rol atribut evaluat ca fieldcontain. jQuery Mobile framework va utiliza fieldcontain valoarea atributului pentru stilul special. În plus, uita-te la name = "shipNo_r". Pentru această aplicație specială, am decis să definim valoarea Nume atributul oricărui element de formă cerut a fi valoarea lui id atribut atașat de _r. Dacă elementul nu este necesar, valoarea lui Nume atributul va fi același cu valoarea lui id atribut. De exemplu, din moment ce Telefonul nu este un câmp obligatoriu, acesta este definit după cum urmează:
Selectați element. Similar cu cele de mai sus, valoarea lui pentru atributul este același cu ID-ul Selectați elementul eticheta este atașat la. De asemenea eticheta și Selectați sunt înfășurate într-o div cu date-rol valoarea atributului ca fieldcontain. Cu lista lungă de opțiuni pe care le avem în această aplicație, cadrul jQuery Mobile va deschide lista într-o pagină nouă atunci când utilizatorul se concentrează asupra Selectați element.
Pasul 2: Definiții variabile
cap secțiune a paginii:
$ (Document) .ready () utilizând selectorii de identificare, după cum se arată mai jos. (Amintiți-vă că jQuery $ (Document) .ready () se numește când ierarhia DOM în pagină este încărcată. Această funcție este cea mai bună locație pentru a ne inițializa variabilele.) De asemenea, definim inputMapVar ca o colecție compusă din toate intrare elemente cu _R în lor Nume atribut (apelul funcției $ ( 'Input [name * = "_ r"]') selectează toate aceste elemente).
Pasul 3: Funcțiile de selecție a conținutului
hideMain () și showMain () funcţii: funcția hideMain () hdrMainVar.hide (); contentMainVar.hide (); ftrMainVar.hide (); funcția showMain () hdrMainVar.show (); contentMainVar.show (); ftrMainVar.show ();
hideContentTransition () și showContentTransition () funcţii: funcția hideContentTransition () contentTransitionVar.hide (); funcția showContentTransition () contentTransitionVar.show ();
hideContentDialog () și showContentDialog () funcţii: funcția hideContentDialog () contentDialogVar.hide (); funcția showContentDialog () contentDialogVar.show ();
hideConfirmation () și showConfirmation () funcţii: funcția hideConfirmation () hdrConfirmationVar.hide (); contentConfirmationVar.hide (); ftrConfirmationVar.hide (); funcția showConfirmation () hdrConfirmationVar.show (); contentConfirmationVar.show (); ftrConfirmationVar.show ();
Pasul 4: Prezentarea formularului
Validarea formularului
eticheta clasă. label.missing culoare: # FF0000; font-weight: bold;
Form1 este trimis la apelul obiect jQuery pentru a gestiona evenimentul de trimitere: $ ('# form1') submit (function () var err = false; // Ascunde continutul principal hideMain (); // Reseteaza elementele formate anterior stateLabelVar.removeClass (MISSING); whatLabelVar.removeClass (MISSING) () () () () () () () () (funcția (index) $ (this) .prev ) == null || $ (acest) .val () == EMPTY) $ (acest) .prev () addClass (MISSING); NO_STATE) stateLabelVar.addClass (MISSING); err = true; dacă (whatVar.val () == null || whatVar.val () == EMPTY) whatLabelVar.addClass (MISSING); err = true; / Dacă validarea nu reușește, afișați conținutul dialogului dacă (err == true) showContentDialog (); return false; // Dacă validarea trece, afișați continutul de tranziție showContentTransition (); // Trimiteți formularul $ .post (" requestProcessor.php ", form1Var.serialize (), funcția (data) confirmationVar.text (data); hideContentTransition (); showConfirmation ();); return false;); fals și ascundeți conținutul principal care conține formularul. Apoi resetați etichetele evidențiate anterior pe fiecare membru al colecției inputMapVar. Pentru a face acest lucru, trecem printr-o funcție inline ca argument fiecare() pur și simplu conține . $ (Aceasta) .prev () removeClass (LIPSĂ);. Rețineți că acest este selectată intrare element și prev () își întoarce fratele său imediat imediat, care este eticheta asociate cu acesta.stat pentru selecția de stat și ce pentru descrierea revendicării nu sunt câmpuri text. Prin urmare, etichetele corespunzătoare au propriile stiluri resetate separat.intrare elemente pentru a verifica dacă oricare dintre ele are o valoare lipsă. În acest caz, adăugăm clasa lipsă la eticheta asociată câmpului de introducere: // Efectuați validarea formularului inputMapVar.each (funcția (index) if ($ (this) .val () == null || $ (this) .val () == EMPTY) $ (this) .prev .addClass (Lipsă); err = true;); dacă (stateVar.val () == NO_STATE) stateLabelVar.addClass (MISSING); err = adevărat; dacă (whatVar.val () == null || whatVar.val () == EMPTY) whatLabelVar.addClass (MISSING); err = adevărat;
Trimiterea formularului prin Ajax
post funcție care acceptă trei argumente: $ .post ("/ forms / requestProcessor.php", form1Var.serialize (), funcție (date) ...);
serialize () pe obiectul jQuery prin trecerea codului de identificare al formularului nostru.date, trimis înapoi de pe server.post funcția efectuează un apel Ajax, care este de natură asincronă. Imediat după apelarea post, executarea programului va continua prin returnarea mesajelor false de la a depune funcția și utilizatorul vor începe să vadă conținutul de tranziție.
requestProcessor.php, returnează un ID de solicitare codificat greu pe care utilizatorul să îl folosească pentru referințe ulterioare. Înainte de a trimite ID-ul cererii requestProcessor.php, ea doarme 4 secunde pentru a emula timpul de procesare a serverului. În această perioadă aplicația va afișa conținutul de tranziție.
deschidere etichetă numită confirmare cu valoarea returnată de la server. Acest lucru se face pur și simplu cu: confirmationVar.text (date);
deschidere etichetă numită confirmare:
Implementarea codului sursă
formulare. În acest dosar există două subdosaje, css și img. css folder conține colors.css, care are label.missing clasă și img magazine wait.gif, imaginea spinner. index.html și requestProcessor.php fișierele se află direct în formulare pliant. În testarea noastră, am folosit un server web Apache cu versiunea 2.2.11 care rulează PHP versiunea 5.3.0. Dacă plasați formulare folder direct sub DocumentulRădăcină a serverului web, puteți accesa aplicația prin intermediul http: // [your_host_name] /folder/index.html.
Concluzie
Accentsconagua