Izveidojiet vietni mobilajām ierīcēm, izmantojot jQuery Mobile

Saturs

• Kā kodēt vairākas lapas vienā HTML failā
• Apraksts
• Kā izmantot dialoglodziņus un pārejas
• Pārejas, kuras var izmantot
• Apraksts
• Kā izveidot pogas
• Apraksts
• Kā izveidot navigācijas joslu
• Kā kodēt navigācijas joslas HTML:
• Kā formatēt saturu, izmantojot jQuery Mobile
• Noklusētie stili, kurus izmanto jQuery Mobile
• Apraksts
• Kā lietot tēmas HTML elementiem
• Divi motīvu pielietošanas veidi:
• Apraksts
• Perspektīva

Šis ir rediģēts fragments no 15. Nodaļas Murača HTML5 un CSS3 autori Zaks Ruvalcaba un Anne Boehm.

jQuery Mobile ir bezmaksas, atvērtā koda, starpplatformu, JavaScript bibliotēka, kuru varat izmantot mobilo vietņu izstrādei. Šī bibliotēka ļauj jums izveidot lapas, kas izskatās un šķiet kā vietējās mobilās lietojumprogrammas lapas.

Lai gan jQuery Mobile pašlaik ir pieejams kā beta testa versija, šī versija jau nodrošina visas funkcijas, kas jums nepieciešamas, lai izveidotu izcilu vietni mobilajām ierīcēm. Rezultātā jūs varat sākt to lietot uzreiz. Jūs varat arī sagaidīt, ka šī versija tiks nepārtraukti uzlabota, tāpēc jQuery Mobile kļūs tikai labāka.

Šajā rakstā jūs uzzināsiet pamata metodes mobilās vietnes lapu izveidei. Tas ietvers dialoglodziņu, pogu un navigācijas joslu izmantošanu.

Kā kodēt vairākas lapas vienā HTML failā

Atšķirībā no tā, kā jūs veidojat tīmekļa lapas ekrāna vietnei, jQuery Mobile ļauj vienā HTML failā izveidot vairākas lapas. To ilustrē attēls 15-7. Šeit jūs varat redzēt divas vietnes lapas kopā ar šo lapu HTML. Pārsteidzoši ir tas, ka abas lapas ir kodētas vienā HTML failā.

Katrai lapai jūs kodējat vienu div elementu ar “page” kā datu lomas atribūta vērtību. Tad katrā no šiem div elementiem jūs kodējat div elementus katras lapas galvenei, saturam un kājenei. Vēlāk, kad tiek ielādēts HTML fails, tiek parādīta pirmā lapa faila pamattekstā.

Lai izveidotu saiti starp HTML faila lapām, izmantojiet vietturus, kā parādīts 7. nodaļas 7.-11. Attēlā. Piemēram, šī piemēra pirmās lapas a> elements iet uz “#toobin”, kad lietotājs pieskaras h2 vai img elements, kas ir kodēts kā šīs saites saturs. Tas attiecas uz div elementu, kura ID atribūts ir “toobin”, kas nozīmē, ka pieskaroties saitei, lasītājs nonāk faila otrajā lappusē.

Lai gan šajā piemērā ir parādītas tikai divas lapas, vienā HTML failā varat kodēt daudzas lapas. Tomēr atcerieties, ka visas lapas kopā ar to attēliem, JavaScript un CSS failiem tiek ielādētas ar vienu HTML failu. Rezultātā ielādes laiks kļūs pārmērīgs, ja vienā failā saglabāsit pārāk daudz lapu. Kad tas notiks, jūs varat sadalīt savas lapas vairākos HTML failos.

Divu lapu HTML HTML faila pamattekstā:

