Ustvarite mobilno spletno mesto z jQuery Mobile

Vsebina

• Kako kodirati več strani v eno datoteko HTML
• Opis
• Kako uporabljati pogovorna okna in prehode
• Prehodi, ki jih je mogoče uporabiti
• Opis
• Kako ustvariti gumbe
• Opis
• Kako ustvariti vrstico za krmarjenje
• Kako kodirati HTML za navigacijsko vrstico:
• Kako oblikovati vsebino z jQuery Mobile
• Privzeti slogi, ki jih uporablja jQuery Mobile
• Opis
• Kako teme uporabiti za elemente HTML
• Tema lahko uporabite na dva načina:
• Opis
• Perspektiva

To je urejeni odlomek iz 15. poglavja Murachov HTML5 in CSS3 Zak Ruvalcaba in Anne Boehm.

jQuery Mobile je brezplačna, odprtokodna, medplatformna knjižnica JavaScript, ki jo lahko uporabite za razvoj spletnih mest za mobilne naprave. Ta knjižnica vam omogoča ustvarjanje strani, ki so videti in videti kot strani izvorne mobilne aplikacije.

Čeprav je jQuery Mobile trenutno na voljo kot različica beta preskusa, ta različica že ponuja vse funkcije, ki jih potrebujete za razvoj odličnega spletnega mesta za mobilne naprave. Posledično ga lahko začnete uporabljati takoj. Pričakujete lahko tudi, da se bo ta različica nenehno izboljševala, zato se bo jQuery Mobile izboljševal.

V tem članku boste spoznali osnovne tehnike za ustvarjanje strani mobilnega spletnega mesta. To bo vključevalo uporabo pogovornih oken, gumbov in navigacijskih vrstic.

Kako kodirati več strani v eno datoteko HTML

V nasprotju z načinom, kako razvijate spletne strani za zaslon, vam jQuery Mobile omogoča ustvarjanje več strani v eni datoteki HTML. To ponazarja slika 15-7. Tu lahko vidite dve strani spletnega mesta skupaj z HTML-jem za te strani. Presenetljivo je, da sta obe strani kodirani v eni sami datoteki HTML.

Za vsako stran kodirate en element div z vrednostjo »page« kot vrednost atributa data-role. Nato znotraj vsakega od teh elementov div kodirate elemente div za glavo, vsebino in nogo vsake strani. Pozneje, ko se datoteka HTML naloži, se prikaže prva stran v telesu datoteke.

Za povezavo med stranmi v datoteki HTML uporabite ograde, kot je prikazano na sliki 7-11 v poglavju 7. Na primer, element a> na prvi strani v tem primeru gre v »#toobin«, ko uporabnik tapne h2 ali img element, ki je kodiran kot vsebina te povezave. To se nanaša na element div, katerega atribut id je »toobin«, kar pomeni, da tapkanje povezave vodi bralca na drugo stran v datoteki.

Čeprav ta primer prikazuje samo dve strani, lahko v eno datoteko HTML kodirate veliko strani. Ne pozabite pa, da so vse strani skupaj z njihovimi slikami, datotekami JavaScript in CSS naložene z eno samo datoteko HTML. Posledično bo čas nalaganja preveč, če shranite preveč strani v eno datoteko. Ko se to zgodi, lahko svoje strani razdelite na več kot eno datoteko HTML.

HTML za dve strani v telesu ene datoteke HTML:

div data-role = "page"> header data-role = "header"> h1> Mestna hiša SJV / h1> / header> section data-role = "content"> h3> Govorniki 2011-2012 / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> 19. oktober 2011 / h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>! - ELEMENTI ZA OSTALE GOVORCE - -> / section> footer data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "page" id = "toobin"> header data-role = "header"> h1> Mestna hiša SJV / 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> Avtor kritiško priznane uspešnice, i> The Nine:! - KOPIJA SE NADALJUJE -> / section> footer data-role =" footer "> h4> © 2011 / h4> / footer> / div>

Opis

• Ko uporabljate jQuery Mobile, vam ni treba razviti ločene datoteke HTML za vsako stran. Namesto tega v element telesa posamezne datoteke HTML kodirate en element div za vsako stran z atributom data-role, nastavljenim na “page”.
• Za vsak element div nastavite atribut id na vrednost ograde, do katere lahko dostopajo atributi href v elementih a> drugih strani.

