Mobilalkalmazás-tervezés / Dev egyéni témák a jQuery Mobile használatával

Korábbi jQuery Mobile bemutatónkban az alapul szolgáló keretrendszer nagy részét bemutattam, és hogyan kezdtem el létrehozni az első weboldalt. A JS könyvtár könnyű és könnyen felvehető a tanulási nehézségek tekintetében. A fájlokhoz egy általános CSS-stíluslap is tartozik, így az elrendezés elemeit további testre szabhatja.

Ehhez a második szegmenshez szeretnék egy kis időt tölteni mélyebben a jQuery Mobile témákban. A teljes tervezőipart forradalmasította a jQM, és a mobil sablont a semmiből építésének folyamata jelentősen javult. A jQuery Mobile nem csak egy szkriptkönyvtár, hanem egy teljes alaprendszer, amely hatékony mobil sablonokat épít.

Alapértelmezett stíluslap tartalma

Először azt kell tisztáznom, hogy pontosan milyen típusú CSS kódot tartalmaz az alapértelmezett fájlokhoz. A jQM 1.0 stíluslapja két fő szegmensre oszlik - szerkezet és témák.

A szerkezet kódja az, amit leginkább figyelmen kívül hagyhat. Ez a margók, a párnázás, a magasság / szélesség, a betűtípus-változatok beállításához és sok más böngésző alapértelmezett beállításához használható. A belső témák az A-E-ből szétválaszthatók, amelyek mindegyike szabályozza a különböző vizuális effektusokat. Ez magában foglalhatja a háttérszíneket, a színátmeneteket, az árnyékokat stb.

Mindezen belső témakörökre is hivatkozhatunk színminták. Amikor egy mobil sablont építesz, általában egyetlen témát fogsz használni. De szinte minden forgatókönyvben a különböző színsémákkal javítható a tervezés. Az alapértelmezett stíluslap csak az A-E színmintákat tartalmazza, de az F-Z színmintákat további 21 alternatíva hozzáadásával is létrehozhat. Csak hogy tisztázzuk ezeket a feltételeket újra a téma egy CSS fájlnak tekinthető, amely legfeljebb 26 különböző lehet színminták A-Z jelzéssel.

Stílusok váltása

Ha nem választja a színmintákat, akkor a jQuery Mobile alapértelmezés szerint az A színmintát fogja használni. Ha még nem tudta, hogy a jQuery Mobile dokumentumok sok belső funkcióhoz használnak HTML5 adatattribútumokat. Ezek egyike magában foglalja a színminták módosítását az adat-téma attribútum segítségével. Nézze meg az alábbi kódmódomat, hogy lássam, mit értem.

  Alapértelmezett jQM oldal
 
  Íme néhány belső tartalom.

Vegye figyelembe, hogy az adat-téma attribútumot a div. Ez azt jelenti, hogy az új színminta színe mindent megtesz, ami magában foglalja mind a fejléc, mind a tartalmi területeket. Ezenkívül magam is tartalmazhatnám data-theme = "c" a fejléc div-ba csak az oldal többi részének tartalmát módosíthatja.

A színminták összetevői

Elég egyszerűnek kell lennie, hogy ezeket a különböző színmintákat egyetlen elrendezésben hajtsák végre. Most nézzük meg a jQM CSS kódot, hogy lebonthassuk az egyes színminták egyes összetevőit. Nézze meg a legújabb CD-n található legfrissebb jQuery Mobile 1.4.5 CSS fájlt.

Figyelje meg, hogy az egyes színmintákat külön megjegyzés választja el, és a belső osztályok mindegyike a megfelelő betűkkel zárul. Például .ui-bár-a és .ui-test-a alapértelmezés szerint a fejléc / lábléc sávokban és a tartalmi területeken kerül alkalmazásra. A legtöbb tulajdonság a betűkészlet és a link színek, a háttér színátmenetek és egyéb apró részletek visszaállítását hajtja végre. Egyszerűen a ui-bár-a kódok, hogy megismerjék, hogy mely elemeket célozzuk.

/ * A ----------------------------------------------- ---------------------------------------------- * / .ui -bar-a border: 1px szilárd # 2A2A2A; háttér: # 111111; szín: #ffffff; font-súly: félkövér; text-shadow: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px # 000000; háttérkép: -webkit-gradiens (lineáris, bal felső, bal alsó, (# 3c3c3c), (# 111)); / * Saf4 +, Chrome * / háttérkép: -webkit-lineáris gradiens (# 3c3c3c, # 111); / * Chrome 10+, Saf5.1 + * / háttérkép: -moz-lineáris gradiens (# 3c3c3c, # 111); / * FF3.6 * / háttérkép: -ms-lineáris gradiens (# 3c3c3c, # 111); / * IE10 * / háttérkép: -o-lineáris gradiens (# 3c3c3c, # 111); / * Opera 11.10+ * / háttérkép: lineáris gradiens (# 3c3c3c, # 111);  .ui-bar-a, .ui-bar-a bemenet, .ui-bar-a kiválasztás, .ui-bar-a textarea, .ui-bar-a gomb font-család: Helvetica, Arial, sans- serif;  .ui-bar-a .ui-link-perem color: #fff;  .ui-bar-a .ui-link color: # 7cc4e7 / * a-bar-link-szín * /; font-súly: félkövér;  .ui-bar-a .ui-link: hover szín: # 2489CE / * a-bar-link-hover * /;  .ui-bar-a .ui-link: aktív szín: # 2489CE / * a-bar-link-aktív * /;  .ui-bar-a .ui-link: látogatott color: # 2489CE / * a-bar-link-látogatott * /;

Ha egyéni színmintát szeretne létrehozni, azt javaslom, hogy a sablont az eredeti példányok egyikén alapozzuk. A folyamat egészen simább lesz, ha egy új CSS dokumentumban kódokat ír be. Az eredeti fájlban nem lesz szükséged a szerkesztés problémájára, és elkezdhetsz dolgozni egy tiszta lemezen. De a legfontosabb területek, amelyekre fókuszálni szeretnének, a következők:

fejléc és láblécsávok
testtartalom és oldalszöveg
lista stílusok
gomb az alapértelmezett / lebegő / aktív
beviteli vezérlők (extra)

Új sávtervezés kódolása

Ugyanezen CSS fájlból egy korábbi fájlba másolt / beillesztettük az A kódot (12-150 sorok). Az új stílusok végrehajtásához használhatjuk a G színmintát. Most, miután a kódot átmásoltuk, minden egyes osztálypéldányt átnevezni szeretnénk -egy nak nek -g, mivel a jQuery Mobile felismeri, hogy milyen stílusokat használjon.

Először a bg fejlécsáv újratervezésével kezdem utánozni egy ismerősebb iOS színátmenetet. Ezt kizárólag a .ui-bar-g választó. Szeretnénk szerkeszteni a háttér és a háttérkép tulajdonságait a gradiens hatások megváltoztatásához. Nézze meg az alábbi kódomat és az új színátmenet demóját.

.ui-bar-g border: 1px szilárd # 2d3033 / * a-bar-border * /; balra: 0px; jobbra: 0px; háttér: # 6d83a1; szín: #fff / * a-bar-color * /; font-súly: félkövér; text-shadow: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px / * a-bar-shadow-sugár * / # 3e4957; háttérkép: -webkit-gradiens (lineáris, 0% 0%, 0% 100%, a (# b4bfce), szín-stop (0,5, # 899cb3), szín-stop (0,505, # 7e94b0), (# 6d83a1)); háttérkép: -webkit-lineáris gradiens (felső, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Chrome 10+, Saf5.1 + * / háttérkép: -moz-lineáris gradiens (felső, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * FF3.6 * / háttérkép: -ms-lineáris gradiens (felső, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * IE10 * / háttérkép: -o-lineáris gradiens (felső, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Opera 11.10+ * / háttérkép: lineáris gradiens (felső, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1);

A legtöbb alapértelmezett iOS alkalmazásban található kék színsémát használom. A hátterem kezdetben szilárd színre van állítva olyan eszközök számára, amelyek nem képesek a CSS3 színátmeneteket megjeleníteni. Ezután az 50% -os jelölő körül a színt leállítom, hogy újjáépítsem a hagyományos Apple-stílusú fényes fényt. Ugyanezen a választón belül is kissé módosítottam a szöveg árnyékát finomabb színekkel és tartományokkal.

Gombok és szöveghatások

Fontos, hogy a színminták kódolásakor különös figyelmet fordítson arra, hogy az interfész mely területeire kell figyelni. A fejlécsáv jól néz ki az új háttérrel, de egy utolsó módosítás, amit szeretnék, megfelel az iOS-alkalmazásokhoz legközelebbi gombstílusoknak.

.ui-btn-up-g border: 1px szilárd # 375073; háttér: # 4a6c9b; font-súly: félkövér; szín: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-sugár * / # 40536d; box-shadow: nincs; -webkit-box-shadow: nincs; -moz-box-shadow: nincs; háttérkép: -webkit-gradiens (lineáris, 0% 0%, 0% 100%, a (# 89a0be), szín-stop (0,5, # 5877a2), szín-stop (0.505, # 476999), a (# 4a6c9b)); háttérkép: -webkit-lineáris gradiens (felső, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Chrome 10+, Saf5.1 + * / háttérkép: -moz-lineáris gradiens (felső, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * FF3.6 * / háttérkép: -ms-lineáris gradiens (felső, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * IE10 * / háttérkép: -o-lineáris gradiens (felső, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Opera 11.10+ * / háttérkép: lineáris gradiens (felső, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); határ-sugár: 4px; -webkit-border-radius: 4px; -moz-határ-sugár: 4px;  .ui-btn-up-g .ui-btn-belső, .ui-btn-hover-g .ui-btn-belső, .ui-btn-down-g .ui-btn-belső határ-sugár: 0; -webkit-border-radius: 0; -moz-border-sugár: 0;  .ui-btn-hover-g border: 1px szilárd # 1b49a5; háttér: # 2463de; font-súly: félkövér; szín: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-sugár * / # 40536d; box-shadow: nincs; -webkit-box-shadow: nincs; -moz-box-shadow: nincs; háttérkép: -webkit-gradiens (lineáris, 0% 0%, 0% 100%, (# 779be9), szín-stop (0,5, # 376fe0), szín-stop (0.505, # 2260dd), a (# 2463de)); háttérkép: -webkit-lineáris gradiens (felső, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Chrome 10+, Saf5.1 + * / háttérkép: -moz-lineáris gradiens (felső, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * FF3.6 * / háttérkép: -ms-lineáris gradiens (felső, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * IE10 * / háttérkép: -o-lineáris gradiens (felső, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Opera 11.10+ * / háttérkép: lineáris gradiens (felső, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); határ-sugár: 4px; -webkit-border-radius: 4px; -moz-határ-sugár: 4px;

A szerkesztett kódterület az UI gombosztályokon belül van. Három különböző mód létezik: .ui-BTN-up-g, .ui-BTN-hover-g, és .ui-BTN-le-g. Leginkább a standard (btn-up) és a hover (btn-hover) hatásokra összpontosítok a doboz árnyékának és lineáris színátmeneteinek szerkesztésével. Szintén bővítettem a lekerekített sarkok hatását, így a gombok téglalap alakúak.

Emiatt szükségem volt ahhoz, hogy eltávolítsam a belső határ sugarát egy osztályból .ui-BTN-belső. Ez az osztály a fejlécsávon belüli minden horgony hivatkozáson belül egy span elemhez csatlakozik. A szegélysugár tulajdonságainak visszaállítása nélkül a gombok felett lebegő kis hibákat észlel. Ahogy több időt kódol a jQuery Mobile témákban, ezeket a kis árnyalatokat a jövőbeni projektekre emlékezheti meg.

A ThemeRoller bemutatása

Ha élvezed a kezed piszkos kódját, akkor nagyon ajánlom az egyéni szerkesztésekhez való ragaszkodást. Nemcsak több ellenőrzése van, de sokkal egyszerűbb a hibakeresés a CSS-en belül, ha az összes szerkesztést maga végezte el. De sok tervező számára ez a folyamat fárasztó és egyszerűen csak hosszabb időt vesz igénybe. Szerencsére a jQuery Mobile csapat kiadott egy online szerkesztőt ThemeRoller néven.

Ebből az oldalról hozzáférhet az első 3 A-C színmintához való szerkesztéshez, vagy akár saját létrehozásához is. Ha megnézed a bal oldali sávban, akkor válthatsz a három beállítás között, vagy gyorsan módosíthatod a globális témaköröket. Ezek közé tartoznak a CSS tulajdonságok, mint például a határ sugarak, a doboz árnyékai vagy az alapértelmezett oldal betűtípusok. Figyelmeztetés az előre beállított színminták bármelyikének kiválasztásakor, amelyeket csak ugyanazokkal a területekkel tudunk szerkeszteni, mint korábban - felső / alsó sávok, testtartalom és a 3 gombállapot.

A kedvenc funkciómnak azonban az Adobe Kuler színmintákhoz való közvetlen hozzáférésnek kell lennie. Valóban létrehozhat néhány színsémát a Kuler-fiókjában, és importálhatja azokat a ThemeRollerbe. Az interfész támogatja a drag-and-drop funkciót, így néhány perc alatt igazán egyszerű néhány különböző ötlet kipróbálása.

Végső soron nincs abszolút módszer a jQM színminták megfelelő építésére. Néhány tervező inkább a CSS kódot részesíti előnyben, míg mások szeretik az intuitív ThemeRoller webes alkalmazást. Mindaddig, amíg az osztályszerkezetet követed, ugyanazt az eredményt kell kapnod.

Hasznos források

jQuery Mobile témák - Dokumentáció
A jQuery Mobile témák használata és testreszabása