Nu cu mult timp în urmă, echipa jQuery a lansat jQuery Mobile 1.2. Această versiune nouă are câteva schimbări fantastice! În acest articol, vom examina unele dintre widgeturile noi disponibile pentru dezvoltatori, aruncăm o privire la modificările aduse widgeturilor existente și vom examina câteva îmbunătățiri care pot afecta aplicația jQuery Mobile. Să începem, să o facem noi?

În primul rând, va trebui să descărcăm biți și octeți. Accesați pagina de descărcare jQuery Mobile și descărcați opțiunea care vă satisface cel mai bine nevoile dvs. Alternativ puteți folosi codul de boilerplate furnizat mai jos.

În plus, acum ar putea fi un moment bun pentru a discuta rapid Download Builder pe care echipa jQuery Mobile o construiește. Este încă în Alpha, dar vă permite să vă personalizați descărcarea pentru a include doar părțile de jQuery Mobile pe care le solicitați și nimic mai mult. Puteți exclude anumite evenimente, tranziții, elemente de formular sau widget-uri care nu vă interesează. Este destinat dezvoltatorilor care sunt ultra-preocupați de apucarea celui mai înalt nivel de performanță din aplicația sa.

---

Widget-uri

Bătălia inimii oricărei aplicații jQuery Mobile este widget-urile sale. Probabil ele sunt partea cea mai vizibilă a paginii și partea care permite utilizatorilor să interacționeze cu pagina într-un mod atât de ușor. Echipa jQuery Mobile a petrecut nenumărate ore de testare, construire și rafinare a widget-urilor pentru a se asigura că acestea sunt cele mai bune pe care le pot fi. În versiunea 1.2, echipa a bătut-o într-adevăr din parc cu un widget pe care dezvoltatorii l-au cerut de la lansarea primului cadru: popup modals.

popup-uri

O modalitate pop-up este o mică secțiune a paginii care acoperă alte părți ale paginii. Acestea sunt de obicei utilizate ca sfaturi de utilizare sau pentru a afișa fotografii, hărți și conținut suplimentar. De obicei, aceste informații nu sunt suficient de importante pentru a justifica o altă pagină, dar este important să aveți nevoie de afișare de la sine. Modul în care jQuery Mobile 1.2 a implementat ferestrele pop-up este perfect. Să învățăm cât de ușor este să adăugați ferestre pop-up la un proiect.

O notă rapidă, de dragul concisității: toate exemplele de cod de mai jos vor utiliza următorul cod HTML. Fișierele jQuery Mobile CSS și JS (inclusiv jQuery) sunt conectate fierbinte utilizând jQuery CDN pentru confortul dvs..

Adăugarea unui popup la o pagină din aplicație este un proces în două etape. Mai întâi veți avea nevoie de niște mijloace pentru declanșarea pop-up-ului. Acesta este în general un link, sau un buton sau ceva cu care interacționează utilizatorul. Pentru a declanșa elementul, adăugăm următorul atribut:

date-rel = "pop-up"

În al doilea rând, aveți nevoie de conținutul care trebuie afișat. Acest lucru ar putea varia de la un singur div la a meniul, A formă, sau chiar fotografii. Elementul de conținut își are propriul atribut:

date-rol = „pop-up“

În cele din urmă, pentru butoanele simple de legătură, href atributul trebuie să corespundă cu id a conținutului care trebuie afișat. Să analizăm implementarea completă.

Deschideți popup 
 
Acesta este un popup complet de bază, fără setări de opțiuni.
 

Ceea ce veți vedea pe pagină ar trebui să pară ceva similar cu acesta:

Bule de

Acum că știți cum să creați un pop-up, să examinăm alte posibilități. O utilizare obișnuită este o sugestie; textul de ajutor sau textul extins afișat când un utilizator dă clic pe un buton. Configurați codul la fel ca înainte:

Află mai multe 
 
Ai aflat mai multe!.
 

