Mobile App Design / Dev Custom Teme z jQuery Mobile

V naši zgodnji jQuery Mobile tutorial sem predstavil veliko osnovnega okvira in kako se lotiti postavitve prve spletne strani. JS knjižnica je tako lahka in enostavna za sprejemanje v zvezi s težavami pri učenju. S datotekami je vključena tudi splošna slogovna različica CSS, tako da lahko dodatno prilagodite elemente v postavitvi.

V tem drugem segmentu bi rada porabila nekaj časa, da se poglobim v to temo jQuery Mobile themes. Celotna oblikovalska industrija je bila revolucionirana z jQM in proces izgradnje mobilne predloge iz nič se je bistveno izboljšal. jQuery Mobile ni samo knjižnica skriptov, temveč celoten osnovni okvir za gradnjo in izdelavo učinkovitih mobilnih predlog.

Privzeta vsebina preglednice

Moral bi najprej pojasniti, kakšna vrsta kode CSS je vključena v privzete datoteke. Slog sloga iz jQM 1.0 je razdeljen na dva glavna segmenta - strukturo in temah.

Strukturna koda je tisto, kar lahko večinoma prezrete. Uporablja se za nastavljanje robov, oblazinjenja, višine / širine, različic pisave in mnogih drugih privzetih nastavitev brskalnika. Notranje teme se nato razdelijo od A-E, ki vsak nadzoruje različne vizualne učinke v vašem načrtu. To lahko vključuje barve ozadja, prelome, sence padcev itd.

Vsak od teh notranjih tematskih elementov lahko imenujemo tudi swatchi. Ko ustvarite predlogo za mobilne naprave, se boste običajno držali ene teme. Toda v skoraj vsakem scenariju lahko zasnovo izboljšamo z različnimi barvnimi shemami. Privzeti slogovni slog vključuje samo swatte A-E, vendar lahko izdelate swatche F-Z, da dodate še 21 alternativ v knjižnico tem. Da bi ponovno pojasnili te pogoje a temo se šteje za eno datoteko CSS, ki lahko vsebuje do 26 različnih swatchi označena z A-Z.

Preklapljanje slogov

Če se ne odločite za podajanje swatchov, bo jQuery Mobile privzeto držal swatch A. Če se še niste zavedali, da dokumenti jQuery Mobile uporabljajo številne atribute podatkov HTML5 za številne notranje funkcije. Ena od teh vključuje spreminjanje swatchov prek atributa temo podatkov. Oglejte si moj primer spodaj, da vidite, kaj mislim.

  Privzeta jQM stran
 
  Tukaj je nekaj notranje vsebine.

Obvestilo, da sem postavil atribut temo-podatkov v korensko stran div. To pomeni, da bo nova barva swatcha vplivala na vse znotraj, ki vključuje obe strani glave in vsebine. Lahko bi tudi vključil data-theme = "c" v glavno div, da spremenite samo to vsebino iz preostale strani moje strani.

Komponente vzorca

Treba bi bilo precej enostavno, kako te različne swatche izvajati v eni sami postavitvi. Zdaj pa si poglejmo kodo jQM CSS, da lahko razčlenimo posamezne komponente swatcha. Oglejte si najnovejšo datoteko jQuery Mobile 1.4.5 CSS, ki jo gostite na lastni CDN.

Opaziti morate, kako je vsak swatch ločen z ločenim komentarjem in vsak interni razred se konča z ustreznim napisom. Na primer .ui-bar-a in .ui-telo-a privzeto se uporabijo v vrsticah glave / noge in področjih vsebine. Večina lastnosti izvaja ponastavitev barv pisave in povezave, prelivov ozadja in drugih majhnih podrobnosti. Vključila sem preprosto ui-bar-a da vam predstavimo, katere elemente ciljamo.

