Construi un site mobil cu Jquery Mobile

jQuery Mobile este o, bazată pe HTML5 sistem de interfață cu utilizatorul optimizat-touch.Acesta este construit pe platforma jQuery și jQuery UI, si este ideal pentru dezvoltarea rapidă mobile.Cadrul jQuery Mobile utilizeaza atribute speciale pentru a ajuta la definirea și elementele de stil dvs., fără a fi nevoie să scrie clasa a unor norme detaliate le.

1. 1
   Navigați la pagina jQuery Mobile, și apoi faceți clic pe tab-ul "Download" din meniul principal de navigare.

   Anunț

   A fost acest pas utila?Da |nr |Am nevoie de ajutor
2. 2
   Derulați în jos pe pagina de descărcare până când vedeți o Copy-and-Paste Fragment pentru fișierele CDN găzduite secțiunea .

   Copiați liniile de cod pe clipboard.Aceste trei fișiere de referință sunt tot ce ai nevoie pentru a pune în aplicare cadrul.

   instagram viewer

   Anunț

   A fost acest pas utila?Da |nr |Am nevoie de ajutor
3. 3
   Deschideți software-ul de dezvoltare preferat și de a crea un nou document HTML.

   Dacă nu aveți software-ul de dezvoltare, deschideți aplicația Notepad pe computer.

   A fost acest pas utila?Da |nr |Am nevoie de ajutor
4. 4
   Adăugați trimiterile la documentul HTML.

   În interiorul etichetele cap , lipiți link-urile de fișiere CDN găzduite.

   A fost acest pas utila?Da |nr |Am nevoie de ajutor
5. 5
   Creați prima "pagina" .

   cu cadrul jQuery Mobile, creați mai multe pagini în cadrul aceluiași document HTML.În interiorul tag-uri corp , creați un container div.Se adaugă atributul de date rol, și atribuiți-o valoare a paginii .În cele din urmă, adăugați atributul ID-ul și atribuiți-o valoare de acasă .

   A fost acest pas utila?Da |nr |Am nevoie de ajutor
6. 6
   Adauga antet , conținut și subsol div containere .

   În interiorul containerului div pagina, crea mai multe trei etichete div.Cu ajutorul rol de date atribut , atribuie valori ale lui antet , conținut și subsol respectiv.Aceasta este structura de bază a unei pagini jQuery Mobile.

   A fost acest pas utila?Da |nr |Am nevoie de ajutor
7. 7
   Adăugați un antet și titluri de subsol .

   Utilizarea H1 poziția tag-ul, de a crea poziția titluri pentru etichetele de antet și subsol.

   A fost acest pas utila?Da |nr |Am nevoie de ajutor
8. 8
   Creați oa doua pagină .

   În afara containerului div care are de date rol atributul setat la pagina, a crea un nou container div.Se adaugă rol de date atribut , și apoi setați-l la pagina.Se adaugă atributul ID-ul , și apoi setați-l la pagina 2. În sfârșit, adăugați containere div pentru antet, conținut și subsol, astfel încât structura seamănă cu pagina de start.

   A fost acest pas utila?Da |nr |Am nevoie de ajutor
9. 9
   Creați un pagina de meniu.

   pagina meniului va fi creat în același mod ca și primele două pagini, dar fără un subsol.Creați un container div, și setați atributul său de date rol la pagina.Se adaugă atributul ID-, și îi conferă o valoare de main_nav.

   A fost acest pas utila?Da |nr |Am nevoie de ajutor
10. 10
    Crearea structura meniului de navigare.

    În interiorul conținutului containerului div , creați o listă neordonată.Se adaugă atributul de date rol, și setați valoarea la ListView.Se adaugă atributul de date-insert și setați valoarea la true.In interiorul tag-uri ul pentru lista neordonată, adăugați două etichete listă de element( tag-uri li).

    A fost acest pas utila?Da |nr |Am nevoie de ajutor
11. 11
    Crearea link-uri de meniu.

    în interiorul primei liste tag-element, creați o etichetă ancoră.Se adaugă atributul href la tag-ul ancora.Folosi simbolul hashtag pentru a viza un atribut ID , apoi tastați "acasă".Aceasta vizează "acasă" container div.Urmați același procedeu pentru a doua listă de element, dar de data aceasta de tip hashtag "pagina2" pentru a viza a doua pagină.

    A fost acest pas utila?Da |nr |Am nevoie de ajutor
12. 12
    Adăugați link-uri de meniu la alte pagini .

    Acum că meniul este creat, trebuie să setați etichete ancoră pe "acasă" și "pagina 2" pagini pentru ao accesa.Derulați în sus și găsiți secțiunea antet a paginii de pornire.Adăugați o etichetă ancoră în interiorul containerului antet, chiar înainte de tag-ul H1 .Utilizând același proces de conectare așa cum ați făcut-o cu meniul, setați atributul href la hashtagul "main_nav".Se adaugă rol de date atribut , și îi conferă o valoare de buton.Se adaugă de date atribut pictograma , și îi conferă o valoare de bare.În cele din urmă, adăugați atributul date-iconpos, și îi conferă o valoare de notext.Acest lucru creează un buton din stânga a titlului dvs. antet.Repetați acest pas pentru pagina pagina2.

    A fost acest pas utila?Da |nr |Am nevoie de ajutor
    Anunț

• Creați cât mai multe pagini din același document HTML ca iti place.jQuery Mobile utilizează un sistem de navigare AJAX, care începe în mod automat atunci când creați mai multe pagini în cadrul aceluiași document.
• Adăugați date de tranziție atributul la ancore pentru o tranziție imaciuire vizual între pagini.Tranzițiile disponibile sunt estompeze, pop, flip, rândul său, debit, slidefade, tobogan, slideup și slidedown.
• Utilizați date temă atribuie unui stil de aproape fiecare element în proiectul dumneavoastră.În mod implicit, jQuery Mobile vine cu cinci eșantioane de culori pentru tine de a utiliza.Sistemul theming foloseste litere ca valori.În consecință, de date temă atributul acceptă valori ale a, b, c, d și e, atunci când mai întâi îl descărcați.Check out jQuery Mobile Themeroller pentru a crea o temă personalizată, cu până la 26 de culori diferite specimenelor!
• Utilizați poziția de date atribut pentru a crea "lipicioase" sau fixe antete și note de subsol pentru site-ul dumneavoastră.Adăugați acest atribut la un container div care are rol de date setul său la antet sau subsol, iar poziția de date valoarea la fix.
• Check out kit-ul jQuery Mobile Color pentru a începe în curs de dezvoltare cu 26 de specimene tematice diferite.

• Asigurați-vă că pentru a utiliza comentarii HTML pentru a separa paginile jQuery Mobile.Acest lucru vă economisește o tona de timp pe drum, ca un document HTML unic cu mai multe "pagini" devine umflat destul de repede.

• jQuery Mobile Color Kit
• jQuery Mobile
• jQuery Mobile Themeroller
• Dacă ai probleme cu oricare dintre acești pași, întrebați-oîntrebare pentru mai mult ajutor, sau post în secțiunea de comentarii de mai jos.