Proiectarea aplicațiilor mobile / temelor personalizate cu jQuery Mobile

În tutorialul nostru anterior jQuery Mobile am introdus o mare parte a cadrului care stau la baza și cum să faceți instalarea primului site. Biblioteca JS este atât ușoară cât și ușor de preluat în ceea ce privește dificultatea de învățare. Există, de asemenea, o foaie de stil CSS inclusă împreună cu fișierele, astfel încât să puteți personaliza în continuare elementele în aspectul dvs..

Pentru acest al doilea segment, aș vrea să-mi petrec un pic de timp mai profund în această idee de teme jQuery Mobile. Întreaga industrie de design a fost revoluționată de jQM și procesul de construire a unui șablon mobil de la zero a fost îmbunătățit semnificativ. jQuery Mobile nu este doar o bibliotecă de scripting, ci un întreg cadru de bază pentru a construi și produce șabloane mobile eficiente.

Implicit Conținutul foilor de stil

Ar trebui să încep prin a clarifica exact ce tip de cod CSS este inclus în fișierele implicite. Foaia de stil de la jQM 1.0 a fost împărțită în două segmente principale - structura și tematică.

Codul de structură este lucrurile pe care le ignorați cel mai mult. Acest lucru este folosit pentru a seta margini, padding, inaltime / lățime, variante de fonturi, împreună cu multe alte defaults de browser. Temele interne sunt apoi împărțite de la A-E, fiecare controlând diferite efecte vizuale în design-ul dvs. Acestea pot include culori de fond, gradienți, umbre, etc..

Fiecare dintre aceste elemente tematice interioare poate fi menționată, de asemenea, ca specimenelor. Când construiți un șablon mobil, în general, veți avea o singură temă. Dar, în aproape toate scenariile, designul poate fi îmbunătățit cu diferite scheme de culori. Foaia de stiluri implicită include doar mostre A-E, dar puteți crea modele F-Z pentru a adăuga alte 21 de alternative în biblioteca temelor. Doar pentru a clarifica din nou acești termeni a temă este considerat un singur fișier CSS care poate include până la 26 de diferite specimenelor etichetate A-Z.

Schimbarea stilurilor

Dacă nu alegeți să specificați vreo specimene, jQuery Mobile se va lipi de modelul A în mod implicit. Dacă nu v-ați dat deja seama că documentele jQuery Mobile utilizează atribute de date HTML5 pentru multe funcții interne. Unul dintre acestea include schimbarea swatches prin atributul data-temă. Consultați exemplul de cod de mai jos pentru a vedea ce vreau să spun.

  Pagina implicită jQM
 
  Iată câteva conținuturi interne.

Observați că am plasat atributul temă de date pe pagina principală div. Aceasta inseamna ca noua culoarea swatch-ului va afecta tot ceea ce include atat antetul, cat si continutul. Aș putea include în plus date temă = „c“ în antetul div pentru a schimba numai acel conținut din restul paginii mele.

Componentele unui Swatch

Ar trebui să fie destul de simplu cum să implementați aceste mărimi diferite într-un singur aspect. Deci, acum să aruncăm o privire la codul jQM CSS, astfel încât să putem descompune componentele individuale ale unui specimen. Check out cele mai recente fișiere jQuery Mobile 1.4.5 CSS găzduite pe propriul CDN.

Ar trebui să observați modul în care fiecare specimen este separat printr-un comentariu distinct și fiecare dintre clasele interne se termină cu literele corespunzătoare. De exemplu .-bar-ui un și .UI-corp-o se aplică în mod implicit în barele de antet / subsol și în zonele de conținut. Majoritatea proprietăților implementează o resetare a culorilor fontului și a link-urilor, a gradientelor de fundal și a altor detalii mici. Am inclus pur și simplu -bar-ui un coduri pentru a vă oferi o idee despre elementele pe care le vizăm.

