Looge jQuery Mobile abil mobiiliveebisait

Sisu

• Mitme lehe kodeerimine ühes HTML-failis
• Kirjeldus
• Dialoogibokside ja üleminekute kasutamine
• Kasutatavad üleminekud
• Kirjeldus
• Kuidas luua nuppe
• Kirjeldus
• Kuidas luua navigeerimisriba
• Navigeerimisriba HTML-i kodeerimine:
• JQuery Mobile abil sisu vormindamine
• Vaikimisi stiilid, mida jQuery Mobile kasutab
• Kirjeldus
• Kuidas rakendada teemasid HTML-elementidele
• Teema rakendamiseks kaks võimalust:
• Kirjeldus
• Perspektiiv

See on redigeeritud väljavõte dokumendi 15. Peatükist Murachi HTML5 ja CSS3 autorid Zak Ruvalcaba ja Anne Boehm.

jQuery Mobile on tasuta avatud lähtekoodiga platvormidevaheline JavaScripti teek, mida saate kasutada mobiilsete veebisaitide arendamiseks. See teek võimaldab teil luua lehti, mis näevad välja nagu mobiilirakenduse lehed.

Kuigi jQuery Mobile on praegu saadaval beetaversioonina, pakub see versioon juba kõiki funktsioone, mida vajate suurepärase mobiiliveebi väljatöötamiseks. Selle tulemusena saate seda kohe kasutama hakata. Võite ka eeldada, et seda versiooni täiendatakse pidevalt, nii et jQuery Mobile muutub ainult paremaks.

Selles artiklis saate teada põhitehnikat mobiiliveebisaitide lehtede loomiseks. See hõlmab dialoogibokside, nuppude ja navigeerimisribade kasutamist.

Mitme lehe kodeerimine ühes HTML-failis

Erinevalt ekraaniveebi jaoks mõeldud veebilehtede arendamise viisist võimaldab jQuery Mobile luua mitu HTML-faili mitu lehte. Seda illustreerib joonis 15-7. Siin näete saidi kahte lehte koos nende lehtede HTML-iga. Üllatav on see, et mõlemad lehed on kodeeritud ühes HTML-failis.

Iga lehe jaoks kodeerite ühe div-elemendi atribuudi data-roll väärtuseks „page”. Seejärel kodeerite kõigis nendes div-elementides div-elemendid iga lehe päise, sisu ja jaluse jaoks. Hiljem, kui HTML-fail on laaditud, kuvatakse faili sisu esimene leht.

HTML-faili lehtede vahel linkimiseks kasutage kohatäiteid, nagu on näidatud 7. peatüki joonisel 7-11. Näiteks selle näite esimese lehe element a> läheb "#toobin" juurde, kui kasutaja puudutab nuppu h2 või img element, mis on kodeeritud selle lingi sisuks. See viitab div-elemendile, mille id-atribuudiks on „toobin”, mis tähendab, et lingi koputamine viib lugeja faili teisele lehele.

Kuigi see näide näitab ainult kahte lehte, saate ühe HTML-faili sisse kodeerida palju lehti. Pidage siiski meeles, et kõik lehed koos nende piltide, JavaScripti ja CSS-failidega laaditakse ühe HTML-failiga. Selle tulemusel muutub laadimisaeg liiga pikaks, kui salvestate ühte faili liiga palju lehti. Kui see juhtub, saate jagada oma lehed mitmeks HTML-failiks.

Ühe HTML-faili sisus oleva kahe lehe HTML:

div data-role = "page"> header data-role = "header"> h1> SJV raekoda / h1> / header> section data-role = "content"> h3> 2011–2012 kõlarid / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> 19. oktoober 2011 / h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>! - KÕNEJUHTE ÜLEMINEKUD - -> / section> jalus data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "page" id = "toobin"> header data-role = "header"> h1> SJV raekoda / h1> / header> section data-role = "content"> h3> The Supreme Nine: br> Mustad rüüstatud saladused / h3> img src = "images / toobin_court.cnn.webp" alt = "Jeffrey Toobin "> p> Kriitiliselt hinnatud parima müüja, i> The Nine autor:! - KOOPIA JÄTKAB -> / section> footer data-role =" footer "> h4> © 2011 / h4> / footer> / div>

Kirjeldus

• JQuery Mobile'i kasutamisel ei pea te iga lehe jaoks eraldi HTML-faili välja töötama. Selle asemel kodeerite ühe HTML-faili kehaelemendis iga lehe jaoks ühe div-elemendi, mille andmerolli atribuudiks on määratud „page”.
• Iga div elemendi jaoks määrate atribuudi id kohahoidja väärtuseks, millele pääseb juurde teiste lehtede elementide a> atribuutide href abil.

