Dizajn mobilnih aplikacija / Dev prilagođene teme s jQuery Mobile

U našem ranijem jQuery Mobile tutorial sam uveo mnogo temeljnog okvira i kako postaviti postavljanje prve web stranice. JS knjižnica je lagana i jednostavna za uzimanje u obzir poteškoća u učenju. Tu je i generički CSS stylesheet uključen u datoteke, tako da možete dodatno prilagoditi elemente u svom izgledu.

Za ovaj drugi segment želio bih provesti malo vremena u dubljem razumijevanju ove ideje jQuery Mobile teme. Cjelokupna industrija dizajna revolucionirana je pomoću jQM-a, a proces izrade mobilnog predloška od nule značajno je poboljšan. jQuery Mobile nije samo biblioteka skripti, već čitav temeljni okvir za nadogradnju i proizvodnju učinkovitih mobilnih predložaka.

Zadani sadržaj stilova

Trebao bih početi razjašnjavanjem koji tip CSS koda je uključen u zadane datoteke. Stilska tablica iz jQM 1.0 podijeljena je u dva glavna segmenta - struktura i teme.

Strukturni kod je ono što se uglavnom može ignorirati. To se koristi za postavljanje margina, padding, height / width, font varijanti, zajedno s mnogim drugim zadanim postavkama preglednika. Zatim se unutarnje teme razdvajaju od A-E, a svaka od njih kontrolira različite vizualne efekte u vašem dizajnu. To može uključivati boje pozadine, gradijente, sjene za pad itd.

Svaki od tih unutarnjih elemenata teme također se može nazvati kao swatches. Kada izradite predložak za mobitele, općenito ćete se pridržavati jedne teme. No, u gotovo svakom scenariju dizajn može biti poboljšan s različitim shemama boja. Zadani stilovi uključuju samo uzorke A-E, ali swatcheve F-Z možete izraditi da biste u biblioteku tema dodali još 21 alternativu. Samo da ponovno pojasnimo ove pojmove a tema smatra se jednom CSS datotekom koja može sadržavati do 26 različitih swatches s oznakom A-Z.

Prebacivanje stilova

Ako ne odlučite navesti swatcheve, jQuery Mobile će se po defaultu držati uzorka A. Ako već niste bili svjesni da jQuery Mobile dokumenti koriste HTML5 atribute podataka za mnoge unutarnje funkcije. Jedan od njih uključuje mijenjanje swatcheva preko atributa teme-podataka. Pogledajte moj primjer kôda u nastavku da biste vidjeli što mislim.

  Zadana jQM stranica
 
  Evo nekih internih sadržaja.

Primijetite da sam stavio atribut teme-podataka na podjelu korijenske stranice. To znači da će nova boja swatcha utjecati na sve što uključuje unutar zaglavlja i područja sadržaja. Mogao bih dodatno uključiti podaci-tema = "c" u zaglavlje div za promjenu samo tog sadržaja iz ostatka moje stranice.

Komponente uzorka

Trebalo bi biti prilično jednostavno kako implementirati ove različite uzorke unutar jednog izgleda. Sada ćemo pogledati jQM CSS kod tako da možemo razbiti pojedine komponente swatcha. Pogledajte najnovije jQuery Mobile 1.4.5 CSS datoteku koja se nalazi na vlastitom CDN-u.

Trebate primijetiti kako je svaki uzorak odvojen odvojenim komentarom, a svaka interna klasa završava odgovarajućim natpisom. Na primjer .UI-bar-a i .UI tijela-a po zadanom se primjenjuju na trake zaglavlja / podnožja i područja sadržaja. Većina svojstava provodi ponovno postavljanje boja fontova i veza, gradijenta pozadine i ostalih sitnih detalja. Uključio sam jednostavno UI-bar-a da biste dobili ideju o tome koje elemente ciljamo.

/ * A ----------------------------------------------- ---------------------------------------------- * / .ui -bar-a border: 1px solid # 2A2A2A; pozadina: # 111111; boja: #ffffff; font-weight: bold; tekst-sjena: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px # 000000; background-image: -webkit-gradijent (linearno, lijevo gore, lijevo dolje, od (# 3c3c3c), do (# 111)); / * Saf4 +, Chrome * / pozadina-slika: -webkit-linear-gradient (# 3c3c3c, # 111); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linearni gradijent (# 3c3c3c, # 111); / * FF3.6 * / background-image: -ms-linearni gradijent (# 3c3c3c, # 111); / * IE10 * / background-image: -o-linearni gradijent (# 3c3c3c, # 111); / * Opera 11.10+ * / background-image: linearni gradijent (# 3c3c3c, # 111);  .ui-bar-a, .ui-bar-ulaz, .ui-bar-odabir, .ui-bar-tekstualno područje, .ui-bar-gumb font-family: Helvetica, Arial, sans- crtica;  .ui-bar-a .ui-link-inherit color: #fff;  .ui-bar-a .ui-link boja: # 7cc4e7 / * a-bar-link-color * /; font-weight: bold;  .ui-bar-a .ui-link: hover color: # 2489CE / * a-bar-link-hover * /;  .ui-bar-a .ui-link: aktivna color: # 2489CE / * a-bar-link-active * /;  .ui-bar-a .ui-link: posjetio color: # 2489CE / * a-bar-link-visited * /;

Ako samo želite stvoriti prilagođeni uzorak, preporučujem da predložak temeljite na jednom izvorniku. Proces će ići puno lakše ako počnete pisati kodove u novom CSS dokumentu. Nećete imati problema s uređivanjem u izvornoj datoteci i možete početi raditi na čistoj ploči. Ali ključna područja na koja se želite usredotočiti uključuju sljedeće:

zaglavlja i podnožja
sadržaj tijela i tekst stranice
stilovi popisa
status gumba default / hover / active
kontrola unosa oblika (extra)

Kodiranje novog dizajna trake

Iz iste CSS datoteke smo pogledali ranije copy / paste sve swatch A koda (linije 12-150) u novu datoteku. Možemo koristiti ime uzorka G za implementaciju ovih novih stilova. Sada nakon kopiranja koda želite preimenovati svaku instancu klase koja završava - do -g, jer će tako jQuery Mobile prepoznati koje stilove koristiti.

Htio bih početi redizajniranjem zaglavlja bg da oponašam poznatiji iOS gradijent. To se može učiniti samo unutar .UI-bar-g selektor. Želimo urediti svojstva pozadine i pozadinske slike kako bismo promijenili efekte gradijenta. Pogledajte moj kod ispod i demo zaslon novog gradijenta.

.ui-bar-g granica: 1px solid # 2d3033 / * a-bar-border * /; granica lijevo: 0px; granica desno: 0px; pozadina: # 6d83a1; boja: #fff / * a-bar-boja * /; font-weight: bold; text-shadow: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px / * a-bar-shadow-radius * / # 3e4957; background-image: -webkit-gradient (linearno, 0% 0%, 0% 100%, od (# b4bfce), zaustavljanje boje (0.5, # 899cb3), zaustavljanje boje (0.505, # 7e94b0) do (# 6d83a1)); background-image: -webkit-linear-gradient (vrh, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linearni gradijent (gore, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * FF3.6 * / background-image: -ms-linearni gradijent (gore, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * IE10 * / pozadina-slika: -o-linearnog gradijenta (gore, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Opera 11.10+ * / background-image: linearni gradijent (gore, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1);

Koristim plavu shemu boja koja se nalazi u većini zadanih iOS aplikacija. Moja pozadina je u početku postavljena na jednobojnu boju za uređaje koji ne mogu prikazati CSS3 gradijente. Zatim ispod koristim oboje oko 50% markera kako bih stvorio tradicionalni sjajni efekt sjaja Apple-stila. Isto tako unutar istog selektora pomalo sam izmijenio tekstualnu sjenu suptilnijom bojom i dometom.

Gumbi i efekti teksta

Važno je kada kodiranje swatcheva posebno razmatra koja područja sučelja trebaju pažnju. Traka zaglavlja izgleda sjajno s ovom novom pozadinom, ali jedna posljednja izmjena koju bih želio izvršiti odgovarat će stilovima gumba bliže onima u iOS aplikacijama.

.ui-btn-up-g border: 1px solid # 375073; pozadina: # 4a6c9b; font-weight: bold; boja: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; box-shadow: ništa; -webkit-box-shadow: ništa; -moz-box-shadow: nema; background-image: -webkit-gradijent (linearni, 0% 0%, 0% 100%, od (# 89a0be), zaustavljanje boje (0.5, # 5877a2), zaustavljanje boje (0.505, # 476999), do (# 4a6c9b)); background-image: -webkit-linearni gradijent (vrh, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linearni gradijent (gore, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * FF3.6 * / background-image: -ms-linearni gradijent (vrh, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * IE10 * / pozadina-slika: -o-linearnog gradijenta (gore, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Opera 11.10+ * / background-image: linearni gradijent (gore, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); granični radijus: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;  .ui-btn-up-g .ui-btn-unutrašnji, .ui-btn-hover-g .ui-btn-unutarnji, .ui-btn-down-g .ui-btn-unutarnji border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;  .ui-btn-hover-g border: 1px solid # 1b49a5; pozadina: # 2463de; font-weight: bold; boja: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; box-shadow: ništa; -webkit-box-shadow: ništa; -moz-box-shadow: nema; background-image: -webkit-gradient (linearno, 0% 0%, 0% 100%, od (# 779be9), zaustavljanje boje (0.5, # 376fe0), zaustavljanje boje (0.505, # 2260dd), do (# 2463de)); background-image: -webkit-linearni gradijent (vrh, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linearni gradijent (vrh, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * FF3.6 * / background-image: -ms-linearni gradijent (gore, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * IE10 * / pozadina-slika: -o-linearnog gradijenta (gore, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Opera 11.10+ * / background-image: linearni gradijent (gore, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); granični radijus: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;

Područje koda koje uređujemo sada nalazi se unutar klasa gumba korisničkog sučelja. Postoje 3 različita načina rada: .UI-gmb gore-g, .UI-gmb-hover-g, i .UI-gmb-down-g. Većinom se fokusiram na standardne (btn-up) i hover (btn-hover) učinke uređivanjem okvira sjena i linearnim gradijentima. Također sam proširio zaobljene kutove tako da se gumbi pojavljuju više pravokutno.

Zbog toga sam morao ukloniti radijus unutarnje granice iz klase pod nazivom .UI-gmb-unutrašnji. Ova se klasa priključuje na element raspona unutar svake sidrene veze u zaglavlju. Bez resetiranja svojstava granica radijusa primijetit ćete male propuste u dizajnu kad god prelazite preko gumba. Kako provodite više vremena kodiranja u jQuery Mobile temama, zapamtite ove male nijanse za buduće projekte.

Uvod u ThemeRoller

Ako uživate uzimajući vaše ruke prljave u kodu onda sam visoko preporučiti držeći se prilagođenih izmjena. Ne samo da imate veću kontrolu, nego je mnogo lakše otkloniti greške u CSS-u ako ste sve sami uredili. No, za mnoge dizajnere ovaj proces je zamoran i jednostavno će trajati dulje nego što je potrebno. Srećom, tim jQuery Mobile izdao je online urednik pod nazivom ThemeRoller.

Na ovoj stranici imate pristup za uređivanje prvih 3 A-C swatcheva ili čak za stvaranje vlastitog. Ako pogledate u lijevu bočnu traku, možete se prebacivati između tih triju postavki ili brzo mijenjati opcije globalne teme. To uključuje svojstva CSS-a, kao što su radijusi obruba, sjene okvira ili fontovi zadane stranice. Primijetite kako odabirete bilo koji od unaprijed postavljenih uzoraka koje možemo urediti samo na istim područjima kao i prije - gornje / donje trake, sadržaj tijela i stanja 3 gumba.

Ali moja omiljena značajka mora biti izravan pristup swatchevima Adobe Kulera. Možete zapravo stvoriti nekoliko shema boja unutar vašeg Kuler računa i uvesti ih u ThemeRoller. Sučelje podržava drag-and-drop funkcionalnost pa je jednostavno isprobati nekoliko različitih ideja u nekoliko minuta.

U konačnici, ne postoji apsolutna metoda ispravnog oblikovanja jQM swatcheva. Neki dizajneri više vole hard code CSS, dok će drugi voljeti intuitivnu ThemeRoller web aplikaciju. Dokle god pratite strukturu razreda, trebali biste dobiti iste rezultate u svakom slučaju.

Korisni resursi

jQuery Mobile Themes - dokumentacija
Korištenje i prilagođavanje jQuery Mobile tema