Izradite mobilnu web stranicu s jQuery Mobile

Sadržaj

• Kako kodirati više stranica u jednoj HTML datoteci
• Opis
• Kako koristiti dijaloške okvire i prijelaze
• Prijelazi koji se mogu koristiti
• Opis
• Kako stvoriti gumbe
• Opis
• Kako stvoriti navigacijsku traku
• Kako kodirati HTML za navigacijsku traku:
• Kako formatirati sadržaj pomoću jQuery Mobile
• Zadani stilovi koje jQuery Mobile koristi
• Opis
• Kako primijeniti teme na HTML elemente
• Dva načina primjene teme:
• Opis
• Perspektiva

Ovo je uređeni izvadak iz 15. poglavlja Murachovi HTML5 i CSS3 Zaka Ruvalcabe i Anne Boehm.

jQuery Mobile je besplatna JavaScript biblioteka otvorenog koda s više platformi koju možete koristiti za razvoj web stranica za mobilne uređaje. Ova vam knjižnica omogućuje stvaranje stranica koje izgledaju i osjećaju se poput stranica izvorne mobilne aplikacije.

Iako je jQuery Mobile trenutno dostupan kao beta testna verzija, ova verzija već nudi sve značajke koje su vam potrebne za razvoj izvrsne web stranice za mobilne uređaje. Kao rezultat toga, možete ga odmah početi koristiti. Također možete očekivati ​​da će se ova verzija kontinuirano poboljšavati, tako da će jQuery Mobile biti samo bolji.

U ovom ćete članku naučiti osnovne tehnike za izradu stranica mobilnog web mjesta. To će uključivati ​​upotrebu dijaloških okvira, gumba i navigacijskih traka.

Kako kodirati više stranica u jednoj HTML datoteci

Za razliku od načina na koji razvijate web stranice za zaslon, jQuery Mobile omogućuje vam stvaranje više stranica u jednoj HTML datoteci. To ilustrira slika 15-7. Ovdje možete vidjeti dvije stranice web mjesta, zajedno s HTML-om za te stranice. Ono što iznenađuje jest da su obje stranice kodirane u jednoj HTML datoteci.

Za svaku stranicu kodirate jedan div element sa "page" kao vrijednošću atributa data-role. Zatim unutar svakog od tih elemenata div kodirate elemente div za zaglavlje, sadržaj i podnožje svake stranice. Kasnije, kada se učita HTML datoteka, prikazuje se prva stranica u tijelu datoteke.

Za vezu između stranica u HTML datoteci koristite rezervirana mjesta kao što je prikazano na slici 7-11 u poglavlju 7. Na primjer, element a> na prvoj stranici u ovom primjeru ide na "#toobin" kada korisnik dodirne h2 ili img element koji je kodiran kao sadržaj ove veze. To se odnosi na div element s atributom id kao "toobin", što znači da dodirivanje veze čitatelja vodi na drugu stranicu u datoteci.

Iako ovaj primjer prikazuje samo dvije stranice, možete kodirati više stranica u jednoj HTML datoteci. Ipak, imajte na umu da su sve stranice zajedno sa slikama, JavaScript i CSS datotekama učitane s jednom HTML datotekom. Kao rezultat, vrijeme učitavanja postat će pretjerano ako previše stranica pohranite u jednu datoteku. Kada se to dogodi, svoje stranice možete podijeliti u više HTML datoteka.

HTML za dvije stranice u tijelu jedne HTML datoteke:

div data-role = "page"> header data-role = "header"> h1> Gradska vijećnica SJV / h1> / header> section data-role = "content"> h3> Govornici 2011-2012 / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> 19. listopada 2011. / h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>! - ELEMENTI OSTALIH ZVUČNIKA - -> / section> podnožje data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "page" id = "toobin"> header data-role = "header"> h1> Gradska vijećnica SJV / h1> / header> section data-role = "content"> h3> Vrhovna devetka: br> Crno odjevene tajne / h3> img src = "images / toobin_court.cnn.webp" alt = "Jeffrey Toobin "> p> Autor hvaljenog bestselera, i> The Nine:! - KOPIJA SE NASTAVLJA -> / section> footer data-role =" footer "> h4> © 2011 / h4> / footer> / div>

Opis