Dialoogibokside ja üleminekute kasutamine

Joonisel 15-8 on näidatud, kuidas luua lingi puudutamisel avanevat dialoogiboksi. Selleks kodeerite dialoogiboksi täpselt nagu igal lehel. Kuid sellele lehele suunduvas elemendis a> kodeerite atribuudi data-rel, mille väärtuseks on „logi”.

Nagu näitavad selle joonise näited, vormistab jQuery Mobile CSS-fail dialoogiboksi tavalisest veebilehest erinevalt. Vaikimisi on dialoogiboksil valge esiplaaniga tekst tumedal taustal ning päis ja jalus ei hõlma lehe laiust. Dialoogiboksi päises on ka „X”, mida kasutaja peab eelmisele lehele naasmiseks puudutama.

Kui kodeerite elemendi>, mis läheb teisele lehele või dialoogiboksi, saate atribuudi data-transfer abil määrata ka ühe kuuest siirdest, mis on kokku võetud selle joonise tabelis. Kõik need üleminekud on mõeldud matkima efekti, mida selline mobiilseade nagu iPhone kasutab.

Kasutatavad üleminekud

HTML, mis avab lehe dialoogiboksina üleminekuga „pop”:

a href = "# toobin" data-rel = "dialoog" data-transit = "pop">

HTML, mis avab lehe üleminekuga „tuhmuma“:

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

Kirjeldus

• A. HTML Dialoogikast on kodeeritud viisil, nagu mis tahes leht on kodeeritud. Lehele linkiv element a> sisaldab aga atribuuti data-rel, mille väärtuseks on dialoog. Dialoogiboksi sulgemiseks koputab kasutaja kasti päises olevat X-i.
• Lehe või dialoogiboksi avamise viisi määramiseks võite kasutada atribuuti data-transfer ühe ülaltoodud tabeli väärtusega. Kui seade ei toeta teie määratud üleminekut, ignoreeritakse atribuuti.
• Dialoogiboksi kujunduse teeb jQuery Mobile CSS-fail.

Kuidas luua nuppe

Joonis 15-9 näitab, kuidas nuppudega ühelt lehelt teisele navigeerida. Selleks määrake elemendi>> roll-atribuudiks lihtsalt „nupp“ ja ülejäänu teeb jQuery Mobile.
Nuppude jaoks saate siiski määrata ka mõned muud atribuudid. Kui soovite näiteks, et kaks või enam nuppu ilmuksid kõrvuti, nagu selle joonise kaks esimest nuppu, saate määrata atribuudi data-inline väärtuseks “true”.

Kui soovite nupule lisada ühe 18 ikoonist, mille pakub jQuery Mobile, kodeerite ka atribuudi data-icon. Näiteks kasutab selle näite kolmas nupp ikooni „kustutamine“ ja neljas nupp „kodu“ ikooni. Kõik need ikoonid näevad välja nagu ikoonid, mida võite näha kohalikus mobiilirakenduses. Need ikoonid pole muide eraldi failid, millele leht peab juurde pääsema. Selle asemel pakub neid jQuery Mobile'i raamatukogu.

Kui soovite rühmitada horisontaalselt kahte või enamat nuppu, näiteks selle joonise nupud Jah, Ei ja Võib-olla, saate kodeerida nuppude a> elemendid div-elemendis, mille andmerolli atribuudiks on „controlgroup” ja Andmetüübi atribuudina horisontaalne. Või võite nuppude vertikaalseks rühmitamiseks muuta andmetüübi atribuudi vertikaalseks.

Kui määrate nupu data-rel atribuudiks „tagasi” ja hrefi atribuudi naela sümboliks (#), naaseb nupp sellele helistanud lehele. Teisisõnu, nupp töötab nagu Tagasi nupp. Seda illustreerib viimane nupp lehe sisus.

Kaks viimast nuppu näitavad, kuidas nupud lehe jaluses kuvatakse. Siin on ikoonid ja tekst mustal taustal valged. Sel juhul on jaluse klassi atribuudiks seatud „ui-bar”, mis ütleb jQuery Mobile'ile, et see peaks jaluse sisu ümber asetama veidi rohkem ruumi. Selle kohta saate rohkem teada jooniselt 15-12.

Jaotises olevate nuppude HTML:

! - Siseste nuppude jaoks määrake andmerea atribuudiks tõene -> a href = "#" data-role = "button" data-inline = "true"> Tühista / a> a href = "#" andmed -role = "nupp" data-inline = "true"> OK / a>! - Ikooni lisamiseks nupule kasutage atribuuti data-icon -> nuppu href = "#" data-role = " "data-icon =" delete "> Kustuta / a> a href =" # "data-role =" button "data-icon =" home "> Kodu / a>! - Nuppude rühmitamiseks kasutage elementi div järgnevad atribuudid -> 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"> No / a> a href = "#" data-role = "button"> Võib-olla / a> / div>! - Saaja kodeerige nupp Tagasi, määrake atribuut data-rel tagasi -> a href = "#" data-role = "nupp" dat-rel = "tagasi" data-icon = "tagasi"> Tagasi eelmisele lehele / a >

Jalus olevate nuppude HTML:

footer data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> Lisa Facebooki / a> a href = "http: //www.twitter.com "data-role =" button "data-icon =" plus "> Piiksake seda lehte / a> / jalus>

Kirjeldus

• Nupu lisamiseks veebilehele kodeerite elemendi>, mille andmerolli atribuut on seatud nupule.

Kuidas luua navigeerimisriba

Joonisel 15-10 on näidatud, kuidas saate veebilehele navigeerimisriba lisada. Selleks kodeerite div-elemendi, mille andmerolliks on seatud „navbar”. Selles elemendis kodeerite ul-elemendi, mis sisaldab li-elemente, mis sisaldavad navigeerimisribal olevate üksuste elemente a>. Pange tähele, et te ei kodeeri elementide a> atribuuti data-role.

Navigeerimisribal olevate üksuste värvi muutmiseks sisaldab selle näite kood iga üksuse atribuuti data-theme-b. Seetõttu muudab jQuery Mobile iga üksuse taustavärvi mustast, mis on vaikimisi, atraktiivseks siniseks. Lisaks määrab see kood aktiivse nupu klassi atribuudiks „ui-btn-active”, nii et jQuery Mobile muudab aktiivse nupu värvi heledamaks siniseks. See näitab, kuidas saate muuta vormingut, mida jQuery Mobile kasutab, ja saate selle kohta lisateavet järgmisena.

Navigeerimisriba HTML:

header data-role = "header"> h1> SJV raekoda / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-theme = "b "> Avaleht / a> / li> li> a href =" # kõlarid "data-icon =" star "data-theme =" b "> Kõlarid / a> / li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> Võtke meiega ühendust / a> / li> / ul> / div> / header>

Navigeerimisriba HTML-i kodeerimine:

• Kodeerige päiseelemendis div-element. Seejärel määrake elemendi div atribuudi data-role väärtuseks „navbar”.
• Kodeerige div-elemendis ul-element, mis sisaldab iga lingi jaoks ühte li-elementi.
• Igas li elemendis kodeerige atribuudiga href a> element, mis kasutab selle lehe jaoks kohatäidet, kuhu link peaks minema. Seejärel määrake atribuut data-icon valitud ikoonile.
• Navigeerimisribal oleva aktiivse üksuse jaoks määrake klassi atribuudiks „ui-btn-active”. Seejärel on selle üksuse värv heledam kui teised navigeerimisribal olevad üksused.
• JQuery Mobile'i teema rakendamiseks navigeerimisriba igale üksusele peaksite kasutama ka atribuuti data-theme. Vastasel juhul on ribal olevad nupud sama päise ülejäänud värviga. Teemade rakendamise kohta lisateabe saamiseks vt joonist 15-12.

JQuery Mobile abil sisu vormindamine

Nagu te juba nägite, vormistab jQuery Mobile veebilehe komponendid automaatselt oma stiililehe põhjal. Nüüd saate selle kohta lisateavet ja ka seda, kuidas kohandada vaikestiili, mida jQuery Mobile kasutab.

Vaikimisi stiilid, mida jQuery Mobile kasutab

Joonis 15-13 näitab vaikestiile, mida jQuery Mobile kasutab tavaliste HTML-elementide jaoks. Kõigi oma stiilide puhul tugineb jQuery Mobile brauseri renderdamismootorile, nii et tema enda stiil on minimaalne. See hoiab laadimisajad kiiresti ja minimeerib üldkulud, mida liigne CSS lehele paneks.

Nagu näete, on jQuery Mobile'i stiil nii tõhus, et te ei peaks oma stiili muutma, pakkudes oma CSS-i stiililehte. Näiteks on järjestuseta loendis olevate üksuste vaheline kaugus ja tabeli vormindamine mõlemad vastuvõetavad. Samuti on hallil taustal olev must tüüp kooskõlas kohalike mobiilirakenduste vormindusega.

Kirjeldus

• Vaikimisi rakendab jQuery Mobile lehe HTML-elementidele stiilid automaatselt. Need stiilid pole mitte ainult atraktiivsed, vaid jäljendavad ka brauseri omapäraseid stiile.
• Vaikimisi rakendab jQuery Mobile väikese koguse polstrit iga mobiililehe vasakule, paremale, ülemisele ja allservale.
• Vaikimisi on lingid tavalisest tekstist veidi suuremad. See lihtsustab kasutajal linkide koputamist.
• Vaikimisi on lingid fondi värvina alla tõmmatud sinisega.

Kuidas rakendada teemasid HTML-elementidele

Mõnel juhul soovite muuta vaikestiile, mida jQuery Mobile kasutab. Seda olete juba näinud joonise 15-10 navigeerimisribal. Vaikimisi stiilide muutmiseks võite kasutada viit teemat, mida jQuery Mobile pakub. Need on kokku võetud joonisel 15-12. Need teemad on jällegi mõeldud selleks, et matkida natiivse mobiilirakenduse välimust.

Üks viis teemade rakendamiseks on andmete-teema atribuudi kodeerimine, mille väärtuseks on teemakiri. Seda nägite navigeerimisribal joonisel 15-10 ja näete seda selle joonise teise navigeerimisriba koodis. Atribuut data-theme rakendab siin päise jaoks teemat „e” ja navigeerimisribal olevate üksuste jaoks teemat „d”.

Teemade rakendamise teine ​​võimalus on määrata elemendi klassi atribuudiks klassi nimi, mis näitab teemat. Seda illustreerib esimene näide pärast tabelit. Siin kasutatakse klassi atribuuti nii elementide div kui ui-bar ja ui-bar-b rakendamiseks. Selle tulemusel rakendab jQuery Mobile kõigepealt elemendile riba vaikestiili ja seejärel selle stiili jaoks teema b. Järgnevatel lehtedel näete teisi seda tüüpi stiilinäiteid.

Pange tähele, et selle joonise tabelis on öeldud, et teemat e tuleb kasutada säästlikult. Seda seetõttu, et see kasutab oranži värvi, mis sobib eseme aktsentimiseks hästi, kuid ei ole suurtes annustes atraktiivne. Seda illustreerib selle joonise teine ​​päis ja navigeerimisriba, mis värvilisena nähes kipub kiskuma.

Üldiselt on kõige parem jääda vaikestiilide ja kolme esimese teema juurde, mis tavaliselt koos töötavad. Seejärel saate katsetada teemasid d ja e, kui arvate, et vajate midagi enamat.

Teise päise ja navigeerimisriba HTML:

header data-role = "header" data-theme = "e"> h1> SJV raekoda / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home "data-theme =" d "> Avaleht / a> / li> li> a href =" # kõlarid "data-icon =" star "data-theme =" d "> Kõlarid / a> / li> li> a href = "# news" id = "news" data-icon = "grid" data-theme = "d"> Uudised / a> / li> / ul> / div> / header>

Viis jQuery Mobile'i teemat:

Teema rakendamiseks kaks võimalust:

Atribuudi data-theme abil tehke järgmist.

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

Teemat tähistava klassi atribuudi abil:

div> Baar / div>

Kirjeldus

• Kasutades viit jQuery Mobile'iga kaasatud teemat, saate HTML-elementide vaikestiilides sobivaid muudatusi teha.
• Ehkki saate oma CSS-i stiililehte kasutada koos jQuery Mobile rakendusega, peaksite seda võimaluse korral vältima.

Perspektiiv

Mobiilseadmete kasutamine on viimastel aastatel dramaatiliselt kasvanud. Seetõttu on üha olulisem kujundada veebisaite, mida on nendest seadmetest lihtne kasutada. Kuigi see tähendab tavaliselt eraldi veebisaidi väljatöötamist, võib see olla teie Interneti-kohaloleku säilitamise kriitiline aspekt.

Õnneks on mobiiliveebisaidi loomine jQuery Mobile'i tulekuga palju lihtsamaks muutunud. Mobiiliveebilehed ei ole enam piiratud staatiliste lehtedega, mis sisaldavad päiseid, lõike, linke ja pisipilte. JQuery Mobile abil saavad veebiarendajad nüüd luua funktsiooniderikkaid veebisaite, mis näevad välja ja tunduvad omaste mobiilirakendustena.