Lumikha ng isang mobile website na may jQuery Mobile

Nilalaman

• Paano mag-code ng maraming pahina sa isang solong HTML file
• Paglalarawan
• Paano gumamit ng mga dialog box at transisyon
• Ang mga paglilipat na maaaring magamit
• Paglalarawan
• Paano lumikha ng mga pindutan
• Paglalarawan
• Paano lumikha ng isang bar ng nabigasyon
• Paano i-code ang HTML para sa isang navigation bar:
• Paano mag-format ng nilalaman sa jQuery Mobile
• Ang mga default na istilo na ginagamit ng jQuery Mobile
• Paglalarawan
• Paano mag-apply ng mga tema sa mga elemento ng HTML
• Dalawang paraan upang mag-apply ng isang tema:
• Paglalarawan
• Pananaw

Ito ay isang na-edit na sipi mula sa Kabanata 15 ng Murach's HTML5 at CSS3 nina Zak Ruvalcaba at Anne Boehm.

Ang jQuery Mobile ay isang libre, open-source, cross-platform, library ng JavaScript na maaari mong gamitin para sa pagbuo ng mga mobile website. Hinahayaan ka ng library na ito na lumikha ng mga pahina na mukhang at pakiramdam tulad ng mga pahina ng isang katutubong mobile application.

Kahit na ang jQuery Mobile ay kasalukuyang magagamit bilang isang bersyon ng pagsubok sa beta, ang bersyon na ito ay nagbibigay na ng lahat ng mga tampok na kailangan mo para sa pagbuo ng isang mahusay na mobile website. Bilang isang resulta, maaari mong simulang gamitin ito kaagad. Maaari mo ring asahan ang bersyon na ito na patuloy na pinahusay, kaya't magiging mas mahusay ang jQuery Mobile.

Sa artikulong ito malalaman mo ang pangunahing mga diskarte para sa paglikha ng mga pahina ng isang mobile website. Kasama rito ang paggamit ng mga dialog box, pindutan, at mga bar ng nabigasyon.

Paano mag-code ng maraming pahina sa isang solong HTML file

Sa kaibahan sa paraan ng pagbuo mo ng mga web page para sa isang screen web site, hinayaan ka ng jQuery Mobile na lumikha ng maraming mga pahina sa isang solong HTML file. Ito ay inilalarawan ng pigura 15-7. Dito, maaari mong makita ang dalawang pahina ng isang site kasama ang HTML para sa mga pahinang ito. Ano ang nakakagulat na ang parehong mga pahina ay naka-code sa loob ng isang solong HTML file.

Para sa bawat pahina, nag-code ka ng isang elemento ng div na may "pahina" bilang halaga ng katangiang papel na ginagampanan ng data. Pagkatapos, sa loob ng bawat isa sa mga elementong div, nai-code mo ang mga elemento ng div para sa header, nilalaman, at footer ng bawat pahina. Sa paglaon, kapag na-load ang HTML file, ang unang pahina sa katawan ng file ay ipinapakita.

Upang mai-link sa pagitan ng mga pahina sa HTML file, gumagamit ka ng mga placeholder tulad ng ipinakita sa pigura 7-11 ng kabanata 7. Halimbawa, ang isang> elemento sa unang pahina sa halimbawang ito ay napupunta sa "#toobin" kapag nag-tap ang gumagamit sa h2 o elemento ng img na naka-code bilang nilalaman para sa link na ito. Ito ay tumutukoy sa elemento ng div na may "toobin" bilang katangian ng id, na nangangahulugang ang pag-tap sa link ay magdadala sa mambabasa sa pangalawang pahina sa file.

Bagaman ang halimbawang ito ay nagpapakita lamang ng dalawang pahina, maaari kang mag-code ng maraming mga pahina sa loob ng isang solong HTML file. Gayunpaman, tandaan na ang lahat ng mga pahina kasama ang kanilang mga imahe, JavaScript, at CSS file ay puno ng iisang HTML file. Bilang isang resulta, ang oras ng pag-load ay magiging labis kung nag-iimbak ka ng maraming mga pahina sa isang solong file. Kapag nangyari iyon, maaari mong hatiin ang iyong mga pahina sa higit sa isang HTML file.

Ang HTML para sa dalawang pahina sa katawan ng isang HTML file:

