Mobiilirakenduse disain / Dev kohandatud teemad jQuery Mobile'iga

Meie varasemas jQuery Mobile'i juhendis tutvustasin suurt osa selle aluseks olevast raamistikust ja sellest, kuidas luua oma esimese veebisaidi loomine. JS-raamatukogu on õppimisraskuste puhul nii kerge kui lihtne. Failidega on kaasas ka üldine CSS-laaditabel, et saaksite oma paigutuse elemente veelgi paremini kohandada.

Selle teise segmendi jaoks tahaksin veeta veidi aega, et sügavamale jQuery Mobile'i teemade ideele. Kogu disainitööstus on revolutsiooniliselt jQM-i poolt tehtud ning mobiilse malli koostamise protsess nullist on oluliselt paranenud. jQuery Mobile ei ole ainult skriptimiskataloog, vaid kogu maapealseks raamistikuks, mis tugineb tõhusatele mobiilsetele mallidele.

Vaikimisi laaditabeli sisu

Alustuseks peaksin täpsustama täpselt, millist tüüpi CSS-kood on vaikefailidega kaasas. JQM 1.0 stiilitabel on jagatud kaheks põhisegmendiks - struktuuri ja teemad.

Struktuuri kood on asjad, mida saate enamasti ignoreerida. Seda kasutatakse marginaalide, polstrite, kõrguse / laiuse, fondi variantide määramiseks koos paljude teiste brauseri vaikeseadetega. Seejärel jagatakse sisemised teemad A-E-st, millest igaüks kontrollib teie disaini erinevaid visuaalseid efekte. See võib hõlmata taustavärve, gradiente, varjupaiku jne.

Neid sisemisi elemente võib nimetada ka kui värvid. Kui loote mobiilimalli, jääte tavaliselt ühe teema juurde. Kuid peaaegu igas stsenaariumis on disaini võimalik parandada erinevate värviskeemidega. Vaikimisi laaditabel sisaldab ainult värve A-E, kuid saate luua värvilisi F-Z, et lisada oma teegiraamatusse veel 21 alternatiivi. Lihtsalt nende tingimuste selgitamiseks uuesti a teema peetakse üheks CSS-failiks, mis võib sisaldada kuni 26 erinevat värvid märgistatud A-Z.

Stiilide vahetamine

Kui te ei soovi määrata ühtegi värvi, siis jQuery Mobile jäädvustab värvi A vaikimisi. Kui te ei teadnud, et jQuery Mobile'i dokumendid kasutavad HTML5 andmete atribuute paljude sisemiste funktsioonide jaoks. Üks neist hõlmab värvide vahetamist andmeside atribuudi kaudu. Vaadake allolevat koodi, et näha, mida ma mõtlen.

  JQM-i vaikeväärtus
 
  Siin on mõned sisematerjalid.

Pange tähele, et panin andmemaate atribuudi root lehele div. See tähendab, et uus värvi värv mõjutab kõike, mis sisaldab nii päiseid kui ka sisu. Võiksin lisaks lisada data-theme = "c" päise divisse, et muuta ainult seda sisu mu mu lehelt.

Swatchi komponendid

See peaks olema üsna lihtne, kuidas neid erinevaid mustreid ühe paigutusega rakendada. Nüüd vaatleme nüüd jQM CSS koodi, et saaksime murda üksikud komponendid lõhkuda. Vaadake uusimat jQuery Mobile 1.4.5 CSS-faili, mis asub oma CDN-is.

Peaksite märkima, kuidas iga swatch on eraldatud eraldiseisva kommentaariga ja iga sisemine klass lõpeb vastava tähega. Näiteks .ui-bar-a ja .ui-body-a rakendatakse vaikimisi päise / jaluse ribadesse ja sisupiirkondadesse. Enamik omadusi rakendavad algseadistust fontide ja linkide värvide, taustgradientide ja muude väikeste detailide kohta. Lisasin lihtsalt selle ui-bar-a koodid, et anda teile ettekujutus sellest, milliseid elemente me sihtime.