div data-role = "page"> header data-role = "header"> h1> SJV rātsnams / h1> / header> section data-role = "content"> h3> Skaļruņi 2011. – 2012. gadam / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> 2011. gada 19. oktobris / h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>! - RUNĀTĀJU PĀRĒJO ELEMENTI -> / section> footer data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "page" id = "toobin"> header data-role = "header"> h1> SJV rātsnams / 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> Kritiski novērtētā bestsellera autors, i> The Deviņi:! - KOPIJA TURPINĀS -> / section> footer data-role =" footer "> h4> © 2011 / h4> / footer> / div>

Apraksts

• Lietojot jQuery Mobile, katrai lapai nav jāizstrādā atsevišķs HTML fails. Tā vietā viena HTML faila pamattekstā jūs katrai lapai kodējat vienu div elementu ar tā datu lomas atribūtu kā “lapa”.
• Katram div elementam ID atribūtu iestatāt kā viettura vērtību, kurai var piekļūt ar citu lapu a> elementu atribūtiem href.

Kā izmantot dialoglodziņus un pārejas

15-8. Attēlā parādīts, kā izveidot dialoglodziņu, kas tiek atvērts, pieskaroties saitei. Lai to izdarītu, dialoglodziņš tiek kodēts tāpat kā jebkurā lapā. Bet elementā a>, kas dodas uz šo lapu, jūs kodējat atribūtu data-rel, kura vērtība ir “dialog”.

Kā rāda šī attēla piemēri, jQuery Mobile CSS fails formatē dialoglodziņu atšķirīgi no parastās tīmekļa lapas. Pēc noklusējuma dialoglodziņā būs tumšs fons ar baltu priekšplāna tekstu, un galvene un kājene neaptver lapas platumu. Dialoglodziņa galvenē būs arī “X”, kas lietotājam jāpieskaras, lai atgrieztos iepriekšējā lapā.

Kodējot elementu>, kas pāriet uz citu lapu vai dialoglodziņu, varat arī izmantot datu pārejas atribūtu, lai norādītu vienu no sešām pārejām, kas apkopotas šī attēla tabulā. Katra no šīm pārejām ir paredzēta, lai atdarinātu efektu, ko izmanto tāda mobilā ierīce kā iPhone.

Pārejas, kuras var izmantot

HTML, kas lapu atver kā dialoglodziņu ar pāreju “pop”:

a href = "# toobin" data-rel = "dialog" data-pāreja = "pop">

HTML, kas atver lapu ar pāreju “izbalināt”:

a href = "# toobin" data-pāreja = "izbalināt">

Apraksts

• HTML a dialoglodziņš tiek kodēts tā, kā tiek kodēta jebkura lapa. Tomēr a> elements, kas novirza uz lapu, kā vērtību norāda atribūtu data-rel, kura vērtība ir “dialog”. Lai aizvērtu dialoglodziņu, lietotājs pieskaras X lodziņa galvenē.
• Lai norādītu lapas vai dialoglodziņa atvēršanas veidu, varat izmantot datu pārejas atribūtu ar vienu no iepriekš tabulas vērtībām. Ja ierīce neatbalsta jūsu norādīto pāreju, atribūts tiek ignorēts.
• Dialoglodziņa ieveidošanu veic jQuery Mobile CSS fails.

Kā izveidot pogas

15-9. Attēlā parādīts, kā izmantot pogas, lai pārvietotos no vienas lapas uz otru. Lai to izdarītu, vienkārši iestatiet elementa> datu lomas atribūtu uz “poga”, un pārējo veic jQuery Mobile.
Tomēr pogām varat iestatīt arī dažus citus atribūtus. Piemēram, ja vēlaties, lai blakus būtu redzamas divas vai vairākas pogas, piemēram, pirmās divas šī attēla pogas, varat iestatīt atribūtu “data-inline” uz “true”.