div data-role = "page"> header data-role = "header"> h1> SJV Town Hall / h1> / header> section data-role = "content"> h3> The 2011-2012 Speaker / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> Oktubre 19, 2011 / h4> img src = "mga imahe / toobin75.webp" alt = "Jeffrey Toobin"> / a>! - ANG MGA ELEMENTO PARA SA PANAHON NG MGA NAGSALITA - -> / 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> seksyon data-role = "content"> h3> Ang Kataas-taasang Siyam: br> Black Robed Secrets / h3> img src = "mga imahe / toobin_court.cnn.webp" alt = "Jeffrey Toobin "> p> May-akda ng kritikal na acclaimed pinakamahusay na nagbebenta, i> Ang Siyam:! - PATULOY ANG COPY -> / seksyon> footer data-role =" footer "> h4> © 2011 / h4> / footer> / div>

Paglalarawan

• Kapag gumamit ka ng jQuery Mobile, hindi mo na kailangang bumuo ng isang hiwalay na HTML file para sa bawat pahina. Sa halip, sa loob ng sangkap ng katawan ng isang solong file na HTML, nag-code ka ng isang elemento ng div para sa bawat pahina na nakatakda sa "pahina" ang katangian ng papel na ginagampanan.
• Para sa bawat elemento ng div, itinatakda mo ang katangian ng id sa isang halaga ng placeholder na maaaring ma-access ng mga href na katangian sa a> mga elemento ng iba pang mga pahina.

Paano gumamit ng mga dialog box at transisyon

Ipinapakita ng Larawan 15-8 kung paano lumikha ng isang dialog box na magbubukas kapag na-tap ang isang link. Upang magawa iyon, i-code mo ang dialog box tulad ng gagawin mo sa anumang pahina. Ngunit sa a> elemento na pupunta sa pahinang iyon, nag-code ka ng isang katangian ng data-rel na may "dia- log" bilang halaga nito.

Tulad ng ipinakita ng mga halimbawa sa figure na ito, ang jQuery Mobile CSS file ay nag-format ng isang dialog box na naiiba kaysa sa isang normal na web page. Bilang default, ang isang dialog box ay magkakaroon ng isang madilim na background na may puting harapan na teksto, at ang header at footer ay hindi sumasaklaw sa lapad ng pahina. Ang isang dialog box ay magkakaroon din ng isang "X" sa header na dapat i-tap ng gumagamit upang bumalik sa nakaraang pahina.

Kapag nag-code ka ng isang> elemento na pupunta sa isa pang pahina o dialog box, maaari mo ring gamitin ang katangiang paglipat ng data upang tukuyin ang isa sa anim na mga paglilipat na na-buod sa talahanayan sa figure na ito. Ang bawat isa sa mga paglipat na ito ay sinadya upang gayahin ang isang epekto na ginagamit ng isang mobile device tulad ng isang iPhone.

Ang mga paglilipat na maaaring magamit

HTML na magbubukas sa pahina bilang isang dialog box na may "pop" na paglipat:

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

HTML na magbubukas sa pahina ng transisyon na "kumukupas":

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

Paglalarawan

• Ang HTML para sa a dialog box ay naka-code sa paraang naka-code ang anumang pahina. Gayunpaman, ang a> elemento na nag-uugnay sa pahina ay may kasamang katangian ng data-rel na may "dialog" bilang halaga nito. Upang isara ang dialog box, i-tap ng gumagamit ang X sa header ng kahon.
• Upang tukuyin ang paraan ng pagbubukas ng isang pahina o isang dialog box, maaari mong gamitin ang katangiang paglipat ng data sa isa sa mga halagang nasa talahanayan sa itaas. Kung hindi sinusuportahan ng isang aparato ang paglipat na iyong tinukoy, ang katangian ay hindi papansinin.
• Ang estilo para sa isang dialog box ay ginagawa ng jQuery Mobile CSS file.

Paano lumikha ng mga pindutan

Ipinapakita ng Larawan 15-9 kung paano gamitin ang mga pindutan upang mag-navigate mula sa isang pahina patungo sa isa pa. Upang gawin iyon, itinakda mo lang ang katangiang papel na ginagampanan ng data para sa isang a> elemento sa "pindutan", at ang jQuery Mobile ang natitira.
Gayunpaman, maaari mo ring itakda ang ilang iba pang mga katangian para sa mga pindutan. Kung, halimbawa, nais mong dalawa o higit pang mga pindutan na lumitaw magkatabi, tulad ng unang dalawang mga pindutan sa figure na ito, maaari mong itakda ang katangiang data-inline sa "totoo".