De data aceasta, vom modela conținutul rezultat folosind e swatch de la jQuery Mobile pentru a oferi un aspect mai plăcut. Acest lucru ne ajută să ne amintim că pop-urile sunt cetățeni de primă clasă jQuery Mobile și pot fi tratați ca orice altceva de pe pagină.

Meniuri

Să mergem la ceva mai complicat: un meniu. Aceasta este o abordare populară a navigării pe pagini. Oferiți utilizatorului un meniu la îndemână. Deci, cum arată asta cu pop-up-uri?

Meniul 
 
 
Meniul meu
 
sentinelă
 
Legat
 
Cu număr42
 
 

Iar rezultatul rezultat ar trebui să semene cu acesta:

De asemenea, puteți utiliza listele clară ale lui 1.2 în ferestre pop-up. Iată un exemplu rapid:

Meniul încorporat 
 
 
 
colorate
 
 
roșu
 
Albastru
 
 
 
 
forme
 
 
Cerc
 
Pătrat
 
 
 
 

Și rezultatele:

Merită să observăm asta date-inset = "true" este necesar pe ListView sau colțurile listei dvs. vor apărea. Încercați și veți vedea.

Formulare

O altă metodă UX populară este să afișezi un formular de autentificare care se află în partea de sus a paginii. Acest lucru este posibil acum cu jupilele jQuery Mobile. Iată un simplu nume de utilizator / parolă.

Logare 
 
 
Vă rugăm să vă conectați la contul dvs
 Nume de utilizator:  Parola:  conectare 
 

Ceea ce vă oferă:

În mod prestabilit, pop-urile se centrează pe obiectul care le-a declanșat. Există un atribut opțional pe care îl veți vedea în următoarele trei exemple. este Date poziția-a = „fereastră“ și îl aplicați elementului care declanșează popup-ul. Încearcă să adaugi asta la Logare pentru a vedea ce se întâmplă.

Dialoguri

O necesitate comună pentru aplicațiile web este abilitatea de a interacționa cu utilizatorul. Am analizat doar o abordare: un formular de autentificare. Dar, uneori, trebuie să solicitați utilizatorilor întrebări. Un dialog este o soluție perfectă pentru acest lucru; și ce știi, pop-up-uri te-au acoperit! Deci, cum arată acest cod? Iată un exemplu simplu:

dialog 
 
 
Ștergeți pagina?
 
 
 
Sigur doriți să ștergeți această pagină?
 
Această acțiune nu poate fi anulată.
 Nu Da, Ștergeți-l 
 

În containerul de conținut pop-up, rețineți un alt atribut nou pentru utilizarea dvs.: date-suprapunere tema = „o“. Acest atribut este ceea ce aplică fundalul umbrit în caseta de dialog. Este afectată de tema dvs., deci aveți grijă atunci când lucrați cu teme create cu ThemeRoller.

Fotografii

Nu pot conta numărul de ori pe care l-am văzut dezvoltatorii jQuery Mobile cer o modalitate mai bună de manipulare a galeriilor de imagini. În timp ce popupurile nu sunt soluția perfectă pentru un număr mare de imagini, ele sunt minunate pentru o mână de imagini care trebuie văzute mai mari. Chiar mai bine, este incredibil de ușor; verifică:

Fotografie 
 Închide 

Codul de mai sus vă oferă o fotografie elegantă centrată pe fereastră, inclusiv un buton de închidere a ferestrei.

Cum au făcut asta? În contextul unui pop-up, ancoră eticheta are atribute care se comportă puțin diferit de cele utilizate în alte locații din pagină. Mai exact, BTN-dreapta-ui clasa poziția imaginii în colțul imaginii, mai degrabă decât lateral, în timp ce date-icon și data-iconpos atributele vă permit să stylizați butonul la fel cum ați face un buton obișnuit.

Puteți obține destul de fantezie cu pop-up-uri, inclusiv, dar nu se limitează la, afișarea video inline și chiar hărți interactive. Verificați documentația jQuery Mobile pentru ferestre pop-up și iframe.

