Mobiilisovellusten suunnittelu / muokatut teemat jQuery Mobilen avulla

Aiemmassa jQuery Mobile -opetusohjelmassani olin ottanut käyttöön suuren osan taustalla olevasta kehyksestä ja siitä, miten voit luoda ensimmäisen verkkosivuston. JS-kirjasto on sekä kevyt että helppo oppia oppimisvaikeuksien suhteen. Tiedostojen mukana on myös yleinen CSS-tyylitaulukko, jonka avulla voit edelleen mukauttaa ulkoasun elementtejä.

Tätä toista segmenttiä varten haluaisin viettää vähän aikaa syvemmälle tämän jQuery Mobile -teemojen ajatukseen. Koko suunnitteluteollisuus on mullistanut jQM: n ja mobiilimallipohjan rakentaminen tyhjästä on parantunut merkittävästi. jQuery Mobile ei ole vain skriptauskirjasto, vaan koko kenttäkehys tehokkaiden mobiilimallien rakentamiseen ja tuottamiseen.

Oletustyyliä sisältävä sisältö

Aloitan selvittämällä tarkalleen, minkä tyyppinen CSS-koodi on oletustiedostojen mukana. JQM 1.0: n tyylitaulukko on jaettu kahteen pää segmenttiin - rakenne ja teemat.

Rakennekoodi on tavaraa, jota enimmäkseen voi jättää huomiotta. Tätä käytetään asettamaan marginaalit, pehmusteet, korkeus / leveys, kirjasinmuunnokset sekä monet muut selaimen oletusasetukset. Sisäiset teemat jaetaan sitten A-E: stä, joista kukin ohjaa erilaisia visuaalisia tehosteita suunnittelussa. Tähän voi kuulua taustavärit, kaltevuudet, varjostukset jne.

Kukin näistä sisäisistä teemaelementeistä voidaan kutsua myös nimellä värikartan. Kun luot mobiilimallipohjan, voit yleensä tavata yhden teeman. Mutta lähes kaikissa skenaarioissa muotoilua voidaan parantaa erilaisilla värimalleilla. Oletustyyli sisältää vain A-E -mallit, mutta voit rakentaa värimalleja F-Z lisätäksesi vielä 21 vaihtoehtoa teeman kirjastoon. Vain selventää näitä termejä uudelleen a teema katsotaan yhdeksi CSS-tiedostoksi, joka voi sisältää jopa 26 erilaista värikartan merkitty A-Z.

Tyylien vaihtaminen

Jos et halua määrittää mitään värimallia, jQuery Mobile pysyy mallina A oletusarvoisesti. Jos et ole jo tietoinen siitä, että jQuery Mobile -asiakirjat käyttävät HTML5-dataattribuutteja moniin sisäisiin toimintoihin. Yksi näistä sisältää värikartojen muuttamisen datateeman määritteen kautta. Tutustu alla olevaan koodiesimerkkiin, mitä tarkoitan.

  JQM: n oletusarvoinen sivu
 
  Tässä on joitakin sisäisiä sisältöjä.

Huomaa, että asetin data-teema-attribuutin root-sivulle div. Tämä tarkoittaa, että uusi värimalli vaikuttaa kaiken sisälle, joka sisältää sekä otsikon että sisällön alueet. Voisin myös lisätä data-teeman = "C" otsikkotilaan muuttamaan vain kyseistä sisältöä muusta sivusta.

Swatchin osat

Sen pitäisi olla melko suoraviivainen, miten nämä eri mallit voidaan toteuttaa yhdessä asettelussa. Joten katsotaanpa nyt jQM CSS -koodia, jotta voimme hajottaa yksittäisen mallin osat. Tutustu uusimpaan jQuery Mobile 1.4.5 CSS -tiedostoon, joka on omassa CDN: ssä.

Sinun tulisi huomata, miten jokainen värimalli on erotettu erillisellä kommentilla, ja jokainen sisäinen luokka päättyy asianmukaiseen kirjaimeen. Esimerkiksi .Ui-bar-a ja .Ui-body-a asetetaan oletusarvoisesti otsikko- / alatunnisteisiin ja sisältöalueisiin. Useimmat ominaisuudet toteuttavat resetin fontin ja linkin väreistä, taustakäyristä ja muista pienistä yksityiskohdista. Olen sisällyttänyt yksinkertaisesti Ui-bar-a koodit, jotka antavat sinulle käsityksen siitä, mitkä elementit kohdistamme.