• Kada koristite jQuery Mobile, ne morate razvijati zasebnu HTML datoteku za svaku stranicu. Umjesto toga, unutar elementa body jedne HTML datoteke kodirate jedan div element za svaku stranicu s atributom data-role postavljenim na "page".
• Za svaki div element postavite atribut id na vrijednost rezerviranog mjesta kojoj mogu pristupiti atributi href u elementima a> drugih stranica.

Kako koristiti dijaloške okvire i prijelaze

Slika 15-8 prikazuje kako stvoriti dijaloški okvir koji se otvara kad se dodirne veza. Da biste to učinili, dijaloški okvir kodirate baš kao i bilo koju stranicu. Ali u elementu> koji ide na tu stranicu, atribut data-rel kodirate s vrijednosti "dijalog".

Kao što primjeri na ovoj slici pokazuju, jQuery Mobile CSS datoteka formatira dijaloški okvir drugačije od uobičajene web stranice. Dijaloški okvir prema zadanim postavkama imat će tamnu pozadinu s bijelim tekstom u prvom planu, a zaglavlje i podnožje neće obuhvaćati širinu stranice. Dijaloški okvir također će u zaglavlju imati "X" koji korisnik mora dodirnuti za povratak na prethodnu stranicu.

Kada kodirate element> koji ide na drugu stranicu ili dijaloški okvir, također možete koristiti atribut prijenosa podataka da biste odredili jedan od šest prijelaza koji su sažeti u tablici na ovoj slici. Svaki od ovih prijelaza treba oponašati učinak koji koristi mobilni uređaj poput iPhonea.

Prijelazi koji se mogu koristiti

HTML koji otvara stranicu kao dijaloški okvir s prijelazom "pop":

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

HTML koji otvara stranicu s prijelazom "fade":

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

Opis

• HTML za dijaloški okvir kodiran je na način na koji je kodirana bilo koja stranica. Međutim, element> koji povezuje na stranicu uključuje atribut data-rel s vrijednosti "dijalog". Da bi zatvorio dijaloški okvir, korisnik tapka X u zaglavlju okvira.
• Da biste odredili način otvaranja stranice ili dijaloškog okvira, možete upotrijebiti atribut prijenosa podataka s jednom od vrijednosti u gornjoj tablici. Ako uređaj ne podržava prijelaz koji ste naveli, atribut se zanemaruje.
• Stiliziranje dijaloškog okvira vrši datoteka jQuery Mobile CSS.

Kako stvoriti gumbe

Slika 15-9 prikazuje kako koristiti gumbe za navigaciju s jedne stranice na drugu. Da biste to učinili, samo postavite atribut data-role za element a> na "button", a jQuery Mobile radi ostalo.
Međutim, gumbe možete postaviti i neke druge atribute. Ako, na primjer, želite da se dva ili više gumba pojavljuju jedan pored drugog, poput prva dva gumba na ovoj slici, atribut data-inline možete postaviti na "true".

Ako na gumb želite dodati jednu od 18 ikona koje pruža jQuery Mobile, kodirate i atribut data-icon. Na primjer, treći gumb u ovom primjeru koristi ikonu "delete", a četvrti gumb koristi ikonu "home". Sve ove ikone izgledaju poput ikona koje biste mogli vidjeti u matičnoj mobilnoj aplikaciji. Inače, ove ikone nisu zasebne datoteke kojima stranica mora pristupiti. Umjesto toga, pruža ih jQuery Mobile knjižnica.

Ako želite vodoravno grupirati dva ili više gumba, poput gumba Da, Ne i Možda na ovoj slici, možete kodirati elemente a> za gumbe unutar div elementa koji kao atribut uloge podataka ima "controlgroup" i "Vodoravno" kao svojstvo tipa podataka. Ili da biste vertikalno grupirali gumbe, atribut tipa podataka možete promijeniti u "vertikalno".

