Creați un site web mobil cu jQuery Mobile

Conţinut

• Cum se codifică mai multe pagini într-un singur fișier HTML
• Descriere
• Cum se utilizează casetele de dialog și tranzițiile
• Tranzițiile care pot fi utilizate
• Descriere
• Cum se creează butoane
• Descriere
• Cum se creează o bară de navigare
• Cum se codifică codul HTML pentru o bară de navigare:
• Cum să formatați conținut cu jQuery Mobile
• Stilurile implicite pe care le folosește jQuery Mobile
• Descriere
• Cum se aplică teme elementelor HTML
• Două moduri de a aplica o temă:
• Descriere
• Perspectivă

Acesta este un extras editat din capitolul 15 din HTML5 și CSS3 ale lui Murach de Zak Ruvalcaba și Anne Boehm.

jQuery Mobile este o bibliotecă JavaScript gratuită, open-source, multiplatformă, pe care o puteți utiliza pentru dezvoltarea de site-uri web mobile. Această bibliotecă vă permite să creați pagini care arată și se simt ca paginile unei aplicații mobile native.

Deși jQuery Mobile este disponibil în prezent ca versiune beta test, această versiune oferă deja toate caracteristicile de care aveți nevoie pentru dezvoltarea unui site web excelent pentru mobil. Ca urmare, puteți începe să îl utilizați imediat. De asemenea, vă puteți aștepta ca această versiune să fie îmbunătățită continuu, astfel încât jQuery Mobile se va îmbunătăți doar.

În acest articol veți învăța tehnicile de bază pentru crearea paginilor unui site web mobil. Aceasta va include utilizarea de casete de dialog, butoane și bare de navigare.

Cum se codifică mai multe pagini într-un singur fișier HTML

Spre deosebire de modul în care dezvoltați paginile web pentru un site web ecran, jQuery Mobile vă permite să creați mai multe pagini într-un singur fișier HTML. Acest lucru este ilustrat în figura 15-7. Aici puteți vedea două pagini ale unui site împreună cu codul HTML pentru aceste pagini. Ceea ce este surprinzător este că ambele pagini sunt codificate într-un singur fișier HTML.

Pentru fiecare pagină, codificați un element div cu „pagina” ca valoare a atributului rol de date. Apoi, în cadrul fiecărui element div, codați elementele div pentru antetul, conținutul și subsolul fiecărei pagini. Mai târziu, când fișierul HTML este încărcat, se afișează prima pagină din corpul fișierului.

Pentru a face legătura între paginile din fișierul HTML, utilizați substituenți așa cum se arată în figura 7-11 din capitolul 7. De exemplu, elementul a> din prima pagină din acest exemplu merge la „#toobin” atunci când utilizatorul atinge element h2 sau img care este codificat ca conținut pentru acest link. Aceasta se referă la elementul div cu „toobin” ca atribut id, ceea ce înseamnă că atingerea linkului duce cititorul la a doua pagină din fișier.

Deși acest exemplu arată doar două pagini, puteți codifica mai multe pagini într-un singur fișier HTML. Amintiți-vă, totuși, că toate paginile împreună cu imaginile lor, JavaScript și fișierele CSS sunt încărcate cu un singur fișier HTML. Ca urmare, timpul de încărcare va deveni excesiv dacă stocați prea multe pagini într-un singur fișier. Când se întâmplă acest lucru, vă puteți împărți paginile în mai multe fișiere HTML.

Codul HTML pentru cele două pagini din corpul unui fișier HTML:

div data-role = "page"> header data-role = "header"> h1> SJV Town Hall / h1> / header> section data-role = "content"> h3> The 2011-2012 Speakers / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> 19 octombrie 2011 / h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>! - ELEMENTELE PENTRU RESTUL VORBĂTORILOR - -> / section> footer data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "page" id = "toobin"> header data-role = "header"> h1> SJV Town Hall / h1> / header> section data-role = "content"> h3> The Supreme Nine: br> Black Robed Secrets / h3> img src = "images / toobin_court.cnn.webp" alt = "Jeffrey Toobin "> p> Autor al best seller-ului apreciat de critici, i> The Nine:! - COPIA CONTINUĂ -> / section> footer data-role =" footer "> h4> © 2011 / h4> / footer> / div>

Descriere

• Când utilizați jQuery Mobile, nu trebuie să dezvoltați un fișier HTML separat pentru fiecare pagină. În schimb, în ​​cadrul elementului corp al unui singur fișier HTML, codificați un element div pentru fiecare pagină cu atributul său de date-rol setat la „pagină”.
• Pentru fiecare element div, setați atributul id la o valoare de substituent care poate fi accesată de atributele href din elementele a> ale altor pagini.