/ * A ----------------------------------------------- ---------------------------------------------- * / .ui -bar-a border: 1px tahke # 2A2A2A; taust: # 111111; värv: #ffffff; fondi kaal: rasvane; text-shadow: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px # 000000; taustapilt: -webkit-gradient (lineaarne, vasakpoolne, vasakpoolne, (# 3c3c3c), (# 111)); / * Saf4 +, Chrome * / taustapilt: -webkit-lineaarne gradient (# 3c3c3c, # 111); / * Chrome 10+, Saf5.1 + * / taustapilt: -moz-lineaarne gradient (# 3c3c3c, # 111); / * FF3.6 * / taustapilt: -ms-lineaarne gradient (# 3c3c3c, # 111); / * IE10 * / taustapilt: -o-lineaarne gradient (# 3c3c3c, # 111); / * Opera 11.10+ * / taustapilt: lineaarne gradient (# 3c3c3c, # 111);  .ui-bar-a, .ui-bar-a sisend, .ui-bar-a valige, .ui-bar-a textarea, .ui-bar-a nupp font-family: Helvetica, Arial, sans- serif;  .ui-bar-a .ui-link-pärita värv: #fff;  .ui-bar-a .ui-link värv: # 7cc4e7 / * a-bar-link-värv * /; fondi kaal: rasvane;  .ui-bar-a .ui-link: hover color: # 2489CE / * a-bar-link-hover * /;  .ui-bar-a .ui-link: aktiivne color: # 2489CE / * a-bar-link-active * /;  .ui-bar-a .ui-link: külastatud värv: # 2489CE / * a-bar-link-külastatud * /;

Kui otsite lihtsalt kohandatud swatchi, soovitan alustada malle ühest originaalist. Protsess läheb sujuvamaks, kui hakkate koodide kirjutamist uues CSS-dokumendis. Teil ei ole originaalfailis vaevu redigeerimisega ja te võite alustada tööd puhtal kiltkilel. Kuid peamised valdkonnad, millele soovite keskenduda, hõlmavad järgmist:

päise- ja jalusribad
keha sisu ja lehe tekst
loendistiile
nupp näitab vaikimisi / hover / active
vormi sisendjuhtimine (ekstra)

Uue baari disaini kodeerimine

Samast CSS-failist vaadeldi varasemat kopeerimist / kleepimist kõik Swatch A-koodid (read 12-150) uude faili. Nende uute stiilide rakendamiseks saame kasutada swatchi nime G. Nüüd pärast koodi kopeerimist, mida soovite ümber vahetada iga klassi näite ümber -a kuni -g, jQuery Mobile tuvastab, milliseid stiile kasutada.

Sooviksin alustada päisriba bg ümber kujundamisega, et jäljendada tuttavamat iOS-gradienti. Seda saab teha ainult .ui-bar-g valija. Soovime muuta gradientefektide muutmiseks tausta ja taustapildi omadusi. Vaadake allpool minu koodi ja uue gradiendi demoekraani.

.ui-bar-g border: 1px solid # 2d3033 / * a-bar-border * /; vasakpoolne: 0px; paremale: 0px; taust: # 6d83a1; värv: #fff / * a-bar-color * /; fondi kaal: rasvane; text-shadow: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px / * a-bar-shadow-radius * / # 3e4957; taustapilt: -webkit-gradient (lineaarne, 0% 0%, 0% 100%, alates (# b4bfce), värvipeatus (0,5, # 899cb3), värvipeatus (0.505, # 7e94b0) kuni (# 6d83a1)); taustapilt: -webkit-lineaarne gradient (ülemine, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Chrome 10+, Saf5.1 + * / taustapilt: -moz-lineaarne gradient (ülemine, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * FF3.6 * / taustapilt: -ms-lineaarne gradient (ülemine, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * IE10 * / taustapilt: -o-lineaarne gradient (ülemine, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Opera 11.10+ * / taustapilt: lineaarne gradient (ülemine, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1);

Ma kasutan sinise värvi skeemi, mis on leitud enamikes vaikimisi rakendustes. Minu taust on seadistatud algseadmetele, mis ei suuda CSS3 gradiente muuta. Siis allpool ma kasutan värvi, mis peatub umbes 50% markeri ümber, et taastada traditsiooniline Apple-stiilis läikiv sära efekt. Ka sama valija sees olen veidi muutnud teksti varju peenema värvi ja vahemikuga.

Nupud ja tekstiefektid

Swatchide kodeerimisel on oluline kaaluda konkreetselt, milliseid liideseid on vaja tähelepanu pöörata. Pealkirjariba näeb selle uue taustaga hea välja, kuid üks viimane muudatus, mida ma sooviksin, sobib iOS-i rakendustega lähemal olevate nuppude stiilis.