/* A ----------------------------------------------- ---------------------------------------------- * / .ui -bar-a graniță: 1px solid # 2A2A2A; fundal: # 111111; culoare: #ffffff; font-weight: bold; text-umbra: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px # 000000; fundal-imagine: -webkit-gradient (liniar, partea stângă sus, partea stângă jos, de la (# 3c3c3c), la (# 111)); / * Saf4 +, Chrome * / fundal-imagine: -webkit-gradient linear (# 3c3c3c, # 111); / * Chrome 10+, Saf5.1 + * / fundal-imagine: -moz-linear-gradient (# 3c3c3c, # 111); / * FF3.6 * / fundal-imagine: -ms-linear-gradient (# 3c3c3c, # 111); / * IE10 * / fundal-imagine: -o-gradient linear (# 3c3c3c, # 111); / * Opera 11.10+ * / fundal-imagine: gradient linear (# 3c3c3c, # 111);  .ui-bar-a, .ui-bar-a selectare, .ui-bar-a textarea, .ui-bar-un buton font-family: serif;  .ui-bar-a .ui-link-a moșteni culoare: #fff;  .ui-bar-a .ui-link culoare: # 7cc4e7 / * a-bar-link-color * /; font-weight: bold;  .ui-bar-a .ui-link: hover culoare: # 2489CE / * a-bar-link-hover * /;  .ui-bar-a .ui-link: activ culoare: # 2489CE / * a-bar-link-activ * /;  .ui-bar-a .ui-link: a vizitat culoare: # 2489CE / * a-bar-link-visited * /;

Dacă doriți doar să creați un specimen personalizat, vă recomandăm să ștergeți șablonul de pe unul dintre originale. Procesul va deveni mult mai neted dacă începeți să scrieți coduri într-un nou document CSS. Nu veți avea probleme de editare în fișierul original și puteți începe să lucrați pe o artă curată. Dar zonele cheie pe care doriți să vă concentrați vor include următoarele:

antet și footer bare
conținutul corpului și textul paginii
stiluri de listă
butonul afișează implicit / hover / activ
forme de control de intrare (extra)

Codificarea unui nou design bar

Din același fișier CSS, ne-am uitat la copierea / inserarea anterioară a tuturor codurilor A (linii 12-150) într-un fișier nou. Putem folosi numele swatch G pentru a implementa aceste stiluri noi. Acum, după copierea codului pe care doriți să îl redenumiți, fiecare instanță de clasă care se termină -A la -g, deoarece acesta este modul în care jQuery Mobile va recunoaște stilurile pe care le va folosi.

Aș dori să încep prin reproiectarea barei de antet bg pentru a imita un gradient mai familiar la iOS. Acest lucru se poate face numai în cadrul .-bar-ui g selector. Vrem să modificăm proprietățile fundalului și imaginii de fundal pentru a modifica efectele gradientului. Verificați codul de mai jos și un ecran demo al noului gradient.

.ui-bar-g graniță: 1px solid # 2d3033 / * a-bar-border * /; frontieră-stânga: 0px; frontieră-dreapta: 0px; fundal: # 6d83a1; culoare: #fff / * a-bar-color * /; font-weight: bold; text-shadow: 0 / * a-bar-umbra-x * / -1px / * a-bar-umbra-y * / 1pixel / * a-bar-umbră-rază * / # 3e4957; background-image: -webkit gradient (liniar, 0% 0% 0% 100%, de la (# b4bfce), culoare-stop (0.5, # 899cb3), culoare-stop (0.505, # 7e94b0), la (# 6d83a1)); fundal-imagine: -webkit-gradient linear (sus, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Chrome 10+, Saf5.1 + * / background-image: -moz-liniar gradient (de sus, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * FF3.6 * / fundal-imagine: -ms-linear-gradient (sus, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * IE10 * / fundal-imagine: -o-linear-gradient (top, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Opera 11.10+ * / fundal-imagine: gradient linear (sus, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1);

Folosesc schema de culori albastră găsită în majoritatea aplicațiilor implicite pentru iOS. Fundalul meu este setat inițial la o culoare solidă pentru dispozitivele care nu pot face gradienți CSS3. Apoi, mai jos, folosesc stopuri de culoare în jurul marcatorului de 50% pentru a recrea efectul tradițional de luciu strălucitor în stil Apple. De asemenea, în interiorul aceluiași selector am modificat puțin umbra textului cu o culoare și o gamă mai subtilă.

Butoane și efecte text

Este important atunci când codați swatches să ia în considerare în mod specific care zone ale interfeței nevoie de atenție. Bara de antet arată excelent cu acest nou fundal, dar o ultima modificare pe care aș dori să o fac se va potrivi cu stilurile de butoane mai apropiate de cea a aplicațiilor iOS.

.ui-btn-up-g graniță: 1px solid # 375073; fundal: # 4a6c9b; font-weight: bold; culoare: #fff; text-shadow: 0 / * a-bup-umbra-x * / -1px / * a-bup-umbra-y * / 1pixel / * a-bup-umbră-rază * / # 40536d; box-shadow: nici unul; -webkit-box-shadow: nici unul; -moz-box-umbra: nici unul; background-image: -webkit gradient (liniar, 0% 0% 0% 100%, de la (# 89a0be), culoare-stop (0.5, # 5877a2), culoare-stop (0.505, # 476999), la (# 4a6c9b)); fundal-imagine: -webkit-gradient linear (top, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Chrome 10+, Saf5.1 + * / fundal-imagine: -moz-linear-gradient (top, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * FF3.6 * / fundal-imagine: -ms-gradient liniar (top, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * IE10 * / fundal-imagine: -o-linear-gradient (top, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Opera 11.10+ * / fundal-imagine: gradient liniar (top, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); raza de graniță: 4 pixeli; -webkit-border-radius: 4px; -moz-border-radius: 4px;  .Ui BTN-up-g .ui-BTN-interior, .ui-BTN-planare-g .ui-BTN-interior, .ui-BTN-down-g BTN-interior-.ui border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;  .ui-btn-hover-g graniță: 1px solid # 1b49a5; fundal: # 2463de; font-weight: bold; culoare: #fff; text-umbra: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius / # 40536d; box-shadow: nici unul; -webkit-box-shadow: nici unul; -moz-box-umbra: nici unul; imagine de fundal: -webkit-gradient (liniare, 0% 0%, 0% 100%, de la # 779be9), stop color (0.5, # 376fe0), stop culoare (0.505, # 2260dd) 2463de)); fundal-imagine: -webkit-gradient linear (top, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Chrome 10+, Saf5.1 + * / fundal-imagine: -moz-linear-gradient (top, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * FF3.6 * / imagine-fundal: -ms-gradient linear (top, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * IE10 * / fundal-imagine: -o-linear-gradient (top, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Opera 11.10+ * / fundal-imagine: gradient liniar (top, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); raza de graniță: 4 pixeli; -webkit-border-radius: 4px; -moz-border-radius: 4px;

Zona de cod pe care o edificăm acum se află în clasele de butoane din UI. Există 3 moduri diferite care trebuie vizate: .BTN-up-ui-g, .BTN-ui-planare-g, și .BTN-ui-down-g. Mă concentrez în principal pe efectele standard (btn-up) și hover (btn-hover), prin editarea umbrei cutiei și a gradienților liniare. De asemenea, am extins efectul colțurilor rotunjite, astfel încât butoanele să pară mai dreptunghiulare.

Din această cauză am nevoie să scot raza interioară de la o clasă numită .-BTN-interior ui. Această clasă se atașează pe un element de control în cadrul fiecărei legături de ancorare din bara de antet. Fără resetarea proprietăților razei de graniță, veți observa glitches mici în design ori de câte ori treceți deasupra unui buton. Pe măsură ce petreceți mai mult timp în codurile jQuery Mobile, veți memora aceste mici nuanțe pentru proiectele viitoare.

Introducere în temaRoller

Dacă vă place să obțineți mâinile murdare în cod, atunci vă recomandăm foarte mult să vă lipiți de editările personalizate. Nu numai că aveți mai mult control, dar este mult mai ușor să depanați problemele din cadrul CSS dacă ați efectuat singur toate editările. Dar pentru mulți designeri acest proces este obositor și va dura mai mult decât este necesar. Din fericire, echipa jQuery Mobile a lansat un editor online sub numele ThemeRoller.

Din această pagină aveți acces pentru a edita primele 3 mostre A-C sau chiar a crea unul din propriile dvs. Dacă priviți în bara laterală din stânga, puteți comuta între aceste 3 setări sau puteți modifica rapid opțiunile tematice globale. Acestea includ proprietăți CSS, cum ar fi raza granițelor, umbrele cutiei sau fonturile de pagini prestabilite. Rețineți că selectați oricare din mostrele presetate pe care le putem edita numai aceleași zone ca înainte - barele de sus / jos, conținutul corpului și cele 3 stări ale butoanelor.

Dar funcția mea preferată trebuie să fie accesul direct la mostrele Adobe Kuler. De fapt, puteți crea câteva scheme de culori în contul dvs. Kuler și le puteți importa în ThemeRoller. Interfața suportă funcționalitatea drag-and-drop, astfel încât este foarte simplu să încercați câteva idei diferite în câteva minute.

În cele din urmă nu există o metodă absolută de construire corectă a jachetelor dvs. JQM. Unii designeri preferă codul hard CSS, în timp ce alții vor iubi aplicația web intuitivă ThemeRoller. Atâta timp cât urmăriți structura de clasă, atunci ar trebui să obțineți aceleași rezultate în orice fel.

Resurse utile

Teme mobile jQuery - Documentație
Utilizarea și personalizarea temelor jQuery Mobile