/ * A ----------------------------------------------- ---------------------------------------------- * / .ui -bar-a border: 1px solid # 2A2A2A; tausta: # 111111; väri: #ffffff; font-paino: lihavoitu; text-shadow: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px # 000000; taustakuva: -webkit-gradientti (lineaarinen, vasen yläosa, vasen pohja, (# 3c3c3c), (# 111)); / * Saf4 +, Chrome * / taustakuva: -webkit-lineaarinen gradientti (# 3c3c3c, # 111); / * Chrome 10+, Saf5.1 + * / taustakuva: -moz-lineaarinen gradientti (# 3c3c3c, # 111); / * FF3.6 * / taustakuva: -ms-lineaarinen gradientti (# 3c3c3c, # 111); / * IE10 * / taustakuva: -o-lineaarinen gradientti (# 3c3c3c, # 111); / * Opera 11.10+ * / taustakuva: lineaarinen gradientti (# 3c3c3c, # 111);  .ui-bar-a, .ui-bar-a tulo, .ui-bar-a valitse, .ui-bar-a textarea, .ui-bar-a painike font-perhe: Helvetica, Arial, sans- serif;  .ui-bar-a .ui-link-perimä väri: #fff;  .ui-bar-a .ui-link väri: # 7cc4e7 / * a-bar-link-väri * /; font-paino: lihavoitu;  .ui-bar-a .ui-link: hover väri: # 2489CE / * a-bar-link-hover * /;  .ui-bar-a .ui-link: aktiivinen väri: # 2489CE / * a-bar-link-aktiivinen * /;  .ui-bar-a .ui-link: vieraillut väri: # 2489CE / * a-bar-link-vierailu * /;

Jos haluat vain luoda mukautetun mallin, suosittelen, että mallin perustana on yksi alkuperäiskappale. Prosessi menee paljon tasaisemmaksi, jos aloitat koodien kirjoittamisen uuteen CSS-dokumenttiin. Sinulla ei ole alkuperäisen tiedoston muokkausta vaivaa, ja voit aloittaa työskentelyn puhtaalla liuskekivellä. Mutta tärkeimmät alueet, joihin haluat keskittyä, ovat seuraavat:

otsikko- ja alatunnistepalkit
kehon sisältö ja sivun teksti
luettelotyylejä
-painike ilmoittaa oletus / hover / active
lomakkeen syöttöohjaukset (ylimääräinen)

Uuden palkkikoodin koodaus

Samasta CSS-tiedostosta tarkastelimme aikaisempaa kopioi / liitä kaikki mallin A-koodit (rivit 12-150) uuteen tiedostoon. Voimme käyttää swatch-nimeä G näiden uusien tyyleiden toteuttamiseen. Nyt kun olet kopioinut koodin, jonka haluat nimetä uudelleen jokaisen luokkakohteen, joka päättyy - että -g, jQuery Mobile tunnistaa, mitä tyylejä käytetään.

Haluaisin aloittaa uudelleen suunnitellessasi otsikkorivin bg jäljittelemään tutumpaa iOS-gradienttia. Tämä voidaan tehdä yksinomaan .ui-bar-g: valitsin. Haluamme muokata taustan ja taustakuvan ominaisuuksia muuttamalla kaltevuusvaikutuksia. Tutustu alla olevaan koodiin ja uuden gradientin demonäyttöön.

.ui-bar-g border: 1px solid # 2d3033 / * a-bar-border * /; reunan vasen: 0px; raja-oikea: 0px; tausta: # 6d83a1; väri: #fff / * a-bar-color * /; font-paino: lihavoitu; text-shadow: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px / * a-bar-shadow-säde * / # 3e4957; taustakuva: -webkit-gradient (lineaarinen, 0% 0%, 0% 100%, (# b4bfce), värin pysäytys (0,5, # 899cb3), värin pysäytys (0.505, # 7e94b0), (# 6d83a1)); taustakuva: -webkit-lineaarinen gradientti (alkuun, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Chrome 10+, Saf5.1 + * / taustakuva: -moz-lineaarinen gradientti (alkuun, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * FF3.6 * / taustakuva: -ms-lineaarinen gradientti (alkuun, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * IE10 * / taustakuva: -o-lineaarinen gradientti (alkuun, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Opera 11.10+ * / taustakuva: lineaarinen gradientti (alkuun, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1);

Käytän sinistä värimaailmaa, joka löytyy useimmista iOS-sovelluksista. Taustani on aluksi asetettu kiinteäksi väriksi laitteille, jotka eivät voi tehdä CSS3-kaltevuuksia. Sitten alla käytän väriä, joka pysähtyy 50%: n merkin ympärille luomaan perinteisen Apple-tyylisen kiiltävän kiiltoefektin. Myös saman valitsimen sisällä olen hieman muuttanut tekstin varjoa hienovaraisemmalla värillä ja alueella.

Painikkeet ja tekstitehosteet

Swatchien koodauksessa on tärkeää pohtia erityisesti, mitkä käyttöliittymän alueet tarvitsevat huomiota. Otsikkorivi näyttää hyvältä tällä uudella taustalla, mutta viimeisin muutos, jonka haluaisin tehdä, vastaa painikkeita, jotka ovat lähempänä iOS-sovellusten tyyliä.

