Luo mukautettu teema jQuery Mobilessa

  • Tarvittava tieto: HTML, jotkut CSS ja JavaScript
  • Edellyttää: Ei muuta kuin suosikki HTML-editori ja selain
  • Projektin aika: Kaksi tuntia
  • Tukitiedosto

Tämä on muokattu ote asiakirjan luvusta 11 jQuery Mobile Web Development Essentials , julkaisija Packt Publishing.

JQuery Mobilen teema on suoraviivaista ja yksinkertaista käyttää kehittäjälle, mutta on melko monimutkainen kulissien takana. Onneksi harvoin tulee hetki, jolloin sinun on tiedettävä kaikki, mitä sinulle tehdään. On kuitenkin vähän aikaa aikamme ymmärtää, miten se toimii.

JQuery Mobilen mukana toimitetaan teemaryhmä, joka koostuu viidestä värimallista, joista kukin liittyy A-E: n kirjeeseen. Teema sisältää sarjan CSS-perusluokkia, joita voidaan soveltaa haluamallaan tavalla mihin tahansa elementtiin, ja ne sisältävät globaalit asetukset leveydelle, korkeudelle, reunan säteelle ja varjoille. Yksittäiset värimallit sisältävät tarkkoja tietoja väreistä, kirjasimista ja niin edelleen.



F-Z: n viiteen alkuperäiseen värimalliin voidaan lisätä muita värimalleja, tai alkuperäiset värimallit voidaan korvata tai ohittaa haluttaessa. Tämä järjestelmä sallii yhteensä 26 erillistä värimallia, mikä mahdollistaa miljoonien mahdollisten teeman värien, tyylien ja kuvioiden yhdistelmien. Käytät jQuery Mobile -teemaa valittuun elementtiin lisäämällä data-teema-määritteen haluamasi teeman kirjaimella:

Kehittäjät päättävät yleensä käyttää data-teema-määritemenetelmää tyylejä käytettäessä, mutta CSS-luokkien nimet on myös mahdollista liittää suoraan sivuelementteihisi tarkemman hallinnan varmistamiseksi. On olemassa kourallinen ensisijaisia ​​etuliitteitä, jotka mahdollistavat tämän joustavuuden.

01. Baarit (.ui-bar-?)

Palkki-etuliitettä käytetään yleensä otsikoihin, alatunnisteisiin ja muihin erittäin tärkeisiin alueisiin:

02. Sisältölohkot (.ui-body-?)

Sisältöblokkeja käytetään yleensä alueilla, joilla kappaleiden tekstin odotetaan esiintyvän. Sen väri auttaa takaamaan maksimaalisen luettavuuden sitä vasten asetetulla tekstivärillä:

03. Painikkeet ja luettelonäkymät (.ui-btn-?)

Painikkeet ja luettelonäkymät ovat kaksi tärkeintä elementtiä jQuery Mobile -kirjastossa, ja voit olla varma, että tiimi vietti aikaa saadakseen ne oikein. .Ui-btn-etuliite sisältää myös tyylit ylös-, alas-, hiiren- ja aktiivisille tiloille:

04. Värimallien sekoittaminen ja sovittaminen

Yksi hauskoista aiheista jQuery Mobilessa on, että lapsielementit perivät vanhemmiltaan, ellei toisin mainita. Tämä tarkoittaa, että jos laitat painikkeen ilman omaa data-teema-attribuuttia otsikkoon tai alatunnistepalkkiin, kyseinen painike käyttää samaa teemaa kuin sen vanhempi. Paha eikö?

On myös täysin hyväksyttävää, ja jopa kannustettava, sijoittaa elementti käyttämällä yhtä mallia ja elementin lapsi käyttää toista mallia. Tämä voi auttaa elementtiä erottumaan enemmän tai vastaamaan sovelluksen eri osaa tai mitä tahansa kehittäjän valitsemaa syytä. Se on mahdollista, ja mikä parasta, se on helppoa. Aseta vain painike (tai muu elementti) otsikkopalkin sisään ja määritä sille oma data-teema-määritteensä:

05. Sivuston laajuinen aktiivinen tila

jQuery Mobile käyttää myös globaalia aktiivista tilaa kaikille elementeille. Tätä aktiivista tilaa käytetään painikkeisiin, lomakeelementteihin, navigointiin ja kaikkialle, missä on tarpeen ilmoittaa, että jokin on valittuna. Ainoa tapa muuttaa tätä väriarvoa on asettaa (tai ohittaa) se CSS: n kautta. Aktiivisen tilan CSS-luokka on asianmukaisesti nimetty .ui-btn-active:

06. Oletuskuvakkeet

JQuery Mobile -sarjaan kuuluu 18 kuvaketta, jotka kattavat laajan valikoiman kehittäjien tarpeita. Kuvakesarja on valkoinen läpinäkyvällä, jonka jQuery Mobile peittää puoliläpinäkyvän mustan ympyrän yli, jotta saadaan kontrasti kaikkia värimalleja vastaan. Voit lisätä kuvakkeen määrittämällä data-icon -attribuutin haluamasi kuvakkeen nimellä:

jQuery Mobile tarjoaa myös mahdollisuuden sijoittaa kuvakkeita painikkeen ylä-, oikea-, ala- tai vasemmalle puolelle käyttämällä data-iconpos = '[ylä, oikea, ala, vasen]' attribuuttia, vasemmalla ollessa oletussijainti. Kehittäjät voivat myös näyttää kuvakkeen yksinään ilman tekstiä määrittelemällä data-iconpos = 'notext':

Mukautettujen kuvakkeiden käyttöönotto on myös mahdollista, ja siitä kerrotaan myöhemmin tässä luvussa.

07. Mukautetun teeman luominen ja käyttö

Olemme jo keskustelleet siitä, kuinka tehokas teema on jQuery Mobilessa. Se tekee triviaalista kehittää rikas mobiilisivusto, jossa on yksinkertainen ja tyylikäs tyyli. Vieläkin tehokkaampi on kyky luoda oma mallikirjasto, jonka avulla sovelluksesta tai verkkosivustosta voi tehdä todella ainutlaatuisen. Oman teeman kehittämistä voidaan lähestyä yhdellä seuraavista tavoista:

  1. Lataa ja avaa olemassa oleva jQuery Mobile CSS -tiedosto ja muokkaa sydämesi sisältöön.
  2. Osoita verkkoselaimesi kohtaan JQuery Mobilen ThemeRoller .

Keskitymme yksinomaan vaihtoehtoon 2, koska olkaamme rehellisiä, miksi kahlata koko CSS: ää läpi, kun voit osoittaa, napsauttaa ja vetää uuden aiheen, joka on täynnä värimalleja 10 minuutissa? Selvitetään, mistä ThemeRoller on kyse.

08. Mikä on ThemeRoller?

JQuery Mobilen ThemeRoller on verkkopohjaisen sovelluksen laajennus, joka on kirjoitettu jQuery UI -projektiin. Sen avulla käyttäjät voivat koota nopeasti värimalleja sisältävän teeman muutamassa minuutissa vetämällä ja pudottamalla värinhallinnalla. Siinä on interaktiivinen esikatselu, jotta voit heti nähdä, miten muutokset vaikuttavat teemaan. Siinä on myös sisäänrakennettu tarkastustyökalu, jonka avulla voit kaivaa yksityiskohtia (jos haluat niitä). Se integroituu myös Adobe Kuleriin, värinhallintatyökaluun. Voit ladata teeman, kun olet valmis, voit jakaa sen muiden kanssa mukautetun URL-osoitteen kautta ja voit tuoda aikaisemmat teemat uudelleen viime hetken säätämistä varten. Se on tehokas työkalu ja täydentää täydellisesti jQuery Mobilea.

Yksi viiden oletusmallin tunnusmerkeistä on, että jQuery Mobile -tiimi vietti melko vähän aikaa luettavuuden ja käytettävyyden parissa. Värimallit vaihtelevat suurimmasta kontrastista (A) pienimpään kontrastiin (E). Yhden teeman sisällä alueet, joilla on eniten kontrastia, ovat sivun näkyvimmät alueet. Tämä sisältää otsikon (ja luettelonäkymän otsikot) ja painikkeet. Kun luot oman teeman, on hyvä pitää tämä mielessä. Haluamme aina keskittyä sovelluksemme käytettävyyteen, eikö? Mitä hyötyä on liukkaasta sovelluksesta, jos kukaan ei voi lukea sitä huonojen värivalintojen takia?

09. ThemeRollerin käyttäminen

Ensimmäinen asia, jonka näet ladatessasi ThemeRolleria, on ohut näköinen roiskunäyttö, jota seuraa hyödyllinen Aloitusnäyttö:

Aloitusnäytössä on hyödyllisiä vinkkejä, joten muista vilkaista sitä ennen kuin napsautat Get Rolling -painiketta:

Kun kaikki splash-näytöt ovat poissa tavasta, sinulle näytetään ensisijainen käyttöliittymä:

ThemeRoller on jaettu neljään pääalueeseen: Esikatselu, Väri, Tarkastaja ja Työkalut. Jokainen näistä sisältää tärkeitä toimintoja, jotka meidän on tarkistettava. Aloitamme Esikatselu-osiosta.

10. Esikatselu

Ellet lataa olemassa olevaa teemaa, esikatselualue näyttää kolme täydellistä, identtistä ja vuorovaikutteista jQuery Mobile -sivua, jotka sisältävät kaikenlaisia ​​widgettejä:

Siirrä hiiri niiden päälle ja näet, että jokainen sivu on toimiva. Jokaisen sivun otsikossa on kirjain, joka osoittaa, mikä värimalli ohjaa sen ulkonäköä.

11. Värit

Sivun yläreunassa on joukko värisiruja, kaksi liukusäädintä ja vaihtopainike. Oikealla näet vielä kymmenen värisirua, joiden pitäisi olla tyhjiä. Ne on omistettu äskettäin käytetyille väreille, ja ne ovat tyhjiä, kunnes olet valinnut värin:

Värisirujen alapuolella on kaksi liukusäädintä, jotka on merkitty vaaleudella ja kylläisyydellä. Vaaleuden liukusäädin säätää värimallien sarjan vaaleat ja tummat sävyt, kun taas kylläisyys tekee väreistä enemmän tai vähemmän eloisia. Yhdessä käyttäjän tulisi pystyä arvioimaan lähes kaikki valitsemansa värit. Jos haluat käyttää Kulerin värejä, napsauta Adobe Kuler -mallit merkittyä tekstilinkkiä.

Jokainen värisiru voidaan vetää mille tahansa elementille esikatselualueella. Tämä tekee mallipakkauksen kehittämisen erittäin helpoksi. Huomaa, että monet jQuery Mobile -tyyleistä menevät päällekkäin, esimerkiksi sivun yläosan otsikkorivi saa saman tyylin kuin luettelonäkymän otsikko. Säädä värejä haluamallasi tavalla ja vedä jokainen siru sivun elementille. Muista, että kukin yksittäinen sivu on oma mallinsa, joten ole varovainen, kuinka valitset värien sekoittamisen.

12. Tarkastaja

Liitännän vasemmassa reunassa on tarkastuspaneeli, joka on jaettu kahteen osaan. Yläosassa on painikkeita, joiden avulla kehittäjät voivat ladata teeman, tuoda olemassa olevan teeman ja jakaa linkin teemaansa. Siellä on myös Ohje-linkki ihmisille, jotka eivät ostaneet tätä kirjaa:

Alaosa sisältää sarjan välilehtiä, jotka on merkitty Global, A, B, C ja +. Jokaisella näistä välilehdistä on harmonikkapaneeli, joka sisältää kaikki yksittäisen värimallin arvot, lukuun ottamatta Yleinen-välilehteä, joka koskee kaikkia värimalleja.

Valitse Yleinen-välilehti ja napsauta sitten Aktiivinen tila, ja harmonikkapaneeli laajenee näyttämään koko teeman aktiivisen tilan asetukset. Vaihtoehdot ovat tekstin väri, tekstin varjo, tausta ja reunus. Arvon muuttaminen maailmanlaajuisesti saa jokaisen nykyisen (ja tulevan) värimallin heijastamaan uutta asetusta.

Muita värimalleja voidaan lisätä teemaan kahdella tavalla. Tarkastajan yläosassa olevan + -välilehden napsauttaminen lisää uuden värimallin teeman viimeiseen kohtaan. Voit myös lisätä uuden värimallin napsauttamalla esikatselualueen alaosassa olevaa Lisää värimalli -painiketta. Värimallit voidaan poistaa valitsemalla välilehti poistettavan värimallin kanssa ja napsauttamalla sitten värimallin nimen oikealla puolella olevaa Poista-linkkiä. Huomaa, että värimallin poistaminen pinon yläosasta aiheuttaa jäljellä olevien mallien uudelleennimeämisen.

13. Työkalut

Sivun yläosassa on joukko painikkeita. Näiden painikkeiden avulla voit suorittaa erilaisia ​​tehtäviä, jotka käsittelemme hetkessä, mutta ensin tarkastele tarkemmin itse painikkeita:

kuinka tehdä omat tekstuurit tehosekoittimelle