Kako uporabljati pogovorna okna in prehode

Slika 15-8 prikazuje, kako ustvariti pogovorno okno, ki se odpre, ko se povezava dotakne. Če želite to narediti, pogovorno okno kodirate tako kot katero koli stran. Toda v elementu>, ki gre na to stran, atribut data-rel kodirate z vrednostjo »dialog«.

Kot kažejo primeri na tej sliki, datoteka jQuery Mobile CSS pogovorno okno oblikuje drugače kot običajna spletna stran. Pogovorno okno ima privzeto temno ozadje z belim besedilom v ospredju, glava in noga pa ne bosta obsegali strani. V pogovornem oknu bo v glavi tudi »X«, ki se ga mora uporabnik dotakniti, da se vrne na prejšnjo stran.

Ko kodirate element>, ki gre na drugo stran ali pogovorno okno, lahko z atributom prenosa podatkov določite enega od šestih prehodov, ki so povzeti v tabeli na tej sliki. Vsak od teh prehodov naj bi posnemal učinek, ki ga uporablja mobilna naprava, kot je iPhone.

Prehodi, ki jih je mogoče uporabiti

HTML, ki odpre stran kot pogovorno okno s prehodom »pop«:

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

HTML, ki odpre stran s prehodom "zbledi":

a href = "# toobin" data-prehod = "zbledi">

Opis

• HTML za pogovorno okno je kodiran tako, kot je kodirana katera koli stran. Vendar element a>, ki vodi do strani, vključuje atribut data-rel z vrednostjo »dialog«. Če želite zapreti pogovorno okno, uporabnik tapne X v glavi polja.
• Če želite določiti način odpiranja strani ali pogovornega okna, lahko uporabite atribut prenosa podatkov z eno od vrednosti v zgornji tabeli. Če naprava ne podpira prehoda, ki ste ga določili, se atribut prezre.
• Slog za pogovorno okno izvede datoteka CSV jQuery Mobile.

Kako ustvariti gumbe

Na slikah 15–9 je prikazano, kako se z gumbi premikate z ene strani na drugo. Če želite to narediti, samo nastavite atribut data-role za element a> na »button«, jQuery Mobile pa vse ostalo.
Za gumbe pa lahko nastavite tudi nekatere druge atribute. Če želite na primer dva ali več gumbov prikazati drug ob drugem, tako kot prva dva gumba na tej sliki, lahko atribut data-inline nastavite na »true«.

Če želite gumbu dodati eno od 18 ikon, ki jih ponuja jQuery Mobile, kodirate tudi atribut data-icon. Na primer, tretji gumb v tem primeru uporablja ikono "delete", četrti gumb pa ikono "home". Vse te ikone so videti kot ikone, ki jih lahko vidite v izvorni mobilni aplikaciji. Mimogrede te ikone niso ločene datoteke, do katerih mora imeti stran dostop. Namesto tega jih zagotavlja knjižnica jQuery Mobile.

Če želite vodoravno združiti dva ali več gumbov, na primer gumbe Da, Ne in Mogoče na tej sliki, lahko kodirate elemente a> za gumbe v elementu div, ki ima kot nadzorno skupino svoj atribut vloge podatkov in »Vodoravno« kot atribut podatkovnega tipa. Če želite gumbe razvrstiti navpično, lahko atribut podatkovnega tipa spremenite v »navpično«.

