„Mobile App Design / Dev Custom“ temos su „jQuery Mobile“

Savo ankstesniame „jQuery Mobile“ vadovėlyje pristatiau daugelį pagrindų ir kaip sukurti pirmąją svetainę. JS biblioteka yra lengva ir lengva pakelti mokymosi sunkumų atžvilgiu. Taip pat yra bendrų CSS stilių, kurie yra įtraukti į rinkmenas, kad galėtumėte toliau pritaikyti savo išdėstymo elementus.

Dėl šio antrojo segmento norėčiau šiek tiek laiko praleisti giliau į šią jQuery Mobile temų idėją. Visą dizaino pramonę revoliucionavo „jQM“, o mobiliojo šablono sukūrimo nuo nulio procesas buvo gerokai patobulintas. „jQuery Mobile“ yra ne tik scenarijų biblioteka, bet ir visa pagrindinė sistema, skirta kurti ir kurti efektyvius mobiliuosius šablonus.

Numatytasis stilių lapas

Pirmiausia turėčiau paaiškinti, kokio tipo CSS kodas yra įtrauktas į numatytuosius failus. „JQM 1.0“ stilių lentelė buvo padalyta į du pagrindinius segmentus - struktūrą ir temas.

Struktūros kodas - tai daiktai, kuriuos dažniausiai galite ignoruoti. Tai naudojama norint nustatyti paraštes, užpildymą, aukštį / plotį, šriftų variantus ir daugelį kitų naršyklės numatytųjų reikšmių. Vėliau vidinės temos suskirstytos iš A-E, kurios kiekvienas valdo skirtingus vizualinius efektus jūsų dizaine. Tai gali apimti fono spalvas, gradientus, šešėlių šešėlius ir kt.

Kiekvienas iš šių vidinių temų elementų taip pat gali būti vadinamas swatches. Kai kuriate mobilųjį šabloną, paprastai laikysite vieną temą. Tačiau beveik kiekviename scenarijuje dizainas gali būti pagerintas naudojant skirtingas spalvų schemas. Į numatytąjį stilių sąrašą įeina tik A-E spalvų šablonai, tačiau galite sukurti spalvų rinkinius F-Z, kad į temos biblioteką pridėtumėte dar 21 alternatyvą. Tiesiog dar kartą paaiškinkite šiuos terminus a tema yra laikomas vienu CSS failu, kuriame gali būti iki 26 skirtingų swatches pažymėtas A-Z.

Stilių perjungimas

Jei nenorite nurodyti kokių nors swatches, jQuery Mobile pagal nutylėjimą laikysis žymės A. Jei dar nežinojote, kad jQuery Mobile dokumentai naudoja daug HTML5 duomenų atributus daugeliui vidinių funkcijų. Vienas iš jų - keičiant swatches naudojant duomenų temos atributą. Žiūrėkite žemiau pateiktą mano kodo pavyzdį, norėdami pamatyti, ką aš turiu galvoje.

  Numatytasis jQM puslapis
 
  Štai keletas vidinio turinio.

Atkreipkite dėmesį, kad duomenų temos atributą įdėjau į šaknų puslapį div. Tai reiškia, kad naujoji „swatch“ spalva paveiks viskas viduje, kuri apima ir antraštes, ir turinio sritis. Galėčiau papildomai įtraukti data-theme = "c" į antraštę div pakeisti tik tą turinį iš likusios mano puslapio dalies.

Swatch komponentai

Tai turėtų būti gana paprasta, kaip įgyvendinti šiuos skirtingus spalvas viename išdėstyme. Taigi pažvelkime į JQM CSS kodą, kad galėtume suskaidyti atskirus Swatch komponentus. Apsilankykite naujausiame jQuery Mobile 1.4.5 CSS faile, esančiame savo CDN.

Turėtumėte pastebėti, kaip kiekvienas swatch yra atskirtas atskiru komentaru, ir kiekviena vidinė klasė baigiasi atitinkama raide. Pavyzdžiui .ui-bar-a ir .ui-body-a pagal nutylėjimą taikomos antraštės / poraštės juostoms ir turinio sritims. Dauguma savybių įgyvendina šriftų ir nuorodų spalvų, fono gradientų ir kitų smulkių detalių atstatymą. Aš įtraukiau tiesiog ui-bar-a kodai, suteikiantys jums idėją, kokių elementų mes siekiame.

/ * A ----------------------------------------------- ---------------------------------------------- * / .ui -bar-a border: 1px solid # 2A2A2A; fonas: # 111111; spalva: #ffffff; šrifto svoris: paryškintas; teksto šešėlis: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px # 000000; fono vaizdas: -webkit-gradientas (tiesinis, kairysis viršuje, kairėje apačioje, nuo (# 3c3c3c) iki (# 111)); / * Saf4 +, „Chrome“ * / fono vaizdas: -webkit-linijinis gradientas (# 3c3c3c, # 111); / * Chrome 10+, Saf5.1 + * / fono vaizdas: -moz-linijinis gradientas (# 3c3c3c, # 111); / * FF3.6 * / fono vaizdas: -ms-linijinis gradientas (# 3c3c3c, # 111); / * IE10 * / fono vaizdas: -o-linijinis gradientas (# 3c3c3c, # 111); / * Opera 11.10+ * / fono vaizdas: tiesinis gradientas (# 3c3c3c, # 111);  .ui-bar-a, .ui-bar-a įėjimas, .ui-bar-a pasirinkite, .ui-bar-a textarea, .ui-bar-a mygtukas šrifto šeima: Helvetica, Arial, sans- serifas;  .ui-bar-a .ui-link-paveldėti color: #fff;  .ui-bar-a .ui-link color: # 7cc4e7 / * a-bar-link-color * /; šrifto svoris: paryškintas;  .ui-bar-a .ui-link: hover color: # 2489CE / * a-bar-link-hover * /;  .ui-bar-a .ui-link: aktyvus spalva: # 2489CE / * a-bar-link-active * /;  .ui-bar-a .ui-link: aplankyta spalva: # 2489CE / * a-bar-link-apmeklēta * /;

Jei tik norėsite sukurti priskirtą Swatch, rekomenduoju, kad šablonas būtų nukreiptas iš vieno iš originalų. Procesas prasidės daug sklandžiau, jei pradėsite rašyti kodus naujame CSS dokumente. Pradiniame faile jums nereikės redaguoti jokių rūpesčių, ir jūs galite pradėti dirbti švariu šiferiu. Tačiau pagrindinės sritys, į kurias norite sutelkti dėmesį, bus šios:

antraštės ir poraštės juostos
kūno turinys ir puslapio tekstas
sąrašo stilių
mygtukas nurodo numatytąjį / hover / active
formos įvesties valdikliai (papildomai)

Naujos juostos dizaino kodavimas

Iš to paties CSS failo į naują failą peržiūrėjome ankstesnį kopijuoti / įklijuoti visą Swatch A kodą (12-150 eilutės). Šiems naujiems stiliams įgyvendinti galime naudoti swatch pavadinimą G. Dabar nukopijavus kodą, kurį norite pervardyti kiekvienos klasės egzempliorių, kuris baigiasi -a į -g, taip jQuery Mobile atpažins, kuriuos stilius naudoti.

Norėčiau pradėti iš naujo pertvarkant antraštės juostą bg, kad imituotumėte labiau pažįstamą „iOS“ gradientą. Tai galima padaryti tik .ui-bar-g selektorių. Mes norime pakeisti fono ir fono vaizdo savybes, kad pakeistume gradiento efektus. Peržiūrėkite mano kodą žemiau ir naujo gradiento demonstracinį ekraną.

.ui-bar-g border: 1px solid # 2d3033 / * a-bar-border * /; į kairę: 0px; dešinėje: 0px; fonas: # 6d83a1; spalva: #fff / * a-bar-color * /; šrifto svoris: paryškintas; teksto šešėlis: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px / * a-bar-shadow-radius * / # 3e4957; fono paveikslėlis: -webkit-gradientas (linijinis, 0% 0%, 0% 100%, nuo (# b4bfce), spalvų sustabdymo (0,5, # 899cb3), spalvų sustabdymas (0.505, # 7e94b0), iki (# 6d83a1)); fono vaizdas: -webkit-linijinis gradientas (viršuje, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Chrome 10+, Saf5.1 + * / fono vaizdas: -moz-linijinis gradientas (viršutinis, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * FF3.6 * / fono vaizdas: -ms-linijinis gradientas (viršuje, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * IE10 * / fono vaizdas: -o-linijinis gradientas (viršuje, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Opera 11.10+ * / fono vaizdas: tiesinis gradientas (viršutinis, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1);

Naudoju mėlyną spalvų schemą, nustatytą daugumoje numatytųjų „iOS“ programų. Mano fonas iš pradžių nustatytas kaip kieta spalva tiems įrenginiams, kurie negali atlikti CSS3 gradientų. Tada žemiau aš naudoju spalvą, sustojančią aplink 50% žymeklį, kad atkurčiau tradicinį „Apple“ stiliaus blizgesį. Be to, to paties selektoriaus viduje šiek tiek pakeitiau teksto šešėlį su subtilesnė spalva ir diapazonu.

Mygtukai ir teksto efektai

Svarbu, kad koduojant swatches būtų atsižvelgta į konkrečias sąsajos sritis. Antraštės juosta puikiai atrodo su šia nauja fone, tačiau paskutinis keitimas, kurį norėčiau padaryti, atitiks mygtukų stilius, artimesnius iOS programų programai.

.ui-btn-up-g border: 1px solid # 375073; fonas: # 4a6c9b; šrifto svoris: paryškintas; spalva: #fff; teksto šešėlis: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; langelis-šešėlis: nėra; -webkit-box-shadow: nėra; -moz-box-shadow: nėra; fono paveikslėlis: -webkit-gradientas (linijinis, 0% 0%, 0% 100%, nuo (# 89a0be), spalvų sustojimas (0,5, # 5877a2), spalvų sustojimas (0.505, # 476999), iki (# 4a6c9b)); fono vaizdas: -webkit-linijinis gradientas (viršuje, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Chrome 10+, Saf5.1 + * / fono vaizdas: -moz-linijinis gradientas (viršuje, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * FF3.6 * / fono vaizdas: -ms-linijinis gradientas (viršuje, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * IE10 * / fono vaizdas: -o-linijinis gradientas (viršuje, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Opera 11.10+ * / fono vaizdas: tiesinis gradientas (viršutinis, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); pasienio spindulys: 4px; -webkit-border-radius: 4px; -moz-border-spindulys: 4px;  .u-btn-up-g .ui-btn-Internal, .ui-btn-hover-g .ui-btn-internal, .ui-btn-down-g .ui-btn-internal border-spindulys: 0; -webkit-border-radius: 0; -moz-border-spindulys: 0;  .ui-btn-hover-g border: 1px kietas # 1b49a5; fonas: # 2463de; šrifto svoris: paryškintas; spalva: #fff; teksto šešėlis: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; langelis-šešėlis: nėra; -webkit-box-shadow: nėra; -moz-box-shadow: nėra; fono paveikslėlis: -webkit-gradientas (linijinis, 0% 0%, 0% 100%, nuo (# 779be9), spalvų sustojimo (0,5, # 376fe0), spalvų sustojimas (0.505, # 2260dd), iki (# 2463de)); fono vaizdas: -webkit-linijinis gradientas (viršuje, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * „Chrome“ 10+, Saf5.1 + * / fono vaizdas: -moz-linijinis gradientas (viršutinis, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * FF3.6 * / fono vaizdas: -ms-linijinis gradientas (viršuje, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * IE10 * / fono vaizdas: -o-linijinis gradientas (viršuje, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Opera 11.10+ * / fono vaizdas: linijinis gradientas (viršuje, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); pasienio spindulys: 4px; -webkit-border-radius: 4px; -moz-border-spindulys: 4px;

Kodo sritis, kurią dabar redaguojame, yra UI mygtukų klasėse. Yra 3 skirtingi režimai, susiję su: .ui-btn-up-g, .ui-btn-hover-g, ir .ui-btn-down-g. Aš daugiausia sutelkiu dėmesį į standartinius (btn-up) ir hover (btn-hover) efektus redaguojant langelio šešėlį ir linijinius gradientus. Taip pat išplėčiau apvalius kampus, kad mygtukai atrodytų stačiakampiai.

Dėl to aš turėjau pašalinti vidinį sienos spindulį nuo klasės, pavadintos .ui-btn-internal. Ši klasė pridedama prie kiekvieno elemento, esančio jūsų antraštės juostoje. Nenustatydami sienos spindulio savybių, jūs pastebėsite mažus trikdžius dizaino metu, kai paleidžiate virš mygtuko. Kai praleidžiate daugiau laiko kodavimo į jQuery Mobile temas, jūs įsiminsite šiuos mažus niuansus būsimiems projektams.

Įvadas į „ThemeRoller“

Jei jums patinka gauti savo rankas purvinas kodo tada aš labai rekomenduojame prilipti prie pasirinktinių pakeitimų. Ne tik jūs turite daugiau kontrolės, bet ir daug lengviau išspręsti problemas CSS, jei padarėte visus pataisymus patys. Tačiau daugeliui dizainerių šis procesas yra varginantis ir paprasčiausiai užtruks ilgiau nei reikia. Laimei, jQuery Mobile komanda išleido internetinį redaktorių pavadinimu ThemeRoller.

Iš šio puslapio turite prieigą redaguoti pirmuosius 3 A-C swatches arba sukurti savo. Jei žiūrite į kairę šoninę juostą, galite persijungti tarp šių 3 nustatymų arba greitai keisti pasaulinio temos parinktis. Tai apima CSS savybes, pvz., Pasienio spindulius, langelių šešėlius arba numatytuosius puslapių šriftus. Atkreipkite dėmesį, kai pasirenkate bet kurį iš nustatytų swatches, kad galime redaguoti tik tas pačias sritis kaip ir anksčiau - viršutinės / apatinės juostos, kūno turinys ir 3 mygtukų būsenos.

Tačiau mano mėgstamiausia funkcija turi būti tiesioginė prieiga prie „Adobe Kuler“ spalvų. Iš tikrųjų „Kuler“ paskyroje galite sukurti keletą spalvų schemų ir importuoti jas į „ThemeRoller“. Sąsaja palaiko „drag-and-drop“ funkciją, todėl labai paprasta keletą minučių išbandyti keletą skirtingų idėjų.

Galų gale nėra absoliutaus metodo, kaip tinkamai pastatyti savo jQM spalvas. Kai kurie dizaineriai nori naudoti kietąjį kodą CSS, o kiti mėgsta intuityvią „ThemeRoller“ žiniatinklio programą. Tol, kol laikotės klasės struktūros, tuomet turėtumėte gauti tuos pačius rezultatus.

Naudingi ištekliai

jQuery Mobile temos - dokumentacija
JQuery Mobile temų naudojimas ir pritaikymas