Huomaat seuraavat painikkeet: kytkin, jonka avulla voit vaihtaa 1.1 (nykyinen) ja 1.0.1 versio, kumoa / tee uudelleen ja tarkastajan vaihtopainike. Kun valitset tämän vaihtoehdon päälle, voit tarkistaa kaikki esikatselualueen widgetit. Vie hiiri widgetin päälle korostaen kyseisen elementin sinisellä laatikolla. Elementin napsauttaminen saa Tarkastaja-alueen harmonikkavalikon laajenemaan näyttämään tälle elementille omat asetukset.

On neljä lisäpainiketta, joiden avulla voit ladata teeman, tuoda tai päivittää aiemmin luodun teeman, jakaa teeman muiden kanssa ja ohjepainikkeen.

14. Teeman luominen Notekeeperille

Nyt kun olemme perehtyneet ThemeRoller-käyttöliittymään, entä jos menemme eteenpäin ja luomme ensimmäisen teeman? Sen sijaan, että rakennamme sellaisen abstraktisti, luodaan sellainen, jota käytämme itse asiassa aiemmin rakentamaasi Notekeeper-sovellukseen. Aloitetaan yksinkertaisesti muokkaamalla yhtä olemassa olevista teemoista, jotka toimitetaan jQuery Mobilen mukana. Joukkue oli ystävällinen antamaan käyttäjien tuoda oletusteemat lähtökohtana uusille teemoille, joten päädymme ensin. Napsauta Tuo-painiketta ikkunan vasemmassa yläkulmassa ja saat laatikon, jonka avulla voit liittää olemassa olevan teeman sisällön:

Tuo oletusteema napsauttamalla oikeassa yläkulmassa olevaa linkkiä, nimeltään Tuo oletusteema. Kun tekstialue on täynnä CSS: ää, valitse Tuo. Esikatselualue lataa ja näyttää värimallit A: sta E: hen.

Keskitymme ponnisteluihimme valkoisen mallin D muuttamiseen, koska se on lähinnä lopullista tavoitettamme. Koska haluaisimme mieluummin käyttää mallia A nimenä, poistetaan muut mallit, jotta vain D jää jäljelle. Muista, että ThemeRoller nimeää värimallit uudelleen, kun muut poistetaan. Tämä tarkoittaa, että kun poistat värimallin A, B: stä tulee A, C: stä D ja niin edelleen.

Jatka, kunnes D-malli oli nyt A-asemassa. Poista lopuksi malli B (joka aiemmin oli malli E) niin, että jäljellä on vain malli A:

Tämä malli on mukavan näköinen, mutta se on hieman lempeä. Ruiskutetaan vähän väriä vaihtamalla otsikko mukavaksi vihreäksi. Yksinkertaisin tapa määrittää minkä elementin arvoja tulisi muuttaa on käyttää tarkastajaa. Vaihda tarkastaja kohtaan Päällä yläosassa ja napsauta sitten mitä tahansa teema A: n otsikossa. Tiedät, saitko sen oikein, jos A-välilehti on valittu vasemmalta ja Otsikko / alatunnistepalkki-paneeli laajenee:

Voit vaihtaa väriä muutamalla tavalla. Voit vetää värisirun ylhäältä suoraan taustalle. Voit myös vetää värisirun syöttökenttään. Lopuksi voit syöttää arvon manuaalisesti. Huomaa, että kun napsautat kenttää, joka sisältää väriarvon, sinulle annetaan liukas värivalitsin. Mene eteenpäin ja muuta tämän paneelin syöttökenttien arvot edellisessä kuvakaappauksessa näkyviin arvoihin.

Näyttää hyvältä, mutta nyt teeman aktiivisen tilan sininen on ristiriidassa vihreän kanssa. Napsauta tarkastustyökalulla kerran Päälle / Pois-vaihtopalkin Päällä-osaa. Tämän pitäisi saada Yleinen-välilehden Aktiivinen tila -paneeli laajenemaan. Vaihdamme sinisen mukavaksi lämpimäksi harmaaksi. Globaalin paneelin pitäisi nyt näyttää samanlaiselta kuin seuraava kuvakaappaus:

On vain yksi asia, joka estää uutta teemaa näyttämästä kuuminta, sinisen tekstilinkin yläosassa olevassa kappaleessa. Palataksemme luotettavan tarkastajan luo, napsautetaan suoraan linkkiä, joka laajentaa Sisältö-paneelia A-välilehdessä. Nyt niille, jotka ovat jo perehtyneet CSS: ään, tiedät, että et voi yksinkertaisesti muuttaa linkin väriä muuttamatta myös leijuntaa, vierailtua: leijuva ja aktiivinen tila. Ongelmana on, että näiden muutosten tekemiseen ei ole vaihtoehtoja, mutta ThemeRoller on käsitellyt sinua. Napsauta + Linkin väri -kentän oikealla puolella näyttääksesi muut vaihtoehdot ja muuta sitten värit seuraavan kuvakaappauksen mukaisesti:

Ja se on se. Tee vapaasti muutoksia teemaan, kun tutkit tarkastaja-aluetta. Muuta mitä haluat, se on vain bittiä juuri nyt. Muista kuitenkin, että kumoamisvaihtoehtoa ei ole tällä hetkellä. Jos todella pidät jostakin, harkitse arvojen kirjoittamista muistiin, jotta et menetä niitä tai vie sitä sellaisenaan. Puheen ollen...

15. Teeman vieminen

Yksi asia on huomattava ennen teeman tosiasiallista vientiä. Muistatko splash-sivun, jossa on hyödyllisiä tietoja? On käynyt ilmi, että on yksi kappale, joka ei ole suositus, vaan vaatimus.

Suosittelemme teemojen rakentamista vähintään 3 värimallilla (A-C).

Jotta teemamme soveltuu Notekeeper -sovellukseen oikein, meidän on kopioitava yksi värimallimme (kirjain A) värimalleihin B ja C. Onneksi tämä on helppo tehtävä. Valitse A-välilehti tarkastajan yläosasta ja napsauta sitten + -välilehteä kahdesti. Mitä sinun pitäisi nähdä, on kolme samanlaista värimallia, ja nyt olemme valmiit.

Nyt kun teema on valmis, vietämme sen käytettäväksi Notekeeper -sovelluksessamme. Tämä on yksinkertainen prosessi, joka alkaa napsauttamalla Lataa teema -painiketta, joka sijaitsee sivun keskellä, käyttöliittymän yläosassa. Sinulle esitetään laatikko, jossa voit nimetä teeman, joitakin tietoja teeman käyttämisestä ja painike, jonka otsikko on Lataa Zip. Kun olet nimittänyt teeman Notekeeper, napsauta Lataa Zip -painiketta ja saat maukkaan pienen palan latauskansioon.

Pura ZIP-tiedoston sisältö ja näet seuraavan hakemistorakenteen:

  • index.html
  • themes / Notekeeper.css (Teeman pakkaamaton versio) Notekeeper.min.css (Pakattu versio. Käytä tätä tuotannossa) images / ajax-loader.gif icons-18-black.png icons-18-white.png icons -36-black.png kuvakkeet-36-white.png

Puun yläosassa oleva HTML-tiedosto sisältää tietoja teeman toteuttamisesta sekä muutamia widgettejä, jotka varmistavat, että teema toimii. Kaikki linkit ovat suhteellisia esimerkkitiedostossa, joten sinun pitäisi pystyä vetämään se mihin tahansa selainikkunaan ja nähdä tulokset.

Muutama huomautus teemojen lataamisesta ja toteuttamisesta:

1. jQuery-tiimi tarjoaa painikkeiden kuvakkeet sinulle tässä ZIP-tiedostossa syystä. Teema edellyttää, että nämä kuvat ovat suhteessa CSS-tiedostoon. Tämä tarkoittaa, että ellet jo käytä oletusteemoja, sinun on sisällytettävä myös kuvat-kansio, kun lataat teeman verkkosivustollesi, tai kuvakkeet eivät näy.

kaksi. Pidä kiinni teeman pakkaamattomasta versiosta . Vaikka et halua käyttää sitä tuotannossa koon vuoksi, tarvitset sitä, jos haluat koskaan muokata sitä ThemeRollerissa. ThemeRoller ei voi tämän kirjoituksen aikana tuoda pienennettyä CSS-tiedostoa.

Andy Matthews on ollut sovelluskehittäjä yli 16 vuoden ajan ja hänellä on taitoja käyttöliittymästä / graafisesta suunnittelusta ja ohjelmoinnista. Hän on puhuja, avoimen lähdekoodin kehittäjä ja asuu perheensä kanssa Nashvillessä, TN. Hän on @commadelimited Twitterissä.

Raymond Camden on Adoben vanhempi kehittäjäevangelisti. Hänen työnsä keskittyy verkkostandardeihin, mobiilikehitykseen ja ColdFusioniin. Hän on julkaistu kirjailija ja esiintyy konferensseissa ja käyttäjäryhmissä eri aiheista. Seuraa häntä osoitteessa @cfjedimaster.