Cum se construiește o pagină mobilă jQuery mobilă pentru programarea HTML5 și CSS3 - dummies

Există o abordare foarte populară între programatorii HTML5 și CSS3 pentru a construi site-uri web prietenoase cu AJAX și asta înseamnă a utiliza o bibliotecă de add-in pentru jQuery numit jQuery Mobile . Jquery Mobile este o combinație puternică de cod JavaScript și CSS, construit pe partea de sus a bibliotecii.

Biblioteca jQuery funcționează prin preluarea unei pagini HTML5 normale și modificarea acesteia în moduri care emulau un aspect nativ și simt. Codul arată foarte mult ca HTML obișnuit:

Aceasta este o listă obișnuită

Codificată să arate ca

• o listă de dispozitive mobile
• de la > HTML All in One pentru Dummies
• Câteva detalii transformă această pagină într-o minune mobilă:

Includeți jQuery mobile CSS.

Acesta este un fișier CSS special creat pentru a transforma elementele HTML în omologii lor mobili. Deși vă puteți descărca singur, majoritatea dezvoltatorilor se leagă direct de site-ul jQuery.

Include biblioteca jQuery standard.

1. O mare parte a codului se bazează pe jQuery, deci integrați și biblioteca jQuery. Încă o dată, trebuie să trageți jQuery de pe site-ul jQuery principal.

2. Includeți biblioteca mobilă jQuery.

   Aceasta este o bibliotecă JavaScript care extinde biblioteca pentru a adăuga un nou comportament specific pentru dispozitivele mobile.

   Adăugați un atribut data-role = "pagină" la div div.

3. Creați o div principală în pagina dvs. și furnizați atributul acesteia. Acesta este un atribut particularizat de date-rol adăugat de jQuery mobile. jQuery analizează rolurile de date ale diferitelor elemente și aplică în mod automat schimbări de stil și comportament acestor elemente. Alocați divului principal pagina de date. Acest lucru îi spune browserului să trateze întregul div ca pagină.

   Specificați o temă de date.

4. Puteți aplica o temă de date pentru orice element, dar aproape întotdeauna aplicați o temă pe pagină. jquery mobile vine cu un număr de teme implicite construite, numite "a" prin "e. "Experimentați pentru a găsi unul care vă place sau puteți să vă construiți propria versiune mobilă specială a ThemeRoller.

   Adăugați mai multe diviziuni în interiorul paginii dvs.

5. Adăugați câteva diviziuni în interiorul paginii dvs. div. În general, veți avea trei: antet, conținut și subsol.

   Specificați antetul div cu data-role = "header".

6. Dacă plasați oricare dintre informațiile din antetul dvs. într-un div cu un rol de date "antet", îi spuneți utilizatorului jQuery să trateze acest element ca un antet mobil și să aplice stilurile corespunzătoare. Antetul include de obicei o etichetă

7. De obicei, specificați antetul pentru a fi fixat cu atributul data-position = "fixed". Acest lucru asigură că antetul va rămâne în loc dacă se rotește restul conținutului, ceea ce reprezintă un comportament tipic într-o aplicație mobilă.

   Configurați un conținut div.

   Adăugați div cu data-role = "content" pentru a configura aria principală de conținut a paginii dvs. Orice element principal al site-ului dvs. ar trebui să meargă în acest segment.

   Orice legătură poate fi convertită la un buton.

8. Convenția standard în aplicațiile web este de a transforma linkurile în butoane care au o țintă mai mare decât intrarea bazată pe mouse. Este ușor să convertiți orice legătură într-un buton prin adăugarea atributului data-role = "buton" la eticheta de ancorare.

   Conversia listelor în vizualizările de pe mobil.

9. Listele au, de asemenea, convenții speciale în lumea telefoniei mobile. Puteți utiliza atributul role-date pentru a transforma orice listă într-o listăView.

   Construieste un subsol.

10. Adăugați încă o div cu rolul de date setat la "subsol". În mod normal, subsolul (ca și antetul) este fixat cu atributul de poziție a datelor.