/ * A ----------------------------------------------- ---------------------------------------------- * / .ui -bar-a border: 1px solid # 2A2A2A; ozadje: # 111111; barva: #ffffff; font-weight: krepko; text-shadow: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px # 000000; background-image: -webkit-gradient (linearno, levo zgoraj, levo spodaj, od (# 3c3c3c), do (# 111)); / * Saf4 +, Chrome * / ozadje-slika: -webkit-linear-gradient (# 3c3c3c, # 111); / * Chrome 10+, Saf5.1 + * / ozadje-slika: -moz-linear-gradient (# 3c3c3c, # 111); / * FF3.6 * / ozadje-slika: -ms-linearni gradient (# 3c3c3c, # 111); / * IE10 * / ozadje-slika: -o-linearni gradient (# 3c3c3c, # 111); / * Opera 11.10+ * / ozadje-slika: linearni gradient (# 3c3c3c, # 111);  .ui-bar-a, .ui-bar-a vhod, .ui-bar-a izberite, .ui-bar-a tekstualno območje, .ui-bar-a gumb družina pisav: Helvetica, Arial, sans- serif;  .ui-bar-a .ui-link-inherit color: #fff;  .ui-bar-a .ui-link barva: # 7cc4e7 / * a-bar-link-color * /; font-weight: krepko;  .ui-bar-a .ui-povezava: hover color: # 2489CE / * a-bar-link-hover * /;  .ui-bar-a .ui-link: aktivna color: # 2489CE / * a-bar-link-active * /;  .ui-bar-a .ui-link: obiskano color: # 2489CE / * a-bar-link-visited * /;

Če si želite ustvariti vzorec po meri, priporočam, da predlogo postavite pred izvirnik. Proces bo veliko lažji, če začnete pisati kode v novem dokumentu CSS. Ne boste imeli težav pri urejanju v izvirni datoteki in začeli boste delati na čistem skrilavcu. Toda ključna področja, na katera se želite osredotočiti, bodo:

vrstice glave in noge
vsebina telesa in besedilo strani
seznam slogov
gumb določa privzeto / hover / aktivno
vhodni kontrolniki (dodatno)

Kodiranje nove oblike črte

Iz iste datoteke CSS smo pogledali zgodnejši copy / paste vse swatch A kode (vrstice 12-150) v novo datoteko. Ime novega sloga G lahko uporabimo za izvedbo teh novih stilov. Zdaj, ko kopirate kodo, jo želite preimenovati v vsak primer razreda -a do -g, ker bo jQuery Mobile prepoznal, katere sloge naj uporabi.

Želim začeti s preoblikovanjem vrstice glave bg, da posnemam bolj poznan iOS gradient. To je mogoče storiti samo znotraj .ui-bar-g izbirnik. Želimo urediti lastnosti ozadja in ozadja slike, da spremenimo učinke gradienta. Oglejte si spodnjo kodo in demo zaslon novega preliva.

.ui-bar-g border: 1px solid # 2d3033 / * a-bar-border * /; meja levo: 0px; meja desno: 0px; ozadje: # 6d83a1; barva: #fff / * a-bar-color * /; font-weight: krepko; text-shadow: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px / * a-bar-shadow-radius * / # 3e4957; background-image: -webkit-gradient (linearna, 0% 0%, 0% 100%, od (# b4bfce), barvna stop (0.5, # 899cb3), barvna stop (0.505, # 7e94b0), do (# 6d83a1)); background-image: -webkit-linear-gradient (vrh, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Chrome 10+, Saf5.1 + * / ozadje-slika: -moz-linear-gradient (zgoraj, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * FF3.6 * / background-image: -ms-linearni gradient (vrh, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * IE10 * / ozadje-slika: -o-linearni gradient (vrh, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Opera 11.10+ * / ozadje-slika: linearni gradient (zgoraj, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1);

Uporabljam modro barvno shemo, ki jo najdem v večini privzetih aplikacij iOS. Moje ozadje je sprva nastavljeno na polno barvo za naprave, ki ne morejo ustvariti gradientov CSS3. Potem spodaj uporabljam barvne zaustavitve okoli 50% markerja, da ponovno ustvarim tradicionalni sijajni učinek sijaja Apple-style. Tudi znotraj istega izbirnika sem nekoliko spremenil senco besedila z bolj subtilno barvo in obseg.

Gumbi in učinki besedila

Pomembno je, da kodiranje swatchov posebej obravnava, katera področja vmesnika potrebujejo pozornost. Vrstica z glavo je odlična pri tem novem ozadju, vendar se bo zadnja sprememba ujemala s stili gumbov bližje aplikacijam aplikacij iOS.

.ui-btn-up-g border: 1px solid # 375073; ozadje: # 4a6c9b; font-weight: krepko; barva: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; box-shadow: nič; -webkit-box-shadow: nič; -moz-box-shadow: nič; background-image: -webkit-gradient (linearno, 0% 0%, 0% 100%, od (# 89a0be), barvno-stop (0.5, # 5877a2), barvno-stop (0.505, # 476999), do (# 4a6c9b)); background-image: -webkit-linear-gradient (vrh, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Chrome 10+, Saf5.1 + * / ozadje-slika: -moz-linear-gradient (vrh, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * FF3.6 * / ozadje-slika: -ms-linearni gradient (top, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * IE10 * / ozadje-slika: -o-linearni gradient (top, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Opera 11.10+ * / ozadje-slika: linearni gradient (top, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); obrobni polmer: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;  .ui-btn-up-g .ui-btn-notranji, .ui-btn-hover-g .ui-btn-notranji, .ui-btn-down-g .ui-btn-notranji border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;  .ui-btn-hover-g border: 1px solid # 1b49a5; ozadje: # 2463de; font-weight: krepko; barva: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; box-shadow: nič; -webkit-box-shadow: nič; -moz-box-shadow: nič; background-image: -webkit-gradient (linearno, 0% 0%, 0% 100%, od (# 779be9), barvno-stop (0.5, # 376fe0), barvno-stop (0.505, # 2260dd), do (# 2463de)); background-image: -webkit-linear-gradient (vrh, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Chrome 10+, Saf5.1 + * / ozadje-slika: -moz-linear-gradient (zgoraj, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * FF3.6 * / background-image: -ms-linearni gradient (top, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * IE10 * / ozadje-slika: -o-linearni gradient (top, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Opera 11.10+ * / ozadje-slika: linearni gradient (top, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); obrobni polmer: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;

Območje kode, ki jo urejamo, je znotraj razredov gumbov uporabniškega vmesnika. Na voljo so 3 različni načini: .ui-btn-up-g, .ui-btn-hover-g, in .ui-btn-down-g. Osredotočam se predvsem na standardne (btn-up) in hover (btn-hover) učinke tako, da urejam polje senca in linearni gradient. Prav tako sem razširil zaobljene vogale, tako da so gumbi videti bolj pravokotni.

Zaradi tega sem moral odstraniti radij notranjega meja iz razreda z naslovom .ui-btn-notranje. Ta razred se pripne na element span v vsaki povezavi sidra v naslovni vrstici. Brez ponastavitve lastnosti radija obmeja boste opazili majhne napake pri oblikovanju, kadar hover nad gumbom. Ker boste v jQuery Mobile temah porabili več časa za kodiranje, boste te majhne nianse zapomnili za prihodnje projekte.

Uvod v ThemeRoller

Če uživate v umazanih rokah v kodi, vam priporočam, da se držite urejanj po meri. Ne samo, da imate več nadzora, temveč je veliko lažje odpravljati napake v CSS-u, če ste sami uredili vse. Toda za mnoge oblikovalce je ta proces dolgočasen in bo trajal dlje, kot je potrebno. Na srečo je ekipa jQuery Mobile izdala spletni urejevalnik pod imenom ThemeRoller.

Na tej strani imate dostop do urejanja prvih treh swatchov A-C ali celo ustvarite enega od svojih. Če pogledate v levo stransko vrstico, lahko preklapljate med temi tremi nastavitvami ali hitro spremenite možnosti globalne teme. Med njimi so lastnosti CSS, kot so obmejni polmeri, senčne škatle ali privzete pisave strani. Ko izberete katero od prednastavljenih swatchov, lahko urejamo samo enaka območja kot prej - zgornje / spodnje vrstice, vsebina telesa in stanja gumbov 3.

Toda moja najljubša funkcija mora biti neposreden dostop do swatchov Adobe Kuler. Ustvarite lahko nekaj barvnih shem v svojem Kulerjevem računu in jih uvozite v ThemeRoller. Vmesnik podpira funkcijo povleci in spusti, zato je v nekaj minutah preizkusiti nekaj različnih idej.

Navsezadnje ni absolutne metode za pravilno izdelavo swatchov jQM. Nekateri oblikovalci raje trde kode CSS, medtem ko bodo drugi radi intuitivno spletno aplikacijo ThemeRoller. Dokler sledite razredni strukturi, bi morali dobiti enake rezultate.

Koristni viri

jQuery Mobile Themes - dokumentacija
Uporaba in prilagajanje tem jQuery Mobile