Mobilās aplikācijas dizains / pielāgotas tēmas ar jQuery Mobile

Mūsu agrākā jQuery Mobile apmācība man bija ieviesusi lielu daļu no pamata sistēmas un par to, kā izveidot savu pirmo tīmekļa vietni. JS bibliotēka ir gan viegla, gan viegli uztverama attiecībā uz mācīšanās grūtībām. Ar failiem ir iekļauta arī vispārēja CSS stila lapa, lai jūs varētu turpmāk pielāgot izkārtojuma elementus.

Šim otrajam segmentam es gribētu pavadīt mazliet laika, lai dziļāk iedomāties šo jQuery Mobile tēmu ideju. Visa dizaina nozare ir revolucionizēta ar jQM, un mobilās veidnes veidošanas process no nulles ir ievērojami uzlabojies. jQuery Mobile ir ne tikai skriptu bibliotēka, bet gan viss pamats, lai izveidotu un ražotu efektīvas mobilās veidnes.

Default Stylesheet Contents

Vispirms vajadzētu precizēt, kāda veida CSS kods ir iekļauts noklusētajos failos. Stila lapa no jQM 1.0 ir sadalīta divos galvenajos segmentos - struktūru un tēmas.

Struktūras kods ir sīkumi, kurus pārsvarā var ignorēt. To izmanto, lai iestatītu margas, polsterējumu, augstumu / platumu, fontu variantus, kā arī daudzus citus pārlūkprogrammas noklusējuma iestatījumus. Pēc tam iekšējās tēmas tiek sadalītas no A-E, kuras katra kontrolē dažādus vizuālos efektus jūsu dizainā. Tas var ietvert fona krāsas, gradientus, nokrišņu ēnas utt.

Katru no šiem iekšējiem tematiskajiem elementiem var saukt arī par swatches. Kad būsiet izveidojis mobilo veidni, jūs parasti pieturaties pie vienas tēmas. Bet gandrīz visos scenārijos dizains var tikt uzlabots ar atšķirīgām krāsu shēmām. Noklusējuma stillapā ir iekļautas tikai A-E swatches, bet jūs varat veidot swatches F-Z, lai pievienotu vēl 21 alternatīvas tēmas bibliotēkai. Vienkārši paskaidrojiet šos noteikumus vēlreiz a tēma tiek uzskatīts par vienu atsevišķu CSS failu, kas var saturēt līdz 26 dažādiem swatches marķēts ar A-Z.

Stilu maiņa

Ja neizvēlaties, lai norādītu kādus swatches, tad jQuery Mobile pēc noklusējuma pieturēs pie A parauga. Ja jūs vēl nezināt, ka jQuery Mobile dokumenti izmanto daudzas iekšējās funkcijas HTML5 datu atribūtus. Viens no tiem ietver swatches maiņu, izmantojot datu temata atribūtu. Skatiet tālāk redzamo manu koda piemēru, lai redzētu, ko es domāju.

  Noklusējuma jQM lapa
 
  Šeit ir daži iekšējie materiāli.

Ievērojiet, ka datu temata atribūtu ievietoju saknes lapā div. Tas nozīmē, ka jaunā krāsu krāsa ietekmēs visu, kas ietver gan galvenes, gan satura apgabalus. Es varētu arī iekļaut data-theme = "c" galvenajā divpusē, lai mainītu tikai šo saturu no pārējās manas lapas.

Swatch komponenti

Tas būtu diezgan vienkārši, kā šos dažādos paraugus īstenot vienā izkārtojumā. Tātad, tagad pieņemsim apskatīt jQM CSS kodu, lai mēs varētu nojaukt atsevišķus vāls komponentus. Pārbaudiet jaunāko jQuery Mobile 1.4.5 CSS failu, kas izvietots savā CDN.

Jums vajadzētu pamanīt, kā katrs vāls ir atdalīts ar atšķirīgu komentāru, un katra no iekšējām klasēm beidzas ar atbilstošu burtu. Piemēram .ui-bar-a un .ui-body-a tiek izmantoti galvenes / kājenes joslās un satura apgabalos pēc noklusējuma. Lielākā daļa rekvizītu īsteno atiestatīšanu uz fontu un saišu krāsām, fona gradientiem un citām sīkām detaļām. Es vienkārši iekļāvu ui-bar-a kodi, lai sniegtu jums priekšstatu par to, kurus elementus mēs mērķējam.

/ * A ----------------------------------------------- ---------------------------------------------- * / .ui -bar-a border: 1px ciets # 2A2A2A; fons: # 111111; krāsa: #ffffff; font-weight: bold; teksta ēna: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px # 000000; fona attēls: -webkit-gradients (lineārs, kreisais augšējais, kreisais apakšējais, no (# 3c3c3c) līdz (# 111)); / * Saf4 +, Chrome * / fona attēls: -webkit-lineārs gradients (# 3c3c3c, # 111); / * Chrome 10+, Saf5.1 + * / fona attēls: -moz-lineārs gradients (# 3c3c3c, # 111); / * FF3.6 * / fona attēls: -ms-lineārs gradients (# 3c3c3c, # 111); / * IE10 * / fona attēls: -o-lineārā gradienta (# 3c3c3c, # 111); / * Opera 11.10+ * / fona attēls: lineārs gradients (# 3c3c3c, # 111);  .ui-bar-a, .ui-bar-a ieeja, .ui-bar-a izvēlieties, .ui-bar-a textarea, .ui-bar-a poga font-family: Helvetica, Arial, sans- serifs;  .ui-bar-a .ui-link-mantot krāsa: #fff;  .ui-bar-a .ui-link krāsa: # 7cc4e7 / * a-bar-link-krāsa * /; font-weight: bold;  .ui-bar-a .ui-link: hover krāsa: # 2489CE / * a-bar-link-hover * /;  .ui-bar-a .ui-link: aktīva krāsa: # 2489CE / * a-bar-link-active * /;  .ui-bar-a .ui-link: apmeklējis krāsa: # 2489CE / * a-bar-link apmeklēja * /;

Ja jūs tikai vēlaties izveidot pielāgotu paraugu, iesaku veidni atdalīt no viena oriģināla. Process sāk iet daudz vieglāk, ja sāksiet rakstīt kodus jaunā CSS dokumentā. Sākotnējā failā jums nebūs problēmu rediģēt, un jūs varat sākt strādāt ar tīru šīferi. Taču galvenās jomas, kurās vēlaties koncentrēties, ietvers:

galvenes un kājenes joslas
ķermeņa saturs un lapas teksts
saraksta stili
poga norāda noklusējuma / hover / aktīvo
veidlapas ievades kontroles (papildus)

Jauna bāra dizaina kodēšana

No tā paša CSS faila mēs skatījām agrāk kopēt / ielīmēt visu Swatch A kodu (rindas 12-150) jaunā failā. Lai īstenotu šos jaunos stilus, mēs varam izmantot Swatch nosaukumu G. Tagad pēc koda kopēšanas, kuru vēlaties pārdēvēt par katru klases instanci, kas beidzas ar -a uz -g, tā kā jQuery Mobile atpazīs, kurus stilus izmantot.

Es gribētu sākt, pārveidojot galvenes joslu bg, lai imitētu pazīstamāku iOS gradientu. To var izdarīt tikai .ui-bar-g selektoru. Mēs vēlamies rediģēt fona un fona attēla īpašības, lai mainītu gradienta efektus. Pārbaudiet manu kodu zemāk un jaunā gradienta demonstrācijas ekrānu.

.ui-bar-g border: 1px solid # 2d3033 / * a-bar-border * /; kreisajā pusē: 0px; labajā pusē: 0px; fons: # 6d83a1; krāsa: #fff / * a-bar-color * /; font-weight: bold; teksta ēna: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px / * a-bar-shadow-rādiuss * / # 3e4957; fona attēls: -webkit-gradients (lineārs, 0% 0%, 0% 100%, no (# b4bfce), krāsu apstāšanās (0.5, # 899cb3), krāsu apstāšanās (0.505, # 7e94b0) līdz (# 6d83a1)); fona attēls: -webkit-lineārs gradients (augšā, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Chrome 10+, Saf5.1 + * / fona attēls: -moz-lineārs gradients (augšā, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * FF3.6 * / fona attēls: -ms-lineārs gradients (augšā, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * IE10 * / fona attēls: -o-lineārie gradienti (augšā, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Opera 11.10+ * / fona attēls: lineārs gradients (augšā, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1);

Es izmantoju zilo krāsu shēmu, kas atrodama lielākajā daļā noklusējuma iOS lietojumprogrammu. Sākotnēji mans fons ir iestatīts uz cietu krāsu ierīcēm, kas nevar padarīt CSS3 gradientus. Tad tālāk es izmantoju krāsu, kas apstājas ap 50% marķieri, lai atjaunotu tradicionālo Apple stila spīdīgo efektu. Arī viena un tā paša selektora iekšpusē esmu nedaudz pārveidojis teksta ēnu ar izsmalcinātu krāsu un diapazonu.

Pogas un teksta efekti

Svarīgi, ka, meklējot swatches, jāapsver, kādas interfeisa zonas ir jāpievērš uzmanībai. Augšējā josla izskatās lieliski ar šo jauno fonu, bet pēdējais labojums, ko es vēlētos veikt, atbilstu pogas stiliem, kas ir tuvāki iOS lietotņu stilam.

.ui-btn-up-g border: 1px solid # 375073; fons: # 4a6c9b; font-weight: bold; krāsa: #fff; teksta ēna: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-rādiuss * / # 40536d; kastes ēna: nav; -webkit-box-shadow: nav; -moz-box-shadow: nav; fona attēls: -webkit-gradients (lineārs, 0% 0%, 0% 100%, no (# 89a0be), krāsu apstāšanās (0,5, # 5877a2), krāsu apstāšanās (0.505, # 476999), uz (# 4a6c9b)); fona attēls: -webkit-lineārs gradients (augšā, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Chrome 10+, Saf5.1 + * / fona attēls: -moz-lineārs gradients (augšā, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * FF3.6 * / fona attēls: -ms-lineārs gradients (augšā, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * IE10 * / fona attēls: -o-lineārs gradients (augšā, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Opera 11.10+ * / fona attēls: lineārs gradients (augšā, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); robežu rādiuss: 4px; -webkit-robežu rādiuss: 4px; -moz-border-rādiuss: 4px;  .u-btn-up-g .ui-btn-iekšējā, .ui-btn-hover-g .ui-btn-iekšējā, .ui-btn-down-g .ui-btn-iekšējā robežu rādiuss: 0; -webkit-border-radius: 0; -moz-border-rādiuss: 0;  .ui-btn-hover-g border: 1px cietais # 1b49a5; fons: # 2463de; font-weight: bold; krāsa: #fff; teksta ēna: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-rādiuss * / # 40536d; kastes ēna: nav; -webkit-box-shadow: nav; -moz-box-shadow: nav; fona attēls: -webkit-gradients (lineārs, 0% 0%, 0% 100%, no (# 779be9), krāsu apstāšanās (0,5, # 376fe0), krāsu apstāšanās (0.505, # 2260dd) līdz (# 2463de)); fona attēls: -webkit-lineārs gradients (augšā, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Chrome 10+, Saf5.1 + * / fona attēls: -moz-lineārs gradients (augšā, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * FF3.6 * / fona attēls: -ms-lineārs gradients (augšā, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * IE10 * / fona attēls: -o-lineārs gradients (augšā, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Opera 11.10+ * / fona attēls: lineārs gradients (augšā, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); robežu rādiuss: 4px; -webkit-robežu rādiuss: 4px; -moz-border-rādiuss: 4px;

Kodu zona, kuru mēs tagad rediģējam, atrodas UI pogu klasēs. Ir 3 dažādi režīmi, kas saistīti ar: .ui-btn-up-g, .ui-btn-hover-g, un .ui-btn-down-g. Es galvenokārt koncentrējos uz standarta (btn-up) un hover (btn-hover) efektiem, rediģējot kastes ēnu un lineāros gradientus. Arī es paplašināju noapaļotus stūri, lai pogas būtu vairāk taisnstūra formas.

Šī iemesla dēļ man vajadzēja noņemt iekšējo robežu rādiusu no klases, kas nosaukta .ui-btn-iekšējā. Šī klase tiek pievienota span elementam katrā galvenajā joslā esošajā saitē. Neatjaunojot robežu rādiusa rekvizītus, jūs pamanīsiet, ka dizainā vienmēr būs nelielas glitches, kad jūs virzās virs pogas. Tā kā jQuery Mobile tēmās vairāk laika kodēsiet, jūs iegaumēsiet šīs mazās nianses nākotnes projektiem.

Ievads ThemeRoller

Ja jums patīk saņemt rokas netīras kodā, tad es ļoti iesaku pielīmēt pielāgotajiem labojumiem. Ne tikai jums ir lielāka kontrole, bet tas ir daudz vieglāk atkļūdot CSS problēmas, ja jūs pats izdarījāt visus labojumus. Bet daudziem dizaineriem šis process ir nogurdinošs un vienkārši aizņems vairāk laika, nekā nepieciešams. Par laimi jQuery Mobile komanda ir izlaidusi tiešsaistes redaktoru ar nosaukumu ThemeRoller.

No šīs lapas varat piekļūt pirmajiem 3 A-C swatches vai pat izveidot savu. Ja skatāties kreisajā sānjoslā, varat pārslēgties starp šiem 3 iestatījumiem vai ātri veikt globālo motīvu opciju izmaiņas. Tie ietver CSS īpašības, piemēram, robežu rādiusus, kastes ēnas vai noklusējuma lapu fontus. Piezīme, izvēloties kādu no iepriekš iestatītajiem paraugiem, kurus mēs varam rediģēt tikai tādās pašās jomās kā iepriekš - augšējie / apakšējie joslas, ķermeņa saturs un 3 pogas stāvokļi.

Bet manai iecienītākajai iezīmei jābūt tiešai piekļuvei Adobe Kuler swatches. Jūs faktiski varat izveidot dažas krāsu shēmas savā Kuler kontā un importēt tās ThemeRoller. Interfeiss atbalsta vilkšanas un nomešanas funkcionalitāti, tāpēc dažu minūšu laikā ir ļoti vienkārši izmēģināt dažas dažādas idejas.

Galu galā nav absolūtas metodes, kā pareizi veidot jQM swatches. Daži dizaineri dod priekšroku cietajam kodam CSS, bet citiem būs patīkama ThemeRoller tīmekļa lietotne. Kamēr jūs sekojat klases struktūrai, jums vajadzētu iegūt tādus pašus rezultātus.

Noderīgi resursi

jQuery Mobile tēmas - dokumentācija
JQuery Mobile motīvu izmantošana un pielāgošana