Share
Descărcarea oficială a jQuery Mobile 1.0 a fost recent anunțată, iar acest tutorial vă va oferi o imagine de ansamblu asupra modului în care acest cadru popular vă poate ajuta în dezvoltarea de aplicații pe mai multe platforme și bazate pe web!
jQuery Mobile este o extensie a cadrului JavaScript jQuery popular. După cum sugerează și numele, este o implementare special orientată către dispozitive mobile, iar în ultimul an a parcurs un drum lung. Acesta este acum unul dintre cele mai populare cadre pentru dezvoltarea de aplicații web bazate pe dispozitive mobile. În plus față de furnizarea unei soluții excelente pentru aplicațiile standalone bazate pe web, este adesea înfășurat într-un SDK, cum ar fi PhoneGap, pentru a servi ca o componentă esențială pentru multe aplicații native.
Echipa din spatele jQuery Mobile a muncit din greu pentru a obține cadrul în care este astăzi, iar ultimele trei luni au luat-o în mod special dintr-un beta într-o versiune oficială.
Să aruncăm o privire la unele dintre caracteristicile oferite de jQuery Mobile, astfel încât să puteți vedea foarte repede că puteți configura o aplicație de bază cu această soluție minunată!
Înainte de a începe, trebuie să ne asigurăm că avem câteva lucruri în locul potrivit. În primul rând, trebuie să ne asigurăm că setăm fereastra de vizualizare pentru dispozitivul nostru utilizând meta etichetă.
Apoi, doar pentru a putea folosi aceasta ca pagină de pornire pe iOS, putem seta meta tag-ul pentru app-capabil.
Metazele de mai sus nu sunt strict necesare, dar cred că acestea sunt de multe ori o idee bună.
Apoi trebuie să includeți CSS și Javascript pentru jQuery Mobile. În acest moment, vom folosi CSS implicit, deși mai târziu vom discuta despre separarea structurii din stil. Pentru JavaScript, trebuie să ne asigurăm că vom include versiunea 1.6.4 a jQuery și jQuery mobile 1.0. jQuery este o dependență a jQuery Mobile, deci mai întâi trebuie să includeți biblioteca de bază. La momentul acestei scrieri, cea mai recentă versiune a jQuery Core este 1.7, dar jQuery Mobile oferă în prezent doar suport pentru 1.6.4. Cu toate acestea, în opinia echipei din spatele proiectului, va fi lansat în curând sprijin pentru 1.7!
Acum ne putem muta în corpul documentului și putem crea structura tipică a unei pagini. jQuery Mobile utilizează HTML5 date- atribuiți pentru a atribui comportamente specifice elementelor, date-rol fiind cel mai popular, deoarece definește rolul elementelor în cadrul aplicației. Adăugați atributul date-rol = „pagina“ la primul element al paginii.
Nu trebuie să fie div, poate fi o secțiune dacă este preferată, dar rezultatul final este același - veți crea prima pagină cu jQuery Mobile.
Deocamdată, puteți să vă construiți pagina folosind doar date-rol atribute. Poți să folosești date-rol = „antet“ și date-rol = „subsol“ pentru antet și respectiv pentru subsol, și date-rol = „conținut“ pentru conținutul principal al corpului.
jQuery Mobile Page Antetul
Acesta este un șablon de boilerplate pentru o singură pagină pe care îl puteți copia pentru a vă construi prima pagină jQuery Mobile. Fiecare link sau formular de aici va trage o pagină nouă în Ajax pentru a sprijini tranzițiile paginii animate.
Doar vizualizați sursa și copiați codul pentru a începe. Toate CSS și JS sunt legate de versiunile jQuery CDN, deci este foarte ușor de configurat. Nu uitați să includeți o etichetă meta viewport în cap pentru a seta nivelul de zoom.
Acest șablon este un document HTML standard cu un singur container "de pagină" în interior, spre deosebire de un șablon cu mai multe pagini care are mai multe pagini în interiorul acestuia. Vă recomandăm cu fermitate construirea site-ului sau a aplicației dvs. ca o serie de pagini separate, deoarece aceasta este mai curată, mai ușoară și funcționează mai bine fără JavaScript.
Aplicația dvs. ar trebui să semene cu următoarele.
Iar codul complet pentru aceasta este de mai jos:
Șablon pentru o singură pagină Antetul
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Sed sit amet odi ipsum, non volutpat sapien. Sedul gravida ero, vitae convallis dui rutrum in. Curabitur ipsum leo, pulvinar tincidunt sodales vel, lobortis a massa. Pellentesque eget molestie mauris. Mauris aliquam dui rutrum in. Curățimea ipsum leo, pulvinar tincidunt sodales vel, lobortis a massa. Pellentesque eget molestie mauris. Mauris aliquam dui rutrum in. Curățimea ipsum leo, pulvinar tincidunt sodales vel, lobortis a massa. Pellentesque eget molestie mauris. Mauris aliquam dui rutrum în. Curabitur ipsum leo, pulvinar
Footerul
Acum, acest lucru este destul de simplu în ceea ce privește aplicațiile web, dar este un început. Totul cu jQuery Mobile se poate face destul de repede și este superb atât pentru dezvoltarea rapidă a unui prototip, cât și pentru dezvoltarea de aplicații full featured.
Bineînțeles, folosirea unei întregi biblioteci pentru o aplicație cu o singură pagină este puțin cam suprascrisă, deci să începem să ajungem la lucrurile dulci și să adăugăm câteva pagini în aplicația noastră.
Puteți adăuga două contacte suplimentare div după eticheta de închidere a div cu date-rol = „conținut“ și date-rol = „pagina“, dar rolul de date al paginii ar trebui să aibă atributul id setat la "doi" și, respectiv, "trei". Sunt sigur că vedeți unde mergem cu asta, deci mergeți mai departe și adăugați un id de "unul" la prima noastră pagină. Adăugați anteturi, conținut și subsoluri la paginile suplimentare, după cum doriți.
Codul suplimentar ar trebui să arate după cum urmează:
Antetul
Aceasta este a doua pagină
Footerul
Antetul
Acesta este conținutul paginii a treia
Footerul
Dacă verificați aplicația acum, nu veți vedea nicio diferență. Aceasta este pentru că trebuie să mergem mai departe și să le conectăm la acele pagini de pe prima pagină înainte ca acestea să fie afișate. Adăugați câteva linkuri libere în prima pagină, după cum urmează:
Pagina a treia
Dacă deschideți primul link spre pagina a doua, veți vedea prima animație de paginare, dar în acest moment nu există nicio modalitate de a vă întoarce la prima pagină. Mergeți mai departe și adăugați un link spre paginile doi și trei care se întorc la prima pagină.
Totul ar trebui să facă o vizionare frumoasă acum și înapoi. Dulce!
Acum, în momentul de față, legăturile noastre sunt puțin plictisitoare, dar fără prea mult efort putem merge mai departe și le schimbăm pe unele butoane frumoase.
Dacă adăugați atributul date-rol = „buton“ la link-urile din fiecare pagină și pentru a reîmprospăta aplicația, ar trebui să aveți acum niște butoane frumoase.
În momentul de față, pagina noastră redă bine și suntem capabili să navigăm prin câteva pagini, dar totul arată puțin plictisitor. Din fericire, jQuery Mobile vine cu teme. Aceste teme permit dezvoltatorului să schimbe culorile și aspectul general al aplicației foarte repede. Acest lucru este făcut de către date temă atribut. Mergeți și adăugați date temă = „o“, date temă = „b“ și date temă = „o“ la fiecare dintre diviziile de pagină pe care le-am creat mai sus. Actualizați aplicația și veți vedea ce sa întâmplat. Fiecare dintre paginile dvs. ar trebui să pară puțin diferită!
Până de curând, singura modalitate de a derula propria temă personalizată a fost să includă o foaie de stil suplimentară și să înlocuiască CSS importat cu jQuery CSS. Din fericire, când al doilea candidat de lansare pentru jQuery Mobile a ieșit în octombrie, foaia de stil a fost separată în două entități separate, făcând loc pentru noul ThemeRoller. Prima foaie de stil se referă la structura aplicației, iar cea de-a doua se ocupă de toate temele pentru aplicație.
Treceți pe pagina Theme Roller și veți fi întâmpinați de ecranul de mai jos:
În partea stângă, aveți setările temei. Puteți alege să filtrați fiecare dintre secțiuni una câte una și să ajustați ceea ce doriți sau, așa cum îmi place, să mergeți mai departe și să trageți și să plasați culorile de sus în stil pentru ceea ce doriți și apoi să îmbunătățiți selecția utilizând meniul lateral. Puteți crea teme, cu un maxim de 26, apoi descărcați fișierul tematic pentru a fi utilizat în aplicația dvs..
Când descărcați fișierul ZIP și extrageți conținutul acestuia, veți avea un index.html fișier care conține câteva stiluri de bază și o confirmare că foaia de stil a fost descărcată corect. Veți avea apoi un dosar tematic și în interior veți găsi un dosar cu imagini și două foi de stil numit cu numele pe care ați dat tema la export. Există o versiune miniatură pentru producție sau o versiune completă pentru orice editare pe care ați putea dori să o faceți.
Acum, când începeți proiectul dvs. mobil, trebuie doar să includeți această foaie de stil Roller Theme, mai degrabă decât tema implicită CSS.
jQuery Mobile
Acum, când accesați mostrele pe care le-ați creat în mod obișnuit cu jQuery Mobile de mai sus prin setarea date temă atribut, veți face referire la CSS-ul Roller Theme pe care l-ați creat în locul valorilor implicite.
jQuery Mobile Antetul
Conținutul paginii este aici.
Footerul
Puteți adăuga date temă atribuiți oricărui element din pagină. Dacă îl adăugați la div cu date-rol = „pagina“ element, atunci exemplul tematic este aplicat tuturor elementelor din acea pagină. Probabil nu veți merge până la 26 de mostre diferite, dar cel mai probabil veți folosi 3 sau 4 mostre diferite pentru a obține un amestec frumos de culori diferite în aplicația dvs. Aveți un joc cu ThemeRoller, există mai multe opțiuni decât tragerea și plasarea culorilor implicite! Aveți posibilitatea să ajustați gradiente, umbre și chiar modificați lumina și saturația culorilor.
De-a lungul ultimelor trei versiuni RC, au existat câteva completări semnificative ale cadrului, deci dacă utilizați încă una dintre versiunile beta sau pur și simplu nu știați că RC1, RC2 sau RC3 au fost lansate, următorul este un pic surprinde modificările.
RC1 a introdus unele trucuri de design pentru Collapsibles, eliminând stilul butonului suplimentar în jurul pictogramei +/- și adăugând capacitatea containerului de conținut care se poate collași. Adăugarea atributului date de conținut temă la containerul collapsabil, de asemenea, pătrat de pe colțurile antetului în partea de jos, dând aspectul containerului o estetică mai fluidă.
Dacă doriți să începeți cu collapsables, aici este codul de bază. Următoarele vă vor oferi un singur container pliabil:
Antet în bara de titlu
Conținutul în containerul pliabil.
Dacă doriți să grupezi o grămadă de recipiente pliabile împreună și să atingeți efectul de accorrdiune popular, tot ce trebuie să faceți este să înfășurați un grup de recipiente care se pot collase într-un înveliș div cu rolul de date al pliabil-set.
Opțiunile fixe pe poziția iOS 5 au fost îmbunătățite de la versiunea beta cu acest RC, dar au fost încă oprite în mod prestabilit. Pentru a utiliza această caracteristică, va trebui să aplicați suprascrierea atunci când mobileinit evenimentul este declanșat. Implicit, jQuery Mobile aplică anumite îmbunătățiri de marcare atunci când este încărcat și este încărcat înainte document.ready incendii. Din fericire, unul dintre marile lucruri despre jQuery Mobile este că setările sunt configurabile cu ușurință utilizând jQuery $ .extend metodă și obligatorie pentru mobileinit eveniment. Asigurați-vă că fișierul script care conține opțiunile dvs. este inclus după jQuery, dar înainte de jQuery Mobile. Pentru a face acest lucru, codul dvs. ar arăta mai jos:
Accentsconagua
$ (document) .bind ("mobileinit", funcția () $ .extend ($. mobile, touchOverflowEnabled: true);); Există o grămadă de opțiuni configurabile pe care le puteți citi aici. Unele dintre cele pe care le-am folosit în mod regulat sunt:
loadingMessage care este un șir și în mod implicit este setat la "încărcare". pageLoadErrorMessage din nou este un șir și în mod implicit este setat la "Error Loading Page". defaultPageTransition este un șir și în mod prestabilit este setat să "alunece". RC2 a fost relansat la jumătatea lunii octombrie și a cumpărat de-a lungul unor schimbări majore. Au existat adăugiri la suportul HTML5 pentru tipurile de intrări, inclusiv timp, Data și culoare. Acest lucru a fost doar asigurarea că aceste elemente au fost stil atunci când apare pe pagină. A fost introdusă capacitatea de a selecta personalizat ca parte a unui grup - astfel încât acestea să pară mai integrate. Dacă vă împachetați FIELDSET în a div cu date-rol = "controlgroup" , câmpurile vor apărea grupate într-un singur modul. adăugare Tip de date = „orizontal“ le va grupa orizontal.
Una dintre cele mai mari schimbări din ultima versiune a fost separarea foilor de stil pentru tematică și structură. A fost că ați include o singură foaie de stil de la jQuery care includea toate CSS structurate și stilurile pentru diferite teme. Dacă doriți să adăugați personalizare la CSS, ar trebui să aveți propria foaie de lucru care să suprascrie orice setat deja. Bineînțeles, pe măsură ce dezvoltăm pentru mobil și lățimea de bandă este importantă, structura și foile de stil tematice au fost acum separate.
Au existat și alte adăugări și remedierile de eroare, inclusiv crearea de forme cu lățimea de 100% în mod implicit, dialoguri cu o lățime maximă și o nouă clasă de ajutor pentru ascunderea elementelor într-un mod astfel încât să poată fi accesate în continuare de tehnologii de asistență, cum ar fi cititoare de ecran. Verificați notele de lansare și jurnalul de modificări pentru toate detaliile.
Eliberarea lui RC3 a venit ca un șoc pentru unii pe 13 noiembrie, deoarece echipa a spus că versiunea oficială 1.0 va veni imediat după RC2. RC3 a fost bine meritat, deoarece au existat o mulțime de îmbunătățiri de performanță făcute, echipa doar a vrut să se asigure că codul a fost toate alerga bine înainte de a pune o versiune finală. Puteți citi despre versiunea RC3 aici și primul lucru pe care îl veți observa este îmbunătățirea performanțelor. Au existat și câteva adăugiri noi:
Acum puteți seta linkBindingEnabled la fals (adevărat implicit) dacă doriți să faceți față tuturor evenimentelor de clic cu o altă bibliotecă sau utilizând anumite coduri personalizate. De asemenea, puteți să stylizați suprapunerea care apare cu dialogul prin setare date-suprapunere-temă fie pe ambalajele de pagini suprapuse, fie pe modulul de selectare.
În cele din urmă, documentația a primit o revizuire necesară și a fost actualizată cu demo-uri ale tuturor funcțiilor, câteva sfaturi despre început și câteva sfaturi despre construirea aplicațiilor jQuery împreună cu Phonegap, care pot fi găsite aici.
jQuery Mobile a parcurs o lungă perioadă de timp în ultimele luni, să nu mai vorbim de anul trecut și, dacă este vorba de o bibliotecă părinte, aceasta va deveni prima opțiune pentru mulți dezvoltatori de a se scufunda chiar în construirea de aplicații web mobile. Curba de învățare este mult mai puțin decât o soluție ca SenchaTouch sau Titanium Mobile, și, în opinia mea, acest fapt va determina accelerarea adopției. ThemeRoller și opțiunile globale de configurare oferă, de asemenea, un nivel de personalizare care este atât de ușor de utilizat încât chiar și cei mai amatori ai coder-ului ar trebui să-l găsească rapid pentru a ridica și a începe cu teme personalizate.
Există câteva lucruri pe care sunt sigur că le-am dori să le adăugăm și cu timpul - ca și în cazul jQuery - nu mă îndoiesc că vor fi făcute îmbunătățiri suplimentare. Vă îndemn să mergeți și să verificați jQuery Mobile dacă nu ați făcut-o încă și dacă utilizați o versiune mai veche a acestuia, asigurați-vă că verificați lista de schimbări pentru notele de lansare pentru fiecare versiune pe care o aveți înainte înainte de actualizare.
Vă vom ține la curent cu Mobiletuts + pe măsură ce progresează jQuery Mobile, dar dacă doriți să vedeți mai multe sfaturi și tutoriale despre jQuery Mobile, anunțați-ne în comentariile!