Cum se utilizează casetele de dialog și tranzițiile

Figura 15-8 arată cum să creați o casetă de dialog care se deschide când se atinge un link. Pentru a face acest lucru, codificați caseta de dialog la fel ca orice altă pagină. Dar în elementul a> care merge la acea pagină, codificați un atribut data-rel cu „dialeg” ca valoare.

Așa cum arată exemplele din această figură, fișierul jQuery Mobile CSS formatează o casetă de dialog diferit de o pagină web normală. În mod implicit, o casetă de dialog va avea un fundal întunecat cu text alb în prim plan, iar antetul și subsolul nu vor acoperi lățimea paginii. O casetă de dialog va avea, de asemenea, un „X” în antet pe care utilizatorul trebuie să îl atingă pentru a reveni la pagina anterioară.

Când codificați un element a> care merge la altă pagină sau casetă de dialog, puteți utiliza și atributul de tranziție a datelor pentru a specifica una dintre cele șase tranziții care sunt rezumate în tabelul din această figură. Fiecare dintre aceste tranziții este menită să imite un efect pe care îl utilizează un dispozitiv mobil ca un iPhone.

Tranzițiile care pot fi utilizate

HTML care deschide pagina ca o casetă de dialog cu tranziția „pop”:

a href = "# toobin" data-rel = "dialog" data-transition = "pop">

HTML care deschide pagina cu tranziția „fade”:

a href = "# toobin" data-transition = "fade">

Descriere

• Codul HTML pentru un căsuță de dialog este codat așa cum este codată orice pagină. Cu toate acestea, elementul a> care se leagă de pagină include atributul data-rel cu „dialog” ca valoare. Pentru a închide caseta de dialog, utilizatorul atinge X în antetul casetei.
• Pentru a specifica modul în care se deschide o pagină sau o casetă de dialog, puteți utiliza atributul de tranziție a datelor cu una dintre valorile din tabelul de mai sus. Dacă un dispozitiv nu acceptă tranziția pe care o specificați, atributul este ignorat.
• Stilizarea pentru o casetă de dialog este realizată de fișierul jQuery Mobile CSS.

Cum se creează butoane

Figura 15-9 arată cum să utilizați butoanele pentru a naviga de la o pagină la alta. Pentru a face acest lucru, trebuie doar să setați atributul data-role pentru un element> la „buton”, iar jQuery Mobile face restul.
Cu toate acestea, puteți seta și alte atribute pentru butoane. Dacă, de exemplu, doriți ca două sau mai multe butoane să apară unul lângă altul, cum ar fi primele două butoane din această figură, puteți seta atributul date-inline la „adevărat”.

Dacă doriți să adăugați una dintre cele 18 pictograme furnizate de jQuery Mobile la un buton, codificați și atributul pictogramă date. De exemplu, al treilea buton din acest exemplu folosește pictograma „șterge”, iar al patrulea buton folosește pictograma „acasă”. Toate aceste pictograme arată ca pictogramele pe care le-ați putea vedea într-o aplicație mobilă nativă. De altfel, aceste pictograme nu sunt fișiere separate pe care pagina trebuie să le acceseze. În schimb, acestea sunt furnizate de biblioteca jQuery Mobile.

Dacă doriți să grupați două sau mai multe butoane pe orizontală, cum ar fi butoanele Da, Nu și Poate din această figură, puteți codifica elementele a> pentru butoanele dintr-un element div care are „controlgroup” ca atribut rol-date și „Orizontal” ca atribut de tip date. Sau, pentru a grupa butoanele pe verticală, puteți schimba atributul tip de date la „vertical”.