Kung nais mong magdagdag ng isa sa 18 mga icon na ibinibigay ng jQuery Mobile sa isang pindutan, code mo rin ang katangian ng data-icon. Halimbawa, ang pangatlong pindutan sa halimbawang ito ay gumagamit ng icon na "tanggalin", at ang ikaapat na pindutan ay gumagamit ng icon na "tahanan". Ang lahat ng mga icon na ito ay kagaya ng mga icon na maaari mong makita sa loob ng isang katutubong mobile application. Nagkataon, ang mga icon na ito ay hindi hiwalay na mga file na dapat i-access ng pahina. Sa halip, ang mga ito ay ibinigay ng jQuery Mobile library.

Kung nais mong i-grupo ang dalawa o higit pang mga pindutan nang pahalang, tulad ng mga Oo, Hindi, at Marahil na mga pindutan sa figure na ito, maaari mong i-code ang a> mga elemento para sa mga pindutan sa loob ng isang elemento ng div na may "controlgroup" bilang katangian ng data-role na ito "Pahalang" bilang katangian ng uri ng data. O kaya, upang mapangkat ang mga pindutan nang patayo, maaari mong baguhin ang katangiang uri ng data sa "patayo".

Kung itinakda mo ang katangiang data-rel para sa isang pindutan upang "bumalik" at ang katangian ng href sa simbolong pound (#), ang pindutan ay babalik sa pahinang tumawag dito. Sa madaling salita, gumagana ang pindutan tulad ng isang Back button. Ito ay isinalarawan ng huling pindutan sa nilalaman para sa pahina.

Ipinapakita ng huling dalawang mga pindutan kung paano lilitaw ang mga pindutan sa footer para sa isang pahina. Dito, ang mga icon at teksto ay puti laban sa isang itim na background. Sa kasong ito, ang katangian ng klase para sa footer ay nakatakda sa "ui-bar", na nagsasabi sa jQuery Mobile na dapat itong maglagay ng kaunting puwang sa paligid ng mga nilalaman ng footer. Malalaman mo ang higit pa tungkol doon sa pigura 15-12.

Ang HTML para sa mga pindutan sa seksyon:

! - Para sa mga button na inline, itakda ang katangiang linya ng data sa totoo -> isang href = "#" data-role = "button" data-inline = "true"> Kanselahin / a> isang href = "#" na data -role = "button" data-inline = "true"> OK / a>! - Upang magdagdag ng isang icon sa isang pindutan, gamitin ang katangian ng data-icon -> isang href = "#" data-role = "na pindutan "data-icon =" delete "> Delete / a> a href =" # "data-role =" button "data-icon =" home "> Home / a>! - Upang maipangkat ang mga pindutan, gumamit ng isang elemento ng div na may sumusunod ang mga katangiang -> div data-role = "controlgroup" data-type = "pahalang"> isang href = "#" data-role = "button" data-icon = "check"> Oo / a> a href = "#" data-role = "button" data-icon = "arrow-d"> Hindi / a> a href = "#" data-role = "button"> Siguro / a> / div>! - To code a Back button, itakda ang atribut ng data-rel sa likod -> isang href = "#" data-role = "button" dat-rel = "back" data-icon = "back"> Bumalik sa nakaraang pahina / a >

Ang HTML para sa mga pindutan sa footer:

footer data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> Idagdag sa Facebook / a> a href = "http: //www.twitter.com "data-role =" button "data-icon =" plus "> I-tweet ang Page na ito / a> / footer>

Paglalarawan

• Upang magdagdag ng isang pindutan sa isang web page, nag-code ka ng isang a> elemento kasama ang katangiang data-role na nakatakda sa "button".

Paano lumikha ng isang bar ng nabigasyon

Ipinapakita ng Larawan 15-10 kung paano ka makakapagdagdag ng isang bar ng nabigasyon sa isang web page. Upang magawa iyon, mag-code ka ng isang elemento ng div kasama ang papel na ginagampanan ng data na itinakda sa "navbar". Sa loob ng elementong ito, nag-code ka ng isang ul na elemento na naglalaman ng mga elemento ng li na naglalaman ng mga a> elemento para sa mga item sa bar ng nabigasyon. Gayunpaman, tandaan na hindi mo na-code ang katangiang papel-papel para sa mga a> elemento.

Upang baguhin ang kulay para sa mga item sa bar ng nabigasyon, ang code sa halimbawang ito ay may kasamang katangian ng data na tema-b para sa bawat item. Bilang isang resulta, binabago ng jQuery Mobile ang kulay ng background ng bawat item mula sa itim, na kung saan ay ang default, sa isang kaakit-akit na asul. Bilang karagdagan, itinatakda ng code na ito ang katangian ng klase para sa aktibong pindutan na "ui-btn-active" kaya't binabago ng jQuery Mobile ang kulay para sa aktibong pindutan sa isang mas magaan na asul. Ipinapakita nito kung paano mo mababago ang pag-format na ginamit ng jQuery Mobile, at malalaman mo pa ang susunod tungkol dito.

Ang HTML para sa navigation bar:

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 =" # speaker "data-icon =" star "data-theme =" b "> Mga nagsasalita / a> / li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> Makipag-ugnay sa Amin / a> / li> / ul> / div> / header>

Paano i-code ang HTML para sa isang navigation bar:

• Code ng isang elemento ng div sa loob ng elemento ng header. Pagkatapos, itakda ang katangiang papel na ginagampanan ng data para sa elemento ng div sa "navbar".
• Sa loob ng elementong div, i-code ang isang elemento ng ul na naglalaman ng isang elemento ng li para sa bawat link.
• Sa loob ng bawat elemento ng li, code ang isang a> elemento na may isang katangian ng href na gumagamit ng isang placeholder para sa pahinang dapat puntahan ng link. Pagkatapos, itakda ang katangian ng data-icon sa icon na iyong pinili.
• Para sa aktibong item sa navigation bar, itakda ang katangian ng klase sa "ui-btn-active". Pagkatapos, ang kulay ng item na ito ay mas magaan kaysa sa iba pang mga item sa bar ng nabigasyon.
• Dapat mo ring gamitin ang katangian ng data-tema upang maglapat ng isang jQuery Mobile tema sa bawat item sa bar ng nabigasyon. Kung hindi man, ang mga pindutan sa bar ay magiging parehong kulay tulad ng natitirang header. Upang matuto nang higit pa tungkol sa paglalapat ng mga tema, tingnan ang larawan 15-12.

Paano mag-format ng nilalaman sa jQuery Mobile

Tulad ng nakita mo na, awtomatikong nai-format ng jQuery Mobile ang mga bahagi ng isang web page batay sa sarili nitong sheet ng istilo. Ngayon, malalaman mo pa ang tungkol dito, pati na rin kung paano ayusin ang default na estilo na ginagamit ng jQuery Mobile.

Ang mga default na istilo na ginagamit ng jQuery Mobile

Ipinapakita ng Larawan 15-13 ang mga default na istilo na ginagamit ng jQuery Mobile para sa mga karaniwang elemento ng HTML. Para sa lahat ng mga istilo nito, ang jQuery Mobile ay umaasa sa rendering engine ng browser kaya't ang sarili nitong istilo ay minimal. Pinapanatili nito ang mga oras ng pag-load nang mabilis at binabawasan ang overhead na ipapataw ng labis na CSS sa isang pahina.

Tulad ng nakikita mo, ang estilo ng jQuery Mobile ay napakabisa na hindi mo kailangang baguhin ang istilo nito sa pamamagitan ng pagbibigay ng iyong sariling sheet ng istilo ng CSS. Halimbawa, ang spacing sa pagitan ng mga item sa hindi naayos na listahan at ang pag-format ng talahanayan ay kapwa katanggap-tanggap sa paraan ng mga ito. Gayundin, ang itim na uri sa kulay-abong background ay pare-pareho sa pag-format para sa mga katutubong mobile application.

Paglalarawan

• Bilang default, awtomatikong inilalapat ng jQuery Mobile ang mga istilo sa mga elemento ng HTML para sa isang pahina. Ang mga istilong ito ay hindi lamang kaakit-akit, ngunit gayahin din ang mga katutubong istilo ng isang browser.
• Bilang default, naglalapat ang jQuery Mobile ng kaunting padding sa kaliwa, kanan, itaas, at ilalim ng bawat mobile page.
• Bilang default, ang mga link ay bahagyang mas malaki kaysa sa normal na teksto. Ginagawa nitong mas madali para sa gumagamit na i-tap ang mga link.
• Bilang default, ang mga link ay may salungguhit na asul bilang kulay ng font.

Paano mag-apply ng mga tema sa mga elemento ng HTML

Sa ilang mga kaso, gugustuhin mong baguhin ang mga default na istilo na ginagamit ng jQuery Mobile. Nakita mo na iyan sa bar ng nabigasyon ng pigura 15-10. Upang baguhin ang mga default na istilo, maaari mong gamitin ang limang mga tema na ibinibigay ng jQuery Mobile. Ito ay nakabuod sa pigura 15-12. Narito muli, ang mga temang ito ay sinadya upang gayahin ang hitsura ng isang katutubong mobile application.

Ang isang paraan upang mag-apply ng mga tema ay ang pag-code ng isang katangian ng data-tema na may liham tema bilang halaga nito. Nakita mo ito sa nabigasyon na bar sa pigura na 15-10, at makikita mo ito sa code para sa pangalawang nabigasyon sa figure na ito. Dito, inilalapat ng katangiang data-tema ang temang "e" sa header at tema na "d" sa mga item sa bar ng nabigasyon.

Ang iba pang paraan upang mag-apply ng mga tema ay itakda ang katangian ng klase para sa isang elemento sa isang pangalan ng klase na nagpapahiwatig ng isang tema. Ito ay inilalarawan ng unang halimbawa pagkatapos ng talahanayan. Dito, ginagamit ang katangian ng klase upang mailapat ang parehong mga klase ng "ui-bar" at "ui-bar-b" sa elementong div. Bilang isang resulta, inilapat muna ng jQuery Mobile ang default na istilo nito para sa isang bar sa elemento at pagkatapos ay inilalapat ang b tema sa estilo na iyon. Sa mga sumusunod na pahina, makikita mo ang iba pang mga halimbawa ng ganitong uri ng estilo.

Mangyaring tandaan na ang talahanayan sa figure na ito ay nagsasabing gumamit ng temang e matipid. Iyon ay dahil gumagamit ito ng isang kulay kahel na gumagana nang maayos para sa pag-accenting ng isang item, ngunit hindi kaakit-akit sa malalaking dosis. Ito ay inilalarawan ng pangalawang header at nabigasyon na bar sa figure na ito, na kung saan ay may posibilidad na magulo kapag nakita mo ito sa kulay.

Sa pangkalahatan, pinakamahusay na manatili sa mga default na estilo at sa unang tatlong mga tema, na karaniwang gumagana nang maayos. Pagkatapos, maaari kang mag-eksperimento sa mga tema d at e kapag sa tingin mo ay kailangan mo ng isang bagay na higit pa.

Ang HTML para sa pangalawang header at nabigasyon bar:

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 =" # speaker "data-icon =" star "data-theme =" d "> Mga nagsasalita / a> / li> li> a href = "# news" id = "news" data-icon = "grid" data-theme = "d"> News / a> / li> / ul> / div> / header>

Ang limang jQuery Mobile na tema:

Dalawang paraan upang mag-apply ng isang tema:

Sa pamamagitan ng paggamit ng isang katangian ng data-tema:

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

Sa pamamagitan ng paggamit ng isang katangian ng klase na nagsasaad ng tema:

div> Bar / div>

Paglalarawan

• Sa pamamagitan ng paggamit ng limang mga tema na kasama ng jQuery Mobile, maaari kang gumawa ng naaangkop na mga pagsasaayos sa mga default na estilo para sa mga elemento ng HTML.
• Bagaman maaari mong gamitin ang iyong sariling sheet ng istilo ng CSS sa isang jQuery Mobile application, dapat mong iwasan ang paggawa nito hangga't maaari.

Pananaw

Ang paggamit ng mga mobile device ay tumaas nang malaki sa nagdaang ilang taon. Dahil doon, naging mas mahalaga na magdisenyo ng mga web site na madaling gamitin mula sa mga aparatong ito. Bagaman nangangahulugang nangangahulugan ito ng pagbuo ng isang hiwalay na web site, maaari itong maging isang kritikal na aspeto ng pagpapanatili ng iyong presensya sa Internet.

Sa kasamaang palad, ang gawain ng pagbuo ng isang mobile web site ay naging mas madali sa pagkakaroon ng jQuery Mobile. Hindi na limitado ang mga mobile web page sa mga static na pahina na naglalaman ng mga heading, talata, link, at mga thumbnail na imahe. Sa jQuery Mobile, ang mga developer ng web ay maaari na ngayong bumuo ng mga tampok na web site na mayaman sa tampok na parang at katutubong mga mobile application.