.ui-btn-up-g border: 1px solid # 375073; taust: # 4a6c9b; fondi kaal: rasvane; värv: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; kast-vari: pole; -webkit-box-shadow: pole; -moz-box-shadow: pole; taustapilt: -webkit-gradient (lineaarne, 0% 0%, 0% 100%, alates (# 89a0be), värvipeatus (0,5, # 5877a2), värvipeatus (0.505, # 476999) kuni (# 4a6c9b)); taustapilt: -webkit-lineaarne gradient (ülemine, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Chrome 10+, Saf5.1 + * / taustapilt: -moz-lineaarne gradient (ülemine, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * FF3.6 * / taustapilt: -ms-lineaarne gradient (ülemine, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * IE10 * / taustapilt: -o-lineaarne gradient (ülemine, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Opera 11.10+ * / taustapilt: lineaarne gradient (ülemine, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); raadius: 4x; -webkit-border-radius: 4px; -moz-border-radius: 4px;  .u-btn-up-g .ui-btn-sisemine, .ui-btn-hover-g .ui-btn-sisemine, .ui-btn-down-g .ui-btn-sisemine piiri-raadius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;  .ui-btn-hover-g border: 1px tahke # 1b49a5; taust: # 2463de; fondi kaal: rasvane; värv: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; kast-vari: pole; -webkit-box-shadow: pole; -moz-box-shadow: pole; taustapilt: -webkit-gradient (lineaarne, 0% 0%, 0% 100%, alates (# 779be9), värvipeatus (0,5, # 376fe0), värvipeatus (0.505, # 2260dd) kuni (# 2463de)); taustapilt: -webkit-lineaarne gradient (ülemine, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Chrome 10+, Saf5.1 + * / taustapilt: -moz-lineaarne gradient (ülemine, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * FF3.6 * / taustapilt: -ms-lineaarne gradient (ülemine, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * IE10 * / taustapilt: -o-lineaarne gradient (ülemine, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Opera 11.10+ * / taustapilt: lineaarne gradient (ülemine, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); raadius: 4x; -webkit-border-radius: 4px; -moz-border-radius: 4px;

Koodiala, mida me praegu redigeerime, on UI nupu klassides. Seal on 3 erinevat režiimi, millega soovid tegeleda: .ui-btn-up-g, .ui-btn-hover-g, ja .ui-btn-down-g. Ma keskendun enamasti standardsetele (btn-up) ja hover (btn-hover) efektidele, redigeerides kasti varju ja lineaarseid gradiente. Samuti laiendasin ümarate nurkade efekti, et nööbid oleksid rohkem ristkülikukujulised.

Sellepärast olen ma pidanud eemaldama sisepiiri raadiuse klassist, mille pealkiri on .ui-btn-sisemine. See klass saab kinnitada iga päise baari iga ankurlinki span elemendile. Ilma piiriradade omadusi lähtestamata märkad disainis väikesed tõrked, kui liigute nupu kohal. Kui veedate jQuery Mobile'i teemadel rohkem aega kodeerides, mäletate neid väikseid nüansse tulevaste projektide jaoks.

ThemeRolleri tutvustus

Kui naudite oma käed määrdunud koodis, siis soovitan teil kohandada kohandatud muudatusi. Mitte ainult teil on rohkem kontrolli, kuid see on palju lihtsam debug probleeme CSS kui te teinud kõik muudatused ise. Kuid paljude disainerite jaoks on see protsess väsitav ja võtab lihtsalt kauem aega kui vaja. Õnneks on jQuery Mobile meeskond välja andnud online-redaktori nime ThemeRoller.

Sellelt leheküljelt saate juurdepääsu esimestele 3 A-C värvitoonile või luua isegi omaenda. Kui vaatate vasakpoolset külgriba, saate nende kolme sätte vahel vahetada või teha kiiresti muudatusi globaalsete teemavalikute vahel. Nende hulka kuuluvad CSS-i omadused, näiteks piirirajad, kasti varjud või lehe vaikefontid. Märkus, kui valite mõne eelseadistatud värvi, mida me saame redigeerida ainult samadel aladel nagu enne - ülemine / alumine riba, keha sisu ja 3 nuppude olekut.

Kuid minu lemmikfunktsioon peab olema otsene juurdepääs Adobe Kuleri värvitoonidele. Saate oma Kuleri kontol tegelikult luua mõned värvilahendused ja importida need ThemeRollerisse. Liides toetab lohistamise funktsiooni, nii et mõne minuti jooksul on mõningaid erinevaid ideid lihtne proovida.

Lõppkokkuvõttes ei ole absoluutset meetodit teie jQM-i värvide nõuetekohaseks ehitamiseks. Mõned disainerid eelistavad kõvakoodi CSS-i, samas kui teised armastavad intuitiivset ThemeRolleri veebirakendust. Niikaua kui te järgite klassi struktuuri, peaksite saama samad tulemused.

Kasulikud ressursid

jQuery Mobile'i teemad - dokumentatsioon
JQuery Mobile'i teemade kasutamine ja kohandamine