Dacă setați atributul date-rel pentru un buton la „înapoi” și atributul href la simbolul lirei (#), butonul va reveni la pagina care l-a numit. Cu alte cuvinte, butonul funcționează ca un buton Înapoi. Acest lucru este ilustrat de ultimul buton din conținutul paginii.

Ultimele două butoane arată cum apar butoanele în subsolul unei pagini. Aici, pictogramele și textul sunt albe pe un fundal negru. În acest caz, atributul de clasă pentru subsol este setat la „ui-bar”, ceea ce îi spune jQuery Mobile că ar trebui să pună puțin mai mult spațiu în jurul conținutului subsolului. Veți afla mai multe despre asta în figura 15-12.

Codul HTML pentru butoanele din secțiune:

! - Pentru butoanele inline, setați atributul de linie de date la adevărat -> a href = "#" data-role = "button" data-inline = "true"> Anulare / a> a href = "#" data -role = "button" data-inline = "true"> OK / a>! - Pentru a adăuga o pictogramă la un buton, utilizați atributul data-icon -> a href = "#" data-role = "button "data-icon =" delete "> Delete / a> a href =" # "data-role =" button "data-icon =" home "> Home / a>! - Pentru a grupa butoanele, utilizați un element div cu atributele care urmează -> div data-role = "controlgroup" data-type = "horizontal"> a href = "#" data-role = "button" data-icon = "check"> Da / a> a href = "#" data-role = "button" data-icon = "arrow-d"> Nu / a> a href = "#" data-role = "button"> Poate / a> / div>! - To codați un buton Înapoi, setați atributul date-rel la înapoi -> a href = "#" data-role = "button" dat-rel = "înapoi" data-icon = "înapoi"> Înapoi la pagina anterioară / a >

Codul HTML pentru butoanele din subsol:

footer data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> Adăugați la Facebook / a> a href = "http: //www.twitter.com "data-role =" button "data-icon =" plus "> Tweetează această pagină / a> / subsol>

Descriere

• Pentru a adăuga un buton la o pagină web, codați un element a> cu atributul său rol de date setat la „buton”.

Cum se creează o bară de navigare

Figura 15-10 arată cum puteți adăuga o bară de navigare la o pagină web. Pentru aceasta, codificați un element div cu rolul său de date setat la „navbar”. În cadrul acestui element, codificați un element ul care conține elemente li care conțin elementele a> pentru elementele din bara de navigare. Rețineți, totuși, că nu codificați atributul data-role pentru elementele a>.

Pentru a schimba culoarea elementelor din bara de navigare, codul din acest exemplu include atributul data-theme-b pentru fiecare element. Ca urmare, jQuery Mobile schimbă culoarea de fundal a fiecărui articol din negru, care este implicit, într-un albastru atractiv. În plus, acest cod setează atributul clasei pentru butonul activ la „ui-btn-active”, astfel jQuery Mobile schimbă culoarea butonului activ într-un albastru mai deschis. Aceasta arată cum puteți schimba formatarea utilizată de jQuery Mobile și veți afla mai multe despre asta în continuare.

Codul HTML pentru bara de navigare:

header data-role = "header"> h1> SJV Town Hall / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-theme = "b "> Home / a> / li> li> a href =" # speakers "data-icon =" star "data-theme =" b "> Boxe / a> / li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> Contactați-ne / a> / li> / ul> / div> / header>

Cum se codifică codul HTML pentru o bară de navigare:

• Codificați un element div în elementul antet. Apoi, setați atributul data-role pentru elementul div la „navbar”.
• În cadrul elementului div, codați un element ul care conține un element li pentru fiecare legătură.
• În cadrul fiecărui element li, codificați un element a> cu un atribut href care utilizează un substituent pentru pagina la care ar trebui să meargă linkul. Apoi, setați atributul date-icon la pictograma pe care o alegeți.
• Pentru elementul activ din bara de navigare, setați atributul de clasă la „ui-btn-active”.Apoi, culoarea acestui element va fi mai deschisă decât celelalte elemente din bara de navigare.
• De asemenea, ar trebui să utilizați atributul data-theme pentru a aplica o temă jQuery Mobile fiecărui element din bara de navigare. În caz contrar, butoanele din bară vor avea aceeași culoare ca și restul antetului. Pentru a afla mai multe despre aplicarea temelor, vezi figura 15-12.

Cum să formatați conținut cu jQuery Mobile

După cum ați văzut deja, jQuery Mobile formată automat componentele unei pagini web pe baza propriei sale foi de stil. Acum, veți afla mai multe despre asta, precum și despre modul de ajustare a stilului implicit pe care îl folosește jQuery Mobile.

Stilurile implicite pe care le folosește jQuery Mobile

Figura 15-13 prezintă stilurile implicite pe care jQuery Mobile le folosește pentru elemente HTML comune. Pentru toate stilurile sale, jQuery Mobile se bazează pe motorul de redare al browserului, astfel încât stilul său propriu este minim. Acest lucru menține timpul de încărcare rapid și minimizează cheltuielile pe care CSS excesiv le-ar impune unei pagini.

După cum puteți vedea, stilul jQuery Mobile este atât de eficient încât nu ar trebui să-i modificați stilul oferind propria fișă de stil CSS. De exemplu, distanța dintre elementele din lista neordonată și formatarea tabelului sunt acceptabile atât cum sunt. De asemenea, tipul negru pe fundalul gri este în concordanță cu formatarea pentru aplicații mobile native.

Descriere

• În mod implicit, jQuery Mobile aplică automat stiluri elementelor HTML pentru o pagină. Aceste stiluri nu sunt doar atractive, ci și imită stilurile native ale unui browser.
• În mod implicit, jQuery Mobile aplică o cantitate mică de umplutură în partea stângă, dreapta, sus și jos a fiecărei pagini mobile.
• În mod implicit, linkurile sunt puțin mai mari decât textul normal. Acest lucru facilitează accesul utilizatorului la linkuri.
• În mod implicit, linkurile sunt subliniate cu culoarea albastră ca font.

Cum se aplică teme elementelor HTML

În unele cazuri, veți dori să modificați stilurile implicite pe care jQuery Mobile le folosește. Ați văzut deja acest lucru în bara de navigare din figura 15-10. Pentru a schimba stilurile implicite, puteți utiliza cele cinci teme oferite de jQuery Mobile. Acestea sunt rezumate în figura 15-12. Din nou, aceste teme sunt menite să imite aspectul unei aplicații mobile native.

O modalitate de a aplica teme este de a codifica un atribut temă de date cu litera temă ca valoare. Ați văzut acest lucru în bara de navigare din figura 15-10 și puteți vedea acest lucru în codul celei de-a doua bare de navigare din această figură. Aici, atributul date-temă aplică tema „e” la antet și tema „d” elementelor din bara de navigare.

Cealaltă modalitate de a aplica teme este de a seta atributul clasei pentru un element la un nume de clasă care indică o temă. Acest lucru este ilustrat de primul exemplu după tabel. Aici, atributul de clasă este folosit pentru a aplica clasele „ui-bar” și „ui-bar- b” la elementul div. Drept urmare, jQuery Mobile aplică mai întâi stilul implicit pentru o bară elementului și apoi aplică tema b stilului respectiv. În paginile care urmează, veți vedea alte exemple ale acestui tip de stil.

Vă rugăm să rețineți că tabelul din această figură spune să folosiți tema e cu moderare. Asta pentru că folosește o culoare portocalie care funcționează bine pentru accentul unui articol, dar nu este atractivă în doze mari. Acest lucru este ilustrat de al doilea antet și bara de navigare din această figură, care tinde să fie deranjantă atunci când o vedeți în culori.

În general, cel mai bine este să rămâneți cu stilurile implicite și cu primele trei teme, care de obicei funcționează bine împreună. Apoi, puteți experimenta cu temele d și e atunci când credeți că aveți nevoie de ceva mai mult.

Codul HTML pentru al doilea antet și bara de navigare:

header data-role = "header" data-theme = "e"> h1> SJV Town Hall / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home "data-theme =" d "> Home / a> / li> li> a href =" # speakers "data-icon =" star "data-theme =" d "> Boxe / a> / li> li> a href = "# news" id = "news" data-icon = "grid" data-theme = "d"> News / a> / li> / ul> / div> / header>

Cele cinci teme jQuery Mobile:

Două moduri de a aplica o temă:

Prin utilizarea unui atribut temă de date:

li> a href = "# home" data-icon = "home" data-theme = "b"> Acasă / a> / li>

Prin utilizarea unui atribut de clasă care indică tema:

div> Bar / div>

Descriere

• Utilizând cele cinci teme incluse în jQuery Mobile, puteți face ajustări adecvate stilurilor implicite pentru elementele HTML.
• Deși puteți utiliza propria foaie de stil CSS cu o aplicație jQuery Mobile, ar trebui să evitați să faceți acest lucru ori de câte ori este posibil.

Perspectivă

Utilizarea dispozitivelor mobile a crescut dramatic în ultimii ani. Din acest motiv, a devenit din ce în ce mai important să proiectăm site-uri web ușor de utilizat de pe aceste dispozitive. Deși asta înseamnă de obicei dezvoltarea unui site web separat, acesta poate fi un aspect critic al menținerii prezenței dvs. pe Internet.

Din fericire, sarcina de a construi un site web mobil a devenit mult mai ușoară odată cu apariția jQuery Mobile. Paginile web mobile nu mai sunt limitate la pagini statice care conțin titluri, paragrafe, linkuri și imagini miniaturale. Cu jQuery Mobile, dezvoltatorii web pot acum să creeze site-uri web bogate în funcții care arată și se simt ca aplicații mobile native.