.ui-btn-up-g border: 1px solid # 375073; tausta: # 4a6c9b; font-paino: lihavoitu; väri: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-säde * / # 40536d; laatikko-varjo: ei; -webkit-box-shadow: ei; -moz-box-shadow: ei; taustakuva: -webkit-gradient (lineaarinen, 0% 0%, 0% 100%, alkaen (# 89a0be), värin pysäytys (0.5, # 5877a2), värin pysäytys (0.505, # 476999), ((#) 4a6c9b)); taustakuva: -webkit-lineaarinen gradientti (alkuun, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Chrome 10+, Saf5.1 + * / taustakuva: -moz-lineaarinen gradientti (alkuun, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * FF3.6 * / taustakuva: -ms-lineaarinen gradientti (alkuun, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * IE10 * / taustakuva: -o-lineaarinen gradientti (alkuun, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Opera 11.10+ * / taustakuva: lineaarinen gradientti (alkuun, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); raja-säde: 4px; -webkit-border-radius: 4px; -moz-border-säde: 4px;  .u-btn-up-g .ui-btn-sisäinen, .ui-btn-hover-g .ui-btn-sisäinen, .ui-btn-down-g .ui-btn-sisäinen raja-säde: 0; -webkit-border-radius: 0; -moz-border-säde: 0;  .ui-btn-hover-g border: 1px solid # 1b49a5; tausta: # 2463de; font-paino: lihavoitu; väri: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-säde * / # 40536d; laatikko-varjo: ei; -webkit-box-shadow: ei; -moz-box-shadow: ei; taustakuva: -webkit-gradient (lineaarinen, 0% 0%, 0% 100%, alkaen (# 779be9), väripysähdys (0,5, # 376fe0), väripysähdys (0.505, # 2260dd), (# 2463de)); taustakuva: -webkit-lineaarinen gradientti (alkuun, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Chrome 10+, Saf5.1 + * / taustakuva: -moz-lineaarinen gradientti (alkuun, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * FF3.6 * / taustakuva: -ms-lineaarinen gradientti (alkuun, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * IE10 * / taustakuva: -o-lineaarinen gradientti (alkuun, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Opera 11.10+ * / taustakuva: lineaarinen gradientti (alkuun, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); raja-säde: 4px; -webkit-border-radius: 4px; -moz-border-säde: 4px;

Nyt muokattava koodialue on UI-painikkeiden luokissa. Käytettävissä on kolme eri tilaa: .ui-BTN-up-g, .ui-BTN-osoitusruutu g, ja .ui-BTN-alas-g. Olen enimmäkseen keskittynyt standardi (btn-up) ja hover (btn-hover) vaikutuksiin muokkaamalla laatikon varjoa ja lineaarisia gradientteja. Laajennin myös pyöristetyt kulmat, jolloin painikkeet näkyvät suorakaiteen muotoisina.

Tämän vuoksi olen tarvinnut poistaa sisärajan säteen luokasta nimeltä .ui-BTN-sisempi. Tämä luokka liitetään span-elementtiin jokaiseen otsikkorivin ankkurilinkkiin. Ilman raja-alueen säteen ominaisuuksien palauttamista huomaat suunnittelussa pieniä häiriöitä aina kun painat painiketta. Kun vietät enemmän aikaa koodausta jQuery Mobile -teemoihin, voit muistaa nämä pienet vivahteet tuleviin projekteihin.

Johdatus ThemeRolleriin

Jos pidät kädet likaisiksi koodissa, suosittelen, että noudatat mukautettuja muokkauksia. Sinulla ei ole pelkästään enemmän valvontaa, mutta CSS: n ongelmien vianmääritys on paljon helpompaa, jos teit kaikki muokkaukset itse. Mutta monille suunnittelijoille tämä prosessi on väsynyt ja kestää vain kauemmin kuin on tarpeen. Onneksi jQuery Mobile -tiimi on julkaissut online-editorin nimellä ThemeRoller.

Tällä sivulla voit käyttää ensimmäisiä 3 A-C -mallia tai jopa luoda omia. Jos tarkastelet vasemmassa sivupalkissa, voit vaihtaa näiden kolmen asetuksen välillä tai tehdä nopeasti muutoksia maailmanlaajuisiin teemavaihtoehtoihin. Näitä ovat esimerkiksi CSS-ominaisuudet, kuten rajan säteet, laatikon varjot tai sivun oletusfontit. Huomaa, kun valitset jonkin esiasetetun mallin, jota voimme muokata vain samoilla alueilla kuin ennen - ylä- / alareunat, kehon sisältö ja 3 painikkeen tilat.

Mutta minun suosikkifunktionani on oltava suora pääsy Adobe Kulerin värimalleihin. Voit itse luoda muutama värisarja Kuler-tilissäsi ja tuoda ne ThemeRolleriin. Käyttöliittymä tukee vedä ja pudota -toimintoa, joten on todella helppoa kokeilla muutamia erilaisia ideoita muutamassa minuutissa.

Loppujen lopuksi ei ole mitään absoluuttista menetelmää jQM-värimallisi asianmukaiseksi rakentamiseksi. Jotkut suunnittelijat haluavat kovaa koodia CSS, kun taas toiset rakastavat intuitiivista ThemeRoller-web-sovellusta. Niin kauan kuin noudatat luokan rakennetta, sinun pitäisi saada samat tulokset.

Hyödyllisiä resursseja

jQuery Mobile -teemat - dokumentaatio
JQuery Mobile -teemojen käyttö ja mukauttaminen