Ja vēlaties pogai pievienot vienu no 18 ikonām, ko nodrošina jQuery Mobile, jūs arī kodējat datu ikonas atribūtu. Piemēram, trešajā pogā šajā piemērā tiek izmantota ikona “dzēst”, bet ceturtajā - “mājas” ikona. Visas šīs ikonas izskatās kā ikonas, kuras jūs varētu redzēt vietējā mobilajā lietojumprogrammā. Starp citu, šīs ikonas nav atsevišķi faili, kuriem lapai ir jāpiekļūst. Tā vietā tos nodrošina jQuery Mobile bibliotēka.

Ja vēlaties grupēt divas vai vairākas pogas horizontāli, piemēram, pogas Jā, Nē un Varbūt šajā attēlā, varat kodēt pogas a> div elementā, kura datu lomas atribūtam ir “controlgroup” un “Horizontāls” kā tā datu tipa atribūts. Vai arī, lai grupētu pogas vertikāli, varat mainīt datu tipa atribūtu uz “vertikāls”.

Ja pogai data-rel atribūtu iestatāt uz “back” un href atribūtu mārciņas simbolam (#), poga atgriezīsies lapā, kas to izsauca. Citiem vārdiem sakot, poga darbojas kā poga Atpakaļ. To ilustrē pēdējā poga lapas saturā.

Divas pēdējās pogas parāda, kā pogas parādās lapas kājenē. Šeit ikonas un teksts ir baltā krāsā uz melna fona. Šajā gadījumā kājenes klases atribūts ir iestatīts uz “ui-bar”, kas paziņo jQuery Mobile, ka tam vajadzētu ievietot nedaudz vairāk vietas ap kājenes saturu. Jūs uzzināsiet vairāk par to attēlā 15-12.

Pogas HTML sadaļā:

! - Iekļautajām pogām iestatiet datu līnijas atribūtu uz true -> a href = "#" data-role = "button" data-inline = "true"> Atcelt / a> a href = "#" dati -role = "poga" data-inline = "true"> Labi / a>! - Lai pogai pievienotu ikonu, izmantojiet atribūtu data-icon -> a poga href = "#" data-role = " "data-icon =" delete "> Delete / a> a href =" # "data-role =" button "data-icon =" home "> Sākums / a>! - Lai grupētu pogas, izmantojiet div elementu ar sekojošie atribūti -> div data-role = "controlgroup" data-type = "horizontal"> a href = "#" data-role = "button" data-icon = "check"> Jā / a> a href = "#" data-role = "button" data-icon = "arrow-d"> No / a> a href = "#" data-role = "button"> Varbūt / a> / div>! - uz kodējiet pogu Atpakaļ, iestatiet atribūtu data-rel uz atpakaļ -> a href = "#" data-role = "button" dat-rel = "back" data-icon = "back"> Atpakaļ uz iepriekšējo lapu / a >

Kājenē esošo pogu HTML:

footer data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> Pievienot Facebook / a> a href = "http: //www.twitter.com "data-role =" button "data-icon =" plus "> Čivināt šo lapu / a> / kājene>

Apraksts

• Lai pievienotu pogu tīmekļa lapai, jūs kodējat elementu>, kura datu lomas atribūts ir iestatīts uz “poga”.

Kā izveidot navigācijas joslu

15-10. Attēlā parādīts, kā tīmekļa lapai var pievienot navigācijas joslu. Lai to izdarītu, jūs kodējat div elementu ar tā datu lomu, kas iestatīta uz “navbar”. Šajā elementā jūs kodējat ul elementu, kas satur li elementus, kas satur navigācijas joslas elementu elementus a>. Tomēr ņemiet vērā, ka elementa a> datu lomas atribūtu nekodējat.

Lai mainītu navigācijas joslas vienumu krāsu, šajā piemērā esošajā kodā katram objektam ir atribūts data-theme-b. Rezultātā jQuery Mobile maina katra vienuma fona krāsu no melnas, kas ir noklusējums, uz pievilcīgu zilu. Turklāt ar šo kodu aktīvās pogas klases atribūts tiek iestatīts uz “ui-btn-active”, tāpēc jQuery Mobile maina aktīvās pogas krāsu uz gaišāku zilu. Tas parāda, kā jūs varat mainīt jQuery Mobile izmantoto formatējumu, un par to uzzināsiet vairāk.

Navigācijas joslas HTML:

header data-role = "header"> h1> SJV rātsnams / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-theme = "b "> Sākums / a> / li> li> a href =" # speakers "data-icon =" star "data-theme =" b "> Skaļruņi / a> / li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> Sazinieties ar mums / a> / li> / ul> / div> / header>

Kā kodēt navigācijas joslas HTML:

• Kodējiet div elementu galvenes elementā. Pēc tam iestatiet datu lomas atribūtu div elementam uz “navbar”.
• Div elementā kodējiet ul elementu, kurā katrai saitei ir viens li elements.
• Katrā li elementā kodējiet elementu a> ar atribūtu href, kas izmanto vietturi lapai, uz kuru jāiet saitei. Pēc tam iestatiet datu ikonas atribūtu uz izvēlēto ikonu.
• Aktīvajam navigācijas joslas vienumam iestatiet klases atribūtu uz “ui-btn-active”.Tad šī vienuma krāsa būs gaišāka nekā citas navigācijas joslas vienības.
• Jums arī jāizmanto atribūts data-theme, lai katram navigācijas joslas vienumam lietotu jQuery Mobile motīvu. Pretējā gadījumā joslas pogām būs tāda pati krāsa kā pārējai galvenei. Lai uzzinātu vairāk par motīvu lietošanu, skatiet 15. – 12. Attēlu.

Kā formatēt saturu, izmantojot jQuery Mobile

Kā jau redzējāt, jQuery Mobile automātiski formatē tīmekļa lapas komponentus, pamatojoties uz savu stila lapu. Tagad jūs uzzināsiet vairāk par to, kā arī par to, kā pielāgot noklusējuma stilu, ko izmanto jQuery Mobile.

Noklusētie stili, kurus izmanto jQuery Mobile

15-13. Attēlā parādīti noklusējuma stili, kurus jQuery Mobile izmanto parastajiem HTML elementiem. Neskatoties uz visiem saviem stiliem, jQuery Mobile paļaujas uz pārlūkprogrammas renderēšanas dzinēju, tāpēc paša stils ir minimāls. Tas nodrošina ātru ielādes laiku un samazina papildu izmaksas, ko pārmērīga CSS uzliktu lapai.

Kā redzat, jQuery Mobile stils ir tik efektīvs, ka nevajadzētu mainīt tā stilu, nodrošinot savu CSS stila lapu. Piemēram, atstarpe starp nesakārtotā saraksta vienumiem un tabulas formatējums ir pieņemami tādā veidā, kādā tie ir. Arī melnā krāsa uz pelēkā fona atbilst vietējo mobilo lietojumprogrammu formatējumam.

Apraksts

• Pēc noklusējuma jQuery Mobile automātiski pielieto stilus lapas HTML elementiem. Šie stili ir ne tikai pievilcīgi, bet arī atdarina pārlūka vietējos stilus.
• Pēc noklusējuma jQuery Mobile uzliek nelielu daudzumu polsterējumu katras mobilās lapas kreisajā, labajā, augšējā un apakšējā daļā.
• Pēc noklusējuma saites ir nedaudz lielākas par parasto tekstu. Tādējādi lietotājam ir vieglāk pieskarties saitēm.
• Pēc noklusējuma saites tiek pasvītrotas ar fonta krāsu zilā krāsā.

Kā lietot tēmas HTML elementiem

Dažos gadījumos vēlaties mainīt noklusējuma stilus, kurus izmanto jQuery Mobile. Jūs to jau redzējāt navigācijas joslā attēlā 15-10. Lai mainītu noklusējuma stilus, varat izmantot piecas tēmas, kuras nodrošina jQuery Mobile. Tie ir apkopoti attēlā 15-12. Arī šeit šīs tēmas ir domātas, lai atdarinātu vietējās mobilās lietojumprogrammas izskatu.

Viens no motīvu pielietošanas veidiem ir datu tēmas atribūta kodēšana ar tēmas burtu kā vērtību. Jūs to redzējāt navigācijas joslā attēlā 15-10, un jūs to varat redzēt šīs navigācijas joslas kodā. Šeit datu tēmas atribūts piemēro tēmu “e” galvenei un tēmu “d” navigācijas joslas vienumiem.

Cits veids, kā lietot tēmas, ir iestatīt elementa klases atribūtu klases nosaukumam, kas norāda tēmu. To ilustrē pirmais piemērs pēc tabulas. Šeit klases atribūts tiek izmantots, lai div elementam piemērotu gan “ui-bar”, gan “ui-bar-b” klases. Rezultātā jQuery Mobile vispirms elementam piemēro joslas noklusējuma stilu un pēc tam šim stilam piemēro b tēmu. Nākamajās lappusēs redzēsit citus šāda veida stila piemērus.

Lūdzu, ņemiet vērā, ka šī attēla tabulā teikts, ka taupīgi izmantojiet tēmu e. Tas ir tāpēc, ka tajā tiek izmantota oranža krāsa, kas labi darbojas, lai akcentētu priekšmetu, bet nav pievilcīga lielās devās. To ilustrē šī attēla otrā galvene un navigācijas josla, kurai ir tendence sarauties, kad redzat to krāsainu.

Kopumā vislabāk ir palikt pie noklusējuma stiliem un pirmajām trim tēmām, kas parasti labi darbojas kopā. Tad jūs varat eksperimentēt ar d un e tēmām, kad domājat, ka jums ir nepieciešams kaut kas vairāk.

Otrās galvenes un navigācijas joslas HTML:

header data-role = "header" data-theme = "e"> h1> SJV rātsnams / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home "data-theme =" d "> Sākums / a> / li> li> a href =" # speakers "data-icon =" star "data-theme =" d "> Skaļruņi / a> / li> li> a href = "# news" id = "news" data-icon = "grid" data-theme = "d"> Jaunumi / a> / li> / ul> / div> / header>

Piecas jQuery Mobile tēmas:

Divi motīvu pielietošanas veidi:

Izmantojot datu tēmas atribūtu:

li> a href = "# home" data-icon = "home" data-theme = "b"> Sākums / a> / li>

Izmantojot klases atribūtu, kas norāda tēmu:

div> josla / div>

Apraksts

• Izmantojot piecas tēmas, kas iekļautas jQuery Mobile, varat attiecīgi pielāgot HTML elementu noklusējuma stilus.
• Lai gan jūs varat izmantot savu CSS stila lapu ar jQuery Mobile lietojumprogrammu, jums vajadzētu izvairīties to darīt, kad vien iespējams.

Perspektīva

Mobilo ierīču izmantošana pēdējos gados ir dramatiski pieaugusi. Tāpēc ir kļuvis arvien svarīgāk izstrādāt tīmekļa vietnes, kuras ir viegli izmantot no šīm ierīcēm. Lai gan tas parasti nozīmē atsevišķas vietnes izveidi, tas var būt kritisks aspekts, lai uzturētu jūsu klātbūtni internetā.

Par laimi, izveidojot mobilo vietni, ir kļuvis daudz vieglāk, parādoties jQuery Mobile. Mobilās tīmekļa lapas vairs nav ierobežotas ar statiskām lapām, kurās ir virsraksti, rindkopas, saites un sīktēli. Izmantojot jQuery Mobile, tīmekļa izstrādātāji tagad var izveidot ar vietnēm bagātas vietnes, kas izskatās un jūtas kā vietējās mobilās lietojumprogrammas.