Vizualizări listă pliabilă

O altă caracteristică extraordinară este capacitatea de a combina seturi pliabile cu vederi în liste. Sunați-le "Vizualizări listă pliabilă" și aveți un nou widget în jQuery Mobile 1.2. Cum funcționează? Mă bucur că ai întrebat. Pur și simplu creați orice listă doriți, apoi împachetați-o într-un set pliabil. Lista de vizualizări pliabile acceptă, de asemenea, mai multe liste - pentru a obține o nebunie!

 
Fata preferată de Spice?
 
 
Posh
 
Infricosator
 
sportiv
 
Bebelus
 
Ghimbir
 
 

Codul de mai sus ar avea ca rezultat această listă de listă plină:

---

Îmbunătățiri

În plus față de noile tipuri de widgeturi, jQuery Mobile 1.2 oferă o serie de îmbunătățiri utile pentru funcționalitățile existente. Să aruncăm o privire la unele dintre cele mai valoroase.

Schimbări de asistență jQuery

Una dintre cele mai mari îmbunătățiri efectuate în versiunea 1.2 este suportul adăugat pentru jQuery 1.8. Acest lucru aduce unele creșteri semnificative ale performanței sub forma unui Sizzle.js complet rescris (motorul selector pentru jQuery), împreună cu numeroase alte îmbunătățiri.

Compromisul este că echipa jQuery Mobile a decis că a venit timpul să apară suportul pentru jQuery 1.6. Acest lucru poate fi nefericit pentru unii dintre cei care folosesc încă versiuni mai vechi ale jQuery, dar este un comerț echitabil.

Vizualizare listă

Dacă ați avut vreodată să gestionați o listă cu oameni, locații sau lucruri care se schimbă în mod constant în jQuery Mobile, atunci probabil că a trebuit să scrieți un cod dificil pentru a afișa anteturile dinamice de vizualizare a listelor. Bummer că ați petrecut tot timpul, deoarece echipa jQuery Mobile a făcut la fel de ușor ca scăparea într-un singur atribut.

data-autodividers = "true"

Aceasta transformă această listă:

În:

Rețineți că acest lucru nu gestionează sortarea, gruparea sau filtrarea. Pentru acest tip de funcționalitate, luați în considerare încercarea pluginului meu jQuery Mobile Tinysort.

Numai liste de citire

jQuery Mobile oferă opțiuni de vizualizare "numai pentru citire", dar a fost dificil să se spună că nu au putut fi făcute clic. Versiunea 1.2 elimină gradientul listei, făcând rândul o culoare plată. Acest lucru ar trebui să ofere o imagine mai bună vizuală pentru utilizatorii dvs..

Reglaje mai mari ale lățimii elementelor de formă

Versiunea 1.2 rezolvă o problemă semi-enervantă cu elemente de formă, prin care nu ar prelua întreaga lățime a elementului părinte în unele cazuri.

Dispozitive suplimentare adăugate

S-ar putea să fi observat că dispozitivele noi sunt adăugate aproape zilnic. Echipa jQuery Mobile se străduiește să testeze cât mai multe dintre aceste dispozitive. Recent adăugate pe lista de platformă A sunt următoarele dispozitive / sisteme de operare / browsere: iOS 6, Android 4.1 (Jellybean), Tizen, Firefox pentru Android și Kindle Fire HD.

---

Lista completă a modificărilor

Puteți găsi o listă completă a modificărilor făcute pentru versiunea 1.2 de pe blogul jQuery Mobile.

Sper că unele dintre aceste îmbunătățiri vor contribui la îmbunătățirea aplicațiilor. Amintiți-vă că echipa jQuery Mobile este de partea dvs.! Dacă vedeți ceva care credeți că ar fi valoros, cereți-l: creați o problemă în depozitul Github și sugerați-o. Mai bine încă, anulați repo-ul și adăugați-vă un anumit cod!