Če atribut data-rel za gumb nastavite na »nazaj«, atribut href pa na simbol funta (#), se gumb vrne na stran, ki ga je poklicala. Z drugimi besedami, gumb deluje kot gumb Nazaj. To ponazarja zadnji gumb v vsebini strani.

Zadnja dva gumba prikazujeta, kako se gumbi prikažejo v nogi strani. Tu so ikone in besedilo bele na črni podlagi. V tem primeru je atribut razreda za nogo nastavljen na “ui-bar”, kar jQuery Mobile sporoča, da bi moral dati malo več prostora okoli vsebine noge. Več o tem boste izvedeli na sliki 15-12.

HTML za gumbe v razdelku:

! - Za vrstne gumbe nastavite atribut data-line na true -> a href = "#" data-role = "button" data-inline = "true"> Prekliči / a> a href = "#" data -role = "button" data-inline = "true"> OK / a>! - Če želite gumbu dodati ikono, uporabite atribut data-icon -> gumb href = "#" data-role = " "data-icon =" delete "> Delete / a> a href =" # "data-role =" button "data-icon =" home "> Home / a>! - Za združevanje gumbov uporabite element div z atributi, ki sledijo -> div data-role = "controlgroup" data-type = "horizontal"> a href = "#" data-role = "button" data-icon = "check"> Yes / a> a href = "#" data-role = "button" data-icon = "arrow-d"> Ne / a> a href = "#" data-role = "button"> Mogoče / a> / div>! - Za kodirajte gumb Nazaj, nastavite atribut data-rel na nazaj -> a href = "#" data-role = "button" dat-rel = "back" data-icon = "back"> Nazaj na prejšnjo stran / a >

HTML za gumbe v nogi:

footer data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> Dodaj v Facebook / a> a href = "http: //www.twitter.com "data-role =" button "data-icon =" plus "> Tweet to stran / a> / footer>

Opis

• Če želite na spletno stran dodati gumb, kodirate element> z njegovim atributom vloge podatkov, ki je nastavljen na »button«.

Kako ustvariti vrstico za krmarjenje

Slika 15-10 prikazuje, kako lahko spletni strani dodate navigacijsko vrstico. Za to kodirate element div z njegovo podatkovno vlogo, nastavljeno na "navbar". V tem elementu kodirate element ul, ki vsebuje elemente li, ki vsebujejo elemente a> za elemente v navigacijski vrstici. Upoštevajte pa, da atributa data-role ne kodirate za elemente a>.

Če želite spremeniti barvo elementov v navigacijski vrstici, koda v tem primeru vključuje atribut data-theme-b za vsak element. Kot rezultat, jQuery Mobile spremeni barvo ozadja vsakega predmeta iz črne, ki je privzeta, v privlačno modro. Poleg tega ta koda nastavi atribut razreda za aktivni gumb na “ui-btn-active”, zato jQuery Mobile spremeni barvo aktivnega gumba v svetlejšo modro. To prikazuje, kako lahko spremenite oblikovanje, ki ga uporablja jQuery Mobile, in o tem boste izvedeli več.

HTML za navigacijsko vrstico:

header data-role = "header"> h1> Mestna hiša SJV / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-theme = "b "> Domov / a> / li> li> a href =" # zvočniki "data-icon =" star "data-theme =" b "> Zvočniki / a> / li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> Pišite nam / a> / li> / ul> / div> / header>

Kako kodirati HTML za navigacijsko vrstico:

• Kodirajte element div v elementu glave. Nato nastavite atribut data-role za element div na »navbar«.
• Znotraj elementa div kodirajte element ul, ki vsebuje en element li za vsako povezavo.
• Znotraj vsakega elementa li kodirajte element> z atributom href, ki uporablja nadomestni znak za stran, do katere bi morala povezava iti. Nato nastavite atribut data-icon na ikono, ki ste jo izbrali.
• Za aktivni element v navigacijski vrstici nastavite atribut razreda na »ui-btn-active«.Nato bo barva tega predmeta svetlejša od ostalih elementov v navigacijski vrstici.
• Atribut data-theme uporabite tudi za uporabo teme jQuery Mobile za vsak element v navigacijski vrstici. V nasprotnem primeru bodo gumbi v vrstici enake barve kot preostali del glave. Če želite izvedeti več o uporabi tem, glejte sliko 15-12.

Kako oblikovati vsebino z jQuery Mobile

Kot ste že videli, jQuery Mobile samodejno oblikuje komponente spletne strani na podlagi lastnega sloga. Zdaj boste izvedeli več o tem, pa tudi o tem, kako prilagoditi privzeti slog, ki ga uporablja jQuery Mobile.

Privzeti slogi, ki jih uporablja jQuery Mobile

Slika 15-13 prikazuje privzete sloge, ki jih jQuery Mobile uporablja za pogoste elemente HTML. JQuery Mobile se pri vseh svojih slogih zanaša na mehanizem upodabljanja brskalnika, zato je njegov lasten slog minimalen. Tako se časi nalaganja hitro shranijo in zmanjšajo režijske stroške, ki bi jih pretirani CSS naložil na stran.

Kot lahko vidite, je slog jQuery Mobile tako učinkovit, da vam ne bi bilo treba spreminjati njegovega oblikovanja z zagotavljanjem lastnega sloga CSS. Na primer, razmik med elementi na neurejenem seznamu in oblikovanje tabele sta sprejemljiva takšna, kot je. Tudi črna vrsta na sivi podlagi je skladna z oblikovanjem za izvorne mobilne aplikacije.

Opis

• JQuery Mobile privzeto samodejno uporabi sloge za elemente HTML strani. Ti slogi niso le privlačni, ampak posnemajo tudi domače sloge brskalnika.
• JQuery Mobile privzeto uporabi majhno količino oblazinjenja na levi, desni, zgornji in spodnji strani vsake mobilne strani.
• Povezave so privzeto nekoliko večje od običajnega besedila. Tako uporabnik lažje tapne povezave.
• Povezave so privzeto podčrtane z modro kot barvo pisave.

Kako teme uporabiti za elemente HTML

V nekaterih primerih boste želeli spremeniti privzete sloge, ki jih uporablja jQuery Mobile. To ste že videli v vrstici za krmarjenje na sliki 15-10. Če želite spremeniti privzete sloge, lahko uporabite pet tem, ki jih ponuja jQuery Mobile. Ti so povzeti na sliki 15-12. Tudi tu naj bi te teme posnemale videz izvorne mobilne aplikacije.

Eden od načinov uporabe tem je kodiranje atributa podatkovne teme s črko teme kot njeno vrednostjo. To ste videli v vrstici za krmarjenje na sliki 15-10 in to lahko vidite v kodi druge vrstice za krmarjenje na tej sliki. Atribut data-theme tukaj uporablja temo „e“ za glavo in temo „d“ za elemente v navigacijski vrstici.

Drugi način uporabe tem je nastavitev atributa razreda za element na ime razreda, ki označuje temo. To ponazarja prvi primer za tabelo. Tu se atribut razreda uporablja za uporabo razredov "ui-bar" in "ui-bar- b" za element div. Kot rezultat, jQuery Mobile najprej uporabi privzeti slog za vrstico za element, nato pa uporabi temo b za ta slog. Na naslednjih straneh boste videli še druge primere tovrstnega oblikovanja.

Upoštevajte, da tabela na tej sliki pravi, da temo e uporabljajte zmerno. To je zato, ker uporablja oranžno barvo, ki dobro deluje za poudarjanje predmeta, vendar v velikih odmerkih ni privlačna. To ponazarja druga glava in navigacijska vrstica na tej sliki, ki se ponavadi moti, ko jo vidite v barvi.

Na splošno je najbolje, da se držite privzetih slogov in prvih treh tem, ki običajno dobro sodelujejo. Nato lahko preizkusite teme d in e, ko mislite, da potrebujete nekaj več.

HTML za drugo glavo in vrstico za krmarjenje:

header data-role = "header" data-theme = "e"> h1> Mestna hiša SJV / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home "data-theme =" d "> Domov / a> / li> li> a href =" # zvočniki "data-icon =" star "data-theme =" d "> Zvočniki / a> / li> li> a href = "# news" id = "news" data-icon = "grid" data-theme = "d"> News / a> / li> / ul> / div> / header>

Pet tem jQuery Mobile:

Tema lahko uporabite na dva načina:

Z uporabo atributa data-theme:

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

Z uporabo atributa razreda, ki označuje temo:

div> Bar / div>

Opis

• Z uporabo petih tem, ki so vključene v jQuery Mobile, lahko ustrezno prilagodite privzete sloge za elemente HTML.
• Čeprav lahko z aplikacijo jQuery Mobile uporabite svoj lasten slog CSS, se temu izogibajte, kadar koli je to mogoče.

Perspektiva

Uporaba mobilnih naprav se je v zadnjih nekaj letih močno povečala. Zaradi tega postaja vse bolj pomembno oblikovanje spletnih strani, ki so enostavne za uporabo iz teh naprav. Čeprav to običajno pomeni razvijanje ločenega spletnega mesta, je to lahko ključni vidik ohranjanja vaše prisotnosti v internetu.

Na srečo je naloga oblikovanja mobilnega spletnega mesta s prihodom jQuery Mobile postala veliko lažja. Spletne strani za mobilne naprave niso več omejene na statične strani, ki vsebujejo naslove, odstavke, povezave in sličice. Z jQuery Mobile lahko spletni razvijalci zdaj ustvarijo bogata spletna mesta, ki so videti in se počutijo kot domače mobilne aplikacije.