Ako atribut data-rel za gumb postavite na "natrag", a atribut href na simbol funte (#), gumb će se vratiti na stranicu koja ga je pozvala. Drugim riječima, gumb radi poput gumba Natrag. To ilustrira zadnji gumb u sadržaju stranice.

Posljednja dva gumba pokazuju kako se gumbi pojavljuju u podnožju stranice. Ovdje su ikone i tekst bijeli na crnoj pozadini. U ovom je slučaju atribut klase za podnožje postavljen na "ui-bar", što jQuery Mobile govori da bi trebao staviti malo više prostora oko sadržaja podnožja. O tome ćete saznati više na slici 15-12.

HTML za gumbe u odjeljku:

! - Za umetnute gumbe postavite atribut data-line na true -> a href = "#" data-role = "button" data-inline = "true"> Cancel / a> a href = "#" data -role = "button" data-inline = "true"> OK / a>! - Da biste gumbu dodali ikonu, upotrijebite atribut data-icon -> gumb href = "#" data-role = " "data-icon =" delete "> Delete / a> a href =" # "data-role =" button "data-icon =" home "> Početna / a>! - Za grupiranje gumba koristite div element s atributi koji slijede -> 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"> Ne / a> a href = "#" data-role = "button"> Možda / a> / div>! - Za kodirajte gumb Natrag, postavite atribut data-rel natrag -> a href = "#" data-role = "button" dat-rel = "back" data-icon = "back"> Povratak na prethodnu stranicu / a >

HTML za gumbe u podnožju:

podnožje data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> Dodaj na Facebook / a> a href = "http: //www.twitter.com "data-role =" button "data-icon =" plus "> Tweet ovu stranicu / a> / footer>

Opis

• Da biste dodali gumb web stranici, kodirate element> s atributom data-role postavljenim na "button".

Kako stvoriti navigacijsku traku

Slika 15-10 prikazuje kako web stranici možete dodati navigacijsku traku. Da biste to učinili, kodirate element div s njegovom podatkovnom ulogom postavljenom na "navbar". Unutar ovog elementa kodirate element ul koji sadrži elemente li koji sadrže elemente a> za stavke na navigacijskoj traci. Međutim, imajte na umu da atribut uloge podataka ne kodirate za elemente a>.

Da biste promijenili boju stavki na navigacijskoj traci, kod u ovom primjeru uključuje atribut data-theme-b za svaku stavku. Kao rezultat toga, jQuery Mobile mijenja boju pozadine svake stavke iz crne, koja je zadana, u atraktivnu plavu. Uz to, ovaj kôd postavlja atribut klase za aktivni gumb na „ui-btn-active“, tako da jQuery Mobile mijenja boju aktivnog gumba u svjetliju plavu. Ovo pokazuje kako možete promijeniti oblikovanje koje koristi jQuery Mobile, a o tome ćete saznati dalje.

HTML za navigacijsku traku:

header data-role = "header"> h1> SJV Town Hall / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-theme = "b "> Početna / a> / li> li> a href =" # zvučnici "data-icon =" star "data-theme =" b "> Zvučnici / a> / li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> Kontaktirajte nas / a> / li> / ul> / div> / header>

Kako kodirati HTML za navigacijsku traku:

• Kodirajte div element unutar elementa zaglavlja. Zatim postavite atribut data-role za element div na "navbar".
• Unutar elementa div kodirajte element ul koji sadrži po jedan element li za svaku vezu.
• Unutar svakog elementa li kodirajte element> sa atributom href koji koristi rezervirano mjesto za stranicu do koje bi trebala ići veza. Zatim postavite atribut data-icon na ikonu po vašem izboru.
• Za aktivnu stavku na navigacijskoj traci postavite atribut klase na "ui-btn-active".Tada će boja ove stavke biti svjetlija od ostalih stavki na navigacijskoj traci.
• Također biste trebali koristiti atribut teme podataka za primjenu jQuery Mobile teme na svaku stavku na navigacijskoj traci. Inače, gumbi na traci bit će iste boje kao i ostatak zaglavlja. Da biste saznali više o primjeni tema, pogledajte sliku 15-12.

Kako formatirati sadržaj pomoću jQuery Mobile

Kao što ste već vidjeli, jQuery Mobile automatski formatira komponente web stranice na temelju vlastitog stilskog lista. Sada ćete saznati više o tome, kao i kako prilagoditi zadani stil koji koristi jQuery Mobile.

Zadani stilovi koje jQuery Mobile koristi

Slika 15-13 prikazuje zadane stilove koje jQuery Mobile koristi za uobičajene HTML elemente. JQuery Mobile se u svim svojim stilovima oslanja na mehanizam za prikazivanje preglednika, tako da je vlastiti stil minimalan. To održava brza vremena učitavanja i minimizira troškove koji bi pretjerani CSS nametnuo stranici.

Kao što vidite, stil jQuery Mobile toliko je učinkovit da ne biste trebali mijenjati njegov stil pružanjem vlastitog CSS stilskog lista. Na primjer, razmak između stavki na neuređenom popisu i oblikovanje tablice prihvatljivi su takvi kakvi jesu. Također, crna vrsta na sivoj pozadini u skladu je s formatiranjem izvornih mobilnih aplikacija.

Opis

• Prema zadanim postavkama jQuery Mobile automatski primjenjuje stilove na HTML elemente stranice. Ti stilovi nisu samo atraktivni, već i oponašaju izvorne stilove preglednika.
• Prema zadanim postavkama, jQuery Mobile primjenjuje malu količinu dodataka na lijevu, desnu, gornju i dnu svake mobilne stranice.
• Veze su prema zadanim postavkama nešto veće od uobičajenog teksta. To korisniku olakšava dodirivanje veza.
• Veze su prema zadanim postavkama podcrtane plavom bojom fonta.

Kako primijeniti teme na HTML elemente

U nekim ćete slučajevima htjeti promijeniti zadane stilove koje jQuery Mobile koristi. To ste već vidjeli na navigacijskoj traci na slici 15-10. Da biste promijenili zadane stilove, možete koristiti pet tema koje pruža jQuery Mobile. Oni su sažeti na slici 15-12. I ovdje su ove teme namijenjene oponašanju izgleda izvorne mobilne aplikacije.

Jedan od načina primjene tema je kodiranje atributa teme podataka sa slovom teme kao vrijednošću. To ste vidjeli na navigacijskoj traci na slici 15-10, a to možete vidjeti i u kodu druge navigacijske trake na ovoj slici. Ovdje atribut data-theme primjenjuje temu „e“ na zaglavlje, a temu „d“ na stavke na navigacijskoj traci.

Drugi način primjene tema je postavljanje atributa klase za element na naziv klase koji označava temu. To ilustrira prvi primjer nakon tablice. Ovdje se atribut klase koristi za primjenu klasa “ui-bar” i “ui-bar- b” na element div. Kao rezultat toga, jQuery Mobile prvo na element primjenjuje zadani stil za traku, a zatim na taj stil primjenjuje b temu. Na slijedećim stranicama vidjet ćete i druge primjere ove vrste stylinga.

Napominjemo da tablica na ovoj slici kaže da se tema e koristi štedljivo. To je zato što koristi narančastu boju koja dobro funkcionira za naglašavanje predmeta, ali nije privlačna u velikim dozama. To je ilustrirano drugim zaglavljem i navigacijskom trakom na ovoj slici, koja se obično trgne kad je vidite u boji.

Općenito, najbolje je zadržati zadane stilove i prve tri teme, koji obično dobro surađuju. Zatim možete eksperimentirati s temama d i e kad mislite da vam treba nešto više.

HTML za drugo zaglavlje i navigacijsku traku:

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 "> Početna / a> / li> li> a href =" # zvučnici "data-icon =" star "data-theme =" d "> Zvučnici / a> / li> li> a href = "# news" id = "news" data-icon = "grid" data-theme = "d"> Vijesti / a> / li> / ul> / div> / header>

Pet jQuery Mobile tema:

Dva načina primjene teme:

Korištenjem atributa teme podataka:

li> a href = "# home" data-icon = "home" data-theme = "b"> Početna / a> / li>

Korištenjem atributa klase koji označava temu:

div> Traka / div>

Opis

• Koristeći pet tema koje su uključene u jQuery Mobile, možete izvršiti odgovarajuće prilagodbe zadanih stilova za HTML elemente.
• Iako možete koristiti svoj vlastiti CSS stil s jQuery Mobile aplikacijom, trebali biste to izbjegavati kad god je to moguće.

Perspektiva

Korištenje mobilnih uređaja dramatično se povećalo tijekom posljednjih nekoliko godina. Zbog toga postaje sve važnije dizajnirati web stranice koje se lako koriste s ovih uređaja. Iako to obično znači razvoj zasebne web stranice, ovo može biti kritični aspekt održavanja vaše prisutnosti na Internetu.

Srećom, zadatak izrade mobilne web stranice postao je puno lakši pojavom jQuery Mobile. Više se mobilne web stranice ne ograničavaju na statične stranice koje sadrže naslove, odlomke, poveznice i sličice. Pomoću jQuery Mobile web programeri sada mogu stvarati web stranice bogate značajkama koje izgledaju i osjećaju se kao izvorne mobilne aplikacije.