Luo mobiilisivusto jQuery Mobilen avulla

Sisältö

• Kuinka koodata useita sivuja yhteen HTML-tiedostoon
• Kuvaus
• Kuinka käyttää valintaikkunoita ja siirtymiä
• Käytettävät siirtymät
• Kuvaus
• Kuinka luoda painikkeita
• Kuvaus
• Kuinka luoda navigointipalkki
• Kuinka koodata navigointipalkin HTML-koodi:
• Sisällön alustaminen jQuery Mobilella
• Oletustyylit, joita jQuery Mobile käyttää
• Kuvaus
• Kuinka soveltaa teemoja HTML-elementteihin
• Kaksi tapaa soveltaa teemaa:
• Kuvaus
• Näkökulma

Tämä on muokattu ote asiakirjan luvusta 15 Murachin HTML5 ja CSS3 esittäjät Zak Ruvalcaba ja Anne Boehm.

jQuery Mobile on ilmainen, avoimen lähdekoodin, alustojen välinen JavaScript-kirjasto, jota voit käyttää mobiilisivustojen kehittämiseen. Tämän kirjaston avulla voit luoda sivuja, jotka näyttävät ja tuntuvat natiivin mobiilisovelluksen sivuilta.

Vaikka jQuery Mobile on tällä hetkellä saatavana beetatestiversiona, tämä versio tarjoaa jo kaikki ominaisuudet, joita tarvitset erinomaisen mobiilisivuston kehittämiseen. Tämän seurauksena voit aloittaa sen käytön heti. Voit myös odottaa, että tätä versiota parannetaan jatkuvasti, joten jQuery Mobile paranee vain.

Tässä artikkelissa opit mobiilisivuston sivujen luomisen perustekniikat. Tähän sisältyy valintaikkunoiden, painikkeiden ja siirtymispalkkien käyttö.

Kuinka koodata useita sivuja yhteen HTML-tiedostoon

Päinvastoin kuin kehität verkkosivuja näytön verkkosivustolle, jQuery Mobilen avulla voit luoda useita sivuja yhdellä HTML-tiedostolla. Tätä kuvaa kuva 15-7. Täällä voit nähdä sivuston kaksi sivua sekä näiden sivujen HTML-koodin. Yllättävää on, että molemmat sivut on koodattu yhteen HTML-tiedostoon.

Kullekin sivulle koodataan yksi div-elementti, jossa data-role-attribuutin arvona on "page". Sitten kussakin näistä div-elementeistä koodaat div-elementit kunkin sivun otsikkoon, sisältöön ja alatunnisteeseen. Myöhemmin, kun HTML-tiedosto ladataan, tiedoston rungon ensimmäinen sivu näytetään.

Jos haluat linkittää HTML-tiedoston sivujen välillä, käytä paikkamerkkejä, kuten on esitetty luvun 7 kuvassa 7-11. Esimerkiksi tämän esimerkin ensimmäisen sivun a> -elementti siirtyy kohtaan "#toobin", kun käyttäjä napauttaa h2 tai img-elementti, joka on koodattu tämän linkin sisällöksi. Tämä viittaa div-elementtiin, jonka id-attribuuttina on "toobin", mikä tarkoittaa, että linkin napauttaminen vie lukijan tiedoston toiselle sivulle.

Vaikka tämä esimerkki näyttää vain kaksi sivua, voit koodata useita sivuja yhdessä HTML-tiedostossa. Muista kuitenkin, että kaikki sivut sekä niiden kuvat, JavaScript- ja CSS-tiedostot ladataan yhteen HTML-tiedostoon. Tämän seurauksena latausaika muuttuu liian pitkäksi, jos tallennat liian monta sivua yhteen tiedostoon. Kun näin tapahtuu, voit jakaa sivusi useampaan kuin yhteen HTML-tiedostoon.

Yhden HTML-tiedoston rungossa olevan kahden sivun HTML:

div data-role = "page"> header data-role = "header"> h1> SJV Town Hall / h1> / header> section data-role = "content"> h3> Vuosien 2011-2012 kaiuttimet / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> 19. lokakuuta 2011 / h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>! - KAIUTTIMIEN LOPUT - -> / section> alatunniste data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "page" id = "toobin"> header data-role = "header"> h1> SJV: n kaupungintalo / 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> Kriitikoiden ylistämän bestsellerin kirjoittaja, i> The Nine:! - KOPIO JATKUU -> / section> footer data-role =" footer "> h4> © 2011 / h4> / footer> / div>

Kuvaus

• Kun käytät jQuery Mobilea, sinun ei tarvitse kehittää erillistä HTML-tiedostoa kullekin sivulle. Sen sijaan yksittäisen HTML-tiedoston body-elementissä koodataan yksi div-elementti kullekin sivulle siten, että sen data-role-määritteeksi on asetettu "page".
• Kullekin div-elementille määrität id-attribuutiksi paikkamerkki-arvon, jota href-attribuutit voivat käyttää muiden sivujen a> -elementeissä.

Kuinka käyttää valintaikkunoita ja siirtymiä

Kuva 15-8 näyttää, kuinka luodaan valintaikkuna, joka avautuu, kun linkkiä napautetaan. Tätä varten koodaat valintaikkunan samalla tavalla kuin minkä tahansa sivun. Mutta tälle sivulle menevässä a> -elementissä koodaat data-rel-attribuutin, jonka arvona on “dialog”.

Kuten tämän kuvan esimerkit osoittavat, jQuery Mobile CSS -tiedosto muotoilee valintaikkunan eri tavalla kuin normaali verkkosivu. Oletusarvoisesti valintaikkunassa on tumma tausta valkoisella etualan tekstillä, eikä otsikko ja alatunniste ulotu sivun leveydelle. Valintaikkunan otsikossa on myös "X", jota käyttäjän on napautettava palataksesi edelliselle sivulle.

Kun koodaat a> -elementin, joka siirtyy toiselle sivulle tai valintaikkunaan, voit myös käyttää data-transfer-attribuuttia määrittelemällä yhden kuudesta siirtymästä, jotka on tiivistetty tämän kuvan taulukossa. Kaikkien näiden siirtymien on tarkoitus jäljitellä vaikutusta, jota mobiililaite, kuten iPhone, käyttää.

Käytettävät siirtymät

HTML, joka avaa sivun valintaikkunana "pop" -siirtymällä:

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

HTML, joka avaa sivun siirtymällä "haalistumaan":

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

Kuvaus

• HTML-koodi a valintaikkuna on koodattu samalla tavalla kuin mikä tahansa sivu on koodattu. Sivulle linkittävä a> -elementti sisältää kuitenkin data-rel-attribuutin, jonka arvona on "dialog". Valintaikkunan sulkemiseksi käyttäjä napauttaa X-ruutua otsikossa.
• Voit määrittää sivun tai valintaikkunan avaustavan käyttämällä datasiirtomääritettä jonkin yllä olevan taulukon arvoista. Jos laite ei tue määrittämääsi siirtymää, attribuutti ohitetaan.
• Valintaikkunan tyylin tekee jQuery Mobile CSS -tiedosto.

Kuinka luoda painikkeita

Kuva 15-9 näyttää, kuinka painikkeilla voidaan siirtyä sivulta toiselle. Voit tehdä sen asettamalla vain> -elementin data-role-attribuutiksi “button”, ja jQuery Mobile tekee loput.
Voit kuitenkin asettaa painikkeille myös muita ominaisuuksia. Jos esimerkiksi haluat, että kaksi tai useampia painikkeita ilmestyy vierekkäin, kuten tämän kuvan kaksi ensimmäistä painiketta, voit asettaa data-inline-attribuutiksi “true”.

Jos haluat lisätä jQuery Mobilen tarjoaman 18 kuvakkeen painikkeeseen, koodaat myös data-icon -attribuutin. Esimerkiksi tässä esimerkissä kolmas painike käyttää "poista" -kuvaketta ja neljäs painike "koti" -kuvaketta. Kaikki nämä kuvakkeet näyttävät kuvakkeilta, jotka saatat nähdä natiivissa mobiilisovelluksessa. Muuten nämä kuvakkeet eivät ole erillisiä tiedostoja, joita sivun on käytettävä. Sen sijaan ne tarjoaa jQuery Mobile -kirjasto.

Jos haluat ryhmitellä kaksi tai useampia painikkeita vaakasuoraan, kuten Kyllä, Ei ja Ehkä-painikkeet tässä kuvassa, voit koodata painikkeiden a> -elementit div-elementissä, jonka data-roolimääritteenä on "controlgroup" ja ”Horisontaalinen” sen tietotyyppimääritteenä. Tai, jos haluat ryhmitellä painikkeet pystysuunnassa, voit muuttaa tietotyypin määritteeksi "pystysuora".

Jos asetat painikkeen data-rel-attribuutiksi "takaisin" ja href-attribuutin puntisymbolille (#), painike palaa sivulle, joka kutsui sen. Toisin sanoen painike toimii kuin Takaisin-painike. Tätä kuvaa sivun viimeinen painike sisällössä.

Kaksi viimeistä painiketta osoittavat, kuinka painikkeet näkyvät sivun alatunnisteessa. Tässä kuvakkeet ja teksti ovat valkoisia mustaa taustaa vasten. Tällöin alatunnisteen luokan määritteeksi asetetaan ”ui-bar”, mikä kertoo jQuery Mobilelle, että sen pitäisi sijoittaa hieman enemmän tilaa alatunnisteen sisällön ympärille. Opit siitä lisää kuvasta 15-12.

Kohdassa olevien painikkeiden HTML-koodi:

! - Aseta inline-painikkeille data-line-attribuutiksi true -> a href = "#" data-role = "button" data-inline = "true"> Cancel / a> a href = "#" data -role = "button" data-inline = "true"> OK / a>! - Voit lisätä kuvakkeen painikkeeseen käyttämällä data-icon -attribuuttia -> a href = "#" data-role = "-painiketta "data-icon =" delete "> Poista / a> a href =" # "data-role =" button "data-icon =" home "> Koti / a>! - Voit ryhmitellä painikkeet käyttämällä div-elementtiä seuraavat attribuutit -> 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"> Ehkä / a> / div>! - koodaa Takaisin-painike, aseta data-rel-määritteeksi back -> a href = "#" data-role = "button" dat-rel = "back" data-icon = "back"> Takaisin edelliselle sivulle / a >

Alatunnisteen painikkeiden HTML:

alatunniste data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> Lisää Facebookiin / a> a href = "http: //www.twitter.com "data-role =" button "data-icon =" plus "> Tweet this page / a> / footer>

Kuvaus

• Jos haluat lisätä painikkeen verkkosivulle, koodaat> -elementin, jonka data-roolin määritteeksi on asetettu "painike".

Kuinka luoda navigointipalkki

Kuva 15-10 näyttää, kuinka voit lisätä navigointipalkin verkkosivulle. Voit tehdä sen koodaamalla div-elementin sen data-roolin ollessa ”navbar”. Tämän elementin sisällä koodaat ul-elementin, joka sisältää li-elementtejä, jotka sisältävät siirtymispalkin kohteiden a> -elementit. Huomaa kuitenkin, että et koodaa a-elementtien data-role-attribuuttia.

Jos haluat muuttaa siirtymispalkin kohteiden väriä, tämän esimerkin koodi sisältää kunkin kohteen data-theme-b-määritteen. Tämän seurauksena jQuery Mobile muuttaa jokaisen kohteen taustavärin mustasta, mikä on oletusarvo, houkuttelevaksi siniseksi. Lisäksi tämä koodi asettaa aktiivisen painikkeen luokan määritteeksi “ui-btn-active”, joten jQuery Mobile vaihtaa aktiivisen painikkeen värin vaaleammaksi. Tämä osoittaa, kuinka voit muuttaa jQuery Mobilen käyttämää muotoilua, ja opit siitä seuraavaksi.

Navigointipalkin HTML:

header data-role = "header"> h1> SJV Town Hall / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-theme = "b "> Etusivu / a> / li> li> a href =" # speakers "data-icon =" star "data-theme =" b "> Kaiuttimet / a> / li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> Ota yhteyttä / a> / li> / ul> / div> / header>

Kuinka koodata navigointipalkin HTML-koodi:

• Koodaa div-elementti otsikkoelementtiin. Määritä sitten div-elementin data-role attribuutiksi “navbar”.
• Koodaa div-elementin sisällä ul-elementti, joka sisältää yhden li-elementin kutakin linkkiä kohti.
• Koodaa jokaisessa li-elementissä a> -elementti href-määritteellä, joka käyttää paikkamerkkiä sivulle, johon linkin pitäisi mennä. Aseta sitten data-icon -attribuutti valitsemallesi kuvakkeelle.
• Määritä navigointipalkin aktiiviselle kohteelle luokan määritteeksi ”ui-btn-active”.Tämän jälkeen tämän kohteen väri on vaaleampi kuin muut kohdat navigointipalkissa.
• Sinun tulisi myös käyttää data-teema-määritettä jQuery Mobile -teeman käyttämiseen jokaisessa navigointipalkin kohdassa. Muussa tapauksessa palkin painikkeet ovat samaa väriä kuin muu otsikko. Lisätietoja teemojen soveltamisesta on kuvissa 15-12.

Sisällön alustaminen jQuery Mobilella

Kuten olet jo nähnyt, jQuery Mobile muotoilee verkkosivun komponentit automaattisesti oman tyylisivunsa perusteella. Nyt opit lisää siitä sekä kuinka säätää oletustyyliä, jota jQuery Mobile käyttää.

Oletustyylit, joita jQuery Mobile käyttää

Kuva 15-13 näyttää oletustyylit, joita jQuery Mobile käyttää yleisiin HTML-elementteihin. Kaikissa tyyleissään jQuery Mobile luottaa selaimen renderointimoottoriin, joten sen oma tyyli on minimaalinen. Tämä pitää latausajat nopeasti ja minimoi yleiskustannukset, joita liiallinen CSS aiheuttaisi sivulle.

Kuten näette, jQuery Mobilen muotoilu on niin tehokas, että sinun ei tarvitse muuttaa sen tyyliä toimittamalla oma CSS-tyylisivusi. Esimerkiksi järjestämättömän luettelon kohteiden väli ja taulukon muotoilu ovat molemmat hyväksyttäviä. Harmaalla taustalla oleva musta tyyppi on myös yhdenmukainen alkuperäisten mobiilisovellusten muotoilun kanssa.

Kuvaus

• Oletuksena jQuery Mobile käyttää tyylejä automaattisesti sivun HTML-elementteihin. Nämä tyylit eivät ole vain houkuttelevia, mutta myös matkivat selaimen natiivityylejä.
• Oletuksena jQuery Mobile käyttää pienen määrän pehmusteita jokaisen mobiilisivun vasemmalle, oikealle, ylhäältä ja alhaalta.
• Oletusarvoisesti linkit ovat hieman tavallista suurempia. Näin käyttäjän on helpompi napauttaa linkkejä.
• Oletusarvoisesti linkit on alleviivattu sinisellä kirjasimen värinä.

Kuinka soveltaa teemoja HTML-elementteihin

Joissakin tapauksissa haluat muuttaa jQuery Mobilen käyttämiä oletustyylejä. Olet jo nähnyt sen kuvan 15-10 navigointipalkissa. Voit muuttaa oletustyylejä käyttämällä viittä teemaa, jotka jQuery Mobile tarjoaa. Nämä on esitetty yhteenvetona kuvassa 15-12. Tässäkin tapauksessa näiden teemojen on tarkoitus jäljitellä natiivin mobiilisovelluksen ulkonäköä.

Yksi tapa soveltaa teemoja on koodata data-teema-attribuutti, jonka arvona on teemakirjain. Näit tämän kuvassa 15-10 olevasta navigointipalkista, ja näet tämän kuvan toisen navigointipalkin koodista. Tässä data-teema-attribuutti käyttää teemaa ”e” otsikkoon ja teemaa “d” siirtymispalkin kohteisiin.

Toinen tapa soveltaa teemoja on asettaa elementin luokan määritteeksi luokan nimi, joka osoittaa teeman. Tätä kuvaa taulukon jälkeinen ensimmäinen esimerkki. Tässä class-attribuuttia käytetään sekä ui-bar- että ui-bar-b-luokkien käyttämiseen div-elementissä. Tämän seurauksena jQuery Mobile soveltaa ensin palkin oletusmallia elementtiin ja sitten b-teemaa kyseiseen tyyliin. Seuraavilla sivuilla näet muita esimerkkejä tällaisesta tyylistä.

Huomaa, että tämän kuvan taulukossa sanotaan, että teemaa e käytetään säästeliäästi. Tämä johtuu siitä, että se käyttää oranssia väriä, joka toimii kunnolla kohteen korostamisessa, mutta ei houkuttele suurina annoksina. Tätä kuvaa tämän kuvan toinen otsikko ja navigointipalkki, joka pyrkii piristymään, kun näet sen värisenä.

Yleensä on parasta pysyä oletustyylien ja kolmen ensimmäisen teeman kanssa, jotka yleensä toimivat hyvin yhdessä. Sitten voit kokeilla teemoja d ja e, kun luulet tarvitsevasi jotain enemmän.

Toisen otsikon ja siirtymispalkin HTML:

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 "> Etusivu / a> / li> li> a href =" # speakers "data-icon =" star "data-theme =" d "> Kaiuttimet / a> / li> li> a href = "# news" id = "news" data-icon = "grid" data-theme = "d"> Uutiset / a> / li> / ul> / div> / header>

Viisi jQuery Mobile -teemaa:

Kaksi tapaa soveltaa teemaa:

Käyttämällä data-teema-määritettä:

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

Käyttämällä luokan attribuuttia, joka ilmaisee teeman:

div> Palkki / div>

Kuvaus

• Käyttämällä viittä teemaa, jotka sisältyvät jQuery Mobileen, voit tehdä tarvittavat muutokset HTML-elementtien oletustyyleihin.
• Vaikka voit käyttää omaa CSS-tyylisivua jQuery Mobile -sovelluksen kanssa, sinun tulee välttää tekemästä sitä aina kun mahdollista.

Näkökulma

Mobiililaitteiden käyttö on lisääntynyt dramaattisesti viime vuosina. Tämän vuoksi on tullut yhä tärkeämmäksi suunnitella verkkosivustoja, joita on helppo käyttää näillä laitteilla. Vaikka se tarkoittaa yleensä erillisen verkkosivuston kehittämistä, tämä voi olla kriittinen osa läsnäolosi ylläpitämistä Internetissä.

Onneksi mobiilisivuston rakentaminen on tullut paljon helpommaksi jQuery Mobilen tullessa markkinoille. Mobiilisivuja ei enää rajoiteta staattisiin sivuihin, jotka sisältävät otsikoita, kappaleita, linkkejä ja pikkukuvia. JQuery Mobilen avulla web-kehittäjät voivat nyt rakentaa monipuolisia verkkosivustoja, jotka näyttävät ja tuntuvat natiivilta mobiilisovelluksilta.