Cuprins
Odată activ, jQuery Mobile face două lucruri:
În primul rând, optimizează funcțiile native pentru a-și îmbunătăți performanțele pe dispozitivele mobile.
În al doilea rând, modifică HTML și generează un aspect cu o serie de elemente grafice predefinite care accelerează substanțial viteza de producție.
Instalați jQuery Mobile
Deși este posibilă și o tehnică foarte obișnuită pe site-uri web pentru a instala jQuery Mobile prin conectarea directă la fișierele stocate în cloud, este foarte recomandat să nu aplicați această tehnică pentru aplicațiile PhoneGap. Foarte des aplicația dvs. va fi utilizată fără nicio conexiune la internet sau cu o conexiune intermitentă. Dacă fișierele jQuery sunt legate de documente cloud, aplicația ar putea deveni inutilizabilă.
Pentru a instala acest cadru, primul lucru pe care trebuie să-l faceți este să descărcați jQuery de pe pagina sa oficială:
http://docs.jQuery.com/Downloading_jQuery#Current_Release
Odată descărcat jQuery, trebuie să descărcați pluginul jQuery Mobile de pe site-ul său oficial:
http://jquerymobile.com/download/
Vom începe un exemplu care ne permite să înțelegem programarea și structura aplicației.
Vom crea un fișier html cu următorul cod
Aplicație mobilă Jquery
jQuery Mobile ne permite să creăm interfețe prietenoase cu dispozitivele mobile foarte rapid și cu un efort relativ mic.
Modul în care funcționează este rescriind codul original al documentului și generând unul nou, mai complex, în funcție de caracteristicile și argumentele solicitate.
O caracteristică interesantă a jQuery Mobile este că, spre deosebire de un site web, care trece de la un document HTML la altul pentru a afișa informații, paginile sau ecranele unei aplicații sunt tratate dintr-un singur document HTML.
Paginile sau ecranele sunt într-un singur fișier, jQuery Mobile le gestionează pentru a afișa doar partea din document corespunzătoare fiecărui ecran, în timp ce restul rămâne ascuns. În acest fel, încărcarea paginilor este substanțial accelerată, permite, de asemenea, gestionarea evenimentelor și animațiilor între un ecran și altul.
jQuery Mobile profită din plin de noile elemente HTML5 și folosește intens atributele personalizate definite cu prefixul „date-”
De exemplu rol de date, unul dintre cele mai utilizate atribute în jQuery Mobile, vă permite să definiți rolul la nivelul funcționalității și aspectului elementului care îl conține. Prin definirea rolului unui element, acest atribut vă permite să creați pagini, butoane, meniuri și multe alte elemente.
Prin inserarea atributului data-role în orice etichetă îl transformăm într-un element de interfață. Nu este nevoie să adăugați niciun cod suplimentar jQuery adăugați toate elementele grafice, clasele și chiar animațiile necesare pentru funcționarea acelui element particular.
De exemplu, pentru a crea o pagină, utilizați atributul data-role = ”pagina” prin urmare:
- Ecranul 1
- Ecranul 2
Să luăm legătura pe care tocmai am creat-o puțin mai departe și să adăugăm atributul jQuery Mobile data-role = ”button”, astfel încât acest link să se comporte ca un buton:
Pentru a reveni la pagina principală, puteți aplica tehnica anterioară de legare a unui link la id-ul paginii principale, sau chiar mai simplu, puteți utiliza atributul data-rel = ”înapoi” care returnează aplicația pe ecranul imediat anterior .V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv
