Tartalom
- 01. Bárok (.ui-bar-?)
- 02. Tartalom blokkok (.ui-body-?)
- 03. Gombok és listanézetek (.ui-btn-?)
- 04. Színminták keverése és illesztése
- 05. Helyszíni aktív állapot
- 06. Alapértelmezett ikonok
- 07. Egyéni téma létrehozása és használata
- 08. Mi a ThemeRoller?
- 09. A ThemeRoller használata
- 10. Előnézet
- 11. Színek
- 12. Ellenőr
- 13. Eszközök
- 14. Téma létrehozása a Notekeeper számára
- 15. Téma exportálása
- Szükséges tudás: HTML, néhány CSS és JavaScript
- Igényel: Nem más, mint a kedvenc HTML-szerkesztő és egy böngésző
- Projekt idő: Két óra
- Támogatási fájl
Ez egy szerkesztett részlet a jQuery Mobile Web Development Essentials 11. fejezetéből, amelyet a Packt Publishing adott ki.
A jQuery Mobile témája egyszerű és egyszerűen használható a fejlesztő számára, de meglehetősen kidolgozott a kulisszák mögött. Szerencsére ritkán lesz olyan alkalom, amikor tudnia kell mindent, ami érted történik. Érdemes azonban egy kis időnk megértenünk a működését.
A dobozból a jQuery Mobile egy olyan témakészletet tartalmaz, amely öt színmintából áll, mindegyikhez egy A-E levél tartozik. A téma egy sor alap CSS osztályt tartalmaz, amelyek tetszés szerint alkalmazhatók szinte minden elemre, és globális beállításokat tartalmaznak a szélesség, a magasság, a határ sugara, az árnyékok számára. Az egyes színminták konkrét információkat tartalmaznak a színről, a betűtípusokról és így tovább.
Az F-Z öt eredeti mintájához további színminták adhatók, vagy az eredeti színminták tetszés szerint kicserélhetők vagy felülírhatók. Ez a rendszer összesen 26 különböző színmintát tesz lehetővé, lehetővé téve a téma színek, stílusok és minták millió lehetséges kombinációját. JQuery Mobile témát alkalmaz a kiválasztott elemre úgy, hogy hozzáad egy adat-téma attribútumot a kívánt téma betűjével:
A fejlesztők általában az adat-téma attribútum módszer használatát választják a stílusok alkalmazásakor, de a CSS osztálynevek közvetlenül az oldalelemekhez is csatolhatók a részletesebb vezérlés érdekében. Van néhány elsődleges előtag, amely lehetővé teszi ezt a rugalmasságot.
01. Bárok (.ui-bar-?)
A sáv előtagot általában fejlécekre, láblécekre és más kiemelten fontos területekre alkalmazzák:
02. Tartalom blokkok (.ui-body-?)
A tartalmi blokkokat általában azokra a területekre alkalmazzák, ahol a bekezdések szövege várhatóan megjelenik. Színe segíti a maximális olvashatóságot a hozzá helyezett szövegszínnel:
03. Gombok és listanézetek (.ui-btn-?)
A gombok és a listanézetek a jQuery Mobile könyvtár két legfontosabb eleme, és biztos lehet benne, hogy a csapat időt szakított rá, hogy rendbe hozza őket. A .ui-btn előtag a felfelé, lefelé, lebegésre és aktív állapotra vonatkozó stílusokat is tartalmaz:
04. Színminták keverése és illesztése
A jQuery Mobile tematizálásának egyik szép vonása, hogy a gyermekelemek a szüleiktől örökölnek, hacsak másképp nincs meghatározva. Ez azt jelenti, hogy ha egy gombot a saját data-theme attribútum nélkül helyez el egy fejlécbe vagy láblécbe, akkor ez a gomb ugyanazt a témát fogja használni, mint a szülője. Gonosz?
Az is tökéletesen elfogadható, sőt bátorított, hogy egy elemet egy mintával, a gyermekét pedig egy másik mintával helyezzük el. Ez segíthet abban, hogy az elem jobban feltűnjön, illeszkedjen az alkalmazás egy másik részéhez, vagy bármilyen okból, amelyet a fejlesztő választ. Lehetséges, ráadásul könnyű. Egyszerűen helyezzen el egy gombot (vagy más elemet) a fejléc sávjában, és rendelje hozzá a saját adat-téma attribútumát:
05. Helyszíni aktív állapot
A jQuery Mobile globális aktív állapotot is alkalmaz minden elemre. Ezt az aktív állapotot használják a gombokhoz, az űrlapelemekhez, a navigációhoz, és bárhol, ahol azt kell jelezni, hogy valami éppen van kiválasztva. A színérték megváltoztatásának egyetlen módja az, ha CSS-en keresztül beállítja (vagy felülírja).Az aktív állapot CSS osztálya megfelelő megnevezéssel .ui-btn-active:
06. Alapértelmezett ikonok
A jQuery Mobile készletben 18 ikon található, amelyek a fejlesztők igényeinek széles skáláját fedik le. Az ikonkészlet átlátszó fehér, amelyet a jQuery Mobile átfed egy félig átlátszó fekete körre, hogy kontrasztot nyújtson az összes színmintával szemben. Ikon hozzáadásához adja meg a data-icon attribútumot a kívánt ikon nevével:
A jQuery Mobile azt is lehetővé teszi, hogy ikonokat helyezzen el egy gomb felső, jobb, alsó vagy bal oldalán a data-iconpos = "[felső, jobb, alsó, bal, bal]" attribútum használatával, a bal pedig az alapértelmezett elhelyezés. A fejlesztők az ikonokat önmagukban, szöveg nélkül is meg tudják jeleníteni a data-iconpos = "notext" megadásával:
Egyéni ikonok telepítése is lehetséges, és a fejezet későbbi szakaszában erről lesz szó.
07. Egyéni téma létrehozása és használata
Már megbeszéltük, hogy a jQuery Mobile milyen erős témákat tartalmaz. Triviálissá teszi az egyszerű és elegáns stílusú, gazdag mobil weboldal fejlesztését. Még erőteljesebb az a képesség, hogy létrehozhat saját színmintakönyvtárat, amelyek felhasználásával valóban egyedivé teheti alkalmazását vagy webhelyét. Saját téma kidolgozása a következő két módon érhető el:
- Töltse le és nyissa meg a meglévő jQuery Mobile CSS fájlt, és szerkessze a szíve tartalma szerint.
- Irányítsa webböngészőjét a ThemeRoller for jQuery Mobile alkalmazásra.
Kizárólag a második lehetőségre fogunk összpontosítani, mert legyünk őszinték, miért kell átgázolni az összes CSS-t, amikor 10 perc alatt meg tud mutatni, kattintani és áthúzni egy új, színmintákkal teli témára? Megtudhatjuk, miről szól a ThemeRoller.
08. Mi a ThemeRoller?
A ThemeRoller for jQuery Mobile egy webalapú alkalmazás kiterjesztése, amelyet a jQuery UI projekthez írtak. Lehetővé teszi a felhasználók számára, hogy percek alatt gyorsan összeállítsák a színmintákkal teli témát a drag and drop színkezelés segítségével. Interaktív előnézettel rendelkezik, így azonnal láthatja, hogy a változtatások hogyan befolyásolják a témát. Ezenkívül beépített ellenőrző eszközzel is rendelkezik, amely segít beásni a részleteket (ha szeretné őket). Integrálódik az Adobe® Kuler® színkezelő eszközzel is. Miután elkészült, letöltheti a témáját, megoszthatja másokkal egy egyéni URL-en keresztül, és újból importálhatja a múltbeli témákat az utolsó pillanatban történő módosításhoz. Ez egy hatékony eszköz, és tökéletesen kiegészíti a jQuery Mobile alkalmazást.
Az öt alapértelmezett színminta egyik jellemzője, hogy a jQuery Mobile csapata elég sok időt töltött az olvashatóságon és a használhatóságon. A színminták a legmagasabb kontraszttól (A) a legkisebb kontrasztig (E) terjednek. Egyetlen témán belül a leginkább kontrasztos területek azok a területek, amelyek az oldalon a legkiemelkedőbbek. Ez magában foglalja a fejlécet (és a listanézet fejléceket) és a gombokat. Saját téma létrehozásakor érdemes ezt szem előtt tartani. Mindig az alkalmazásunk használhatóságára szeretnénk koncentrálni, igaz? Mire jó a sima alkalmazás, ha a rossz színválasztás miatt senki sem tudja elolvasni?
09. A ThemeRoller használata
Az első dolog, amit a ThemeRoller betöltésekor látni fog, egy csúnya megjelenésű splash képernyő, amelyet egy hasznos Kezdő lépések képernyő követ:
Az Első lépések képernyőn hasznos tippek találhatók, ezért mindenképpen pillantson rá, mielőtt a Get Rolling gombra kattintana:
Miután az összes splash képernyőn kívül esik az elsődleges kezelőfelület:
A ThemeRoller négy fő területre oszlik: Előnézet, Színes, Ellenőr és Eszközök. Ezek mindegyike fontos funkciókat tartalmaz, amelyeket felül kell vizsgálnunk. Kezdjük az Előnézet részben.
10. Előnézet
Hacsak nem tölt be egy meglévő témát, az előnézeti terület három teljes, azonos és interaktív jQuery Mobile oldalt jelenít meg, amelyek mindenféle widgetet tartalmaznak:
Vigye az egeret rájuk, és láthatja, hogy minden oldal működőképes. Az egyes oldalak fejlécében szerepel egy betű, amely jelzi, melyik színminta vezérli a megjelenését.
11. Színek
Az oldal tetején látható egy sor színes chip, két csúszka vezérlővel és egy váltógombbal. Jobbra további tíz színes chip látható, amelyeknek üresnek kell lenniük. Ezeket a közelmúltban használt színeknek szentelték, és üresek lesznek, amíg ki nem választ egy színt:
A színes chipek alatt két csúszka található, amelyeken a Világosság és a Telítettség felirat szerepel. A világosság csúszka a színminták sorozatának világos és sötét tónusát állítja be, míg a telítettség a színeket többé-kevésbé élénkebbé teszi. Összességében a felhasználónak képesnek kell lennie közelíteni az általa választott színt. A Kuler színeinek használatához kattintson az Adobe Kuler színminták feliratú szövegre.
A színes chipek mindegyike áthúzható az előnézeti terület bármely elemére. Ez rendkívül egyszerűvé teszi a színmintakészlet fejlesztését. Ne feledje, hogy a jQuery Mobile sok stílusa átfedésben van, például az oldal tetején található fejléc sáv megegyezik a listanézet fejlécével. Szükség szerint állítsa be a színeket, majd húzza az egyes chipeket az oldal egyik elemére. Ne feledje, hogy minden egyes oldal a saját színmintája, ezért vigyázzon a színek keverésének módjára.
12. Ellenőr
Az interfész bal szélén található az ellenőrző panel, két részre osztva. A felső rész gombokat tartalmaz, amelyekkel a fejlesztők letölthetik a témájukat, importálhatnak egy meglévő témát, és megoszthatnak egy linket a témájukhoz. Van egy súgó link azok számára is, akik nem vették meg ezt a könyvet:
Az alsó szakasz a Global, A, B, C és + feliratokkal ellátott tabsorozatot tartalmazza. Ezen fülek mindegyike tartalmaz egy harmonika panelt, amely tartalmazza az egyes színminták összes értékét, kivéve a Globális lapot, amely az összes színmintára vonatkozik.
Válassza a Globális fület, majd kattintson az Aktív állapot elemre, és a harmonika panel kibontja az aktív állapot beállításait a teljes témához. Az opciók között szerepel a szöveg színe, a szöveg árnyéka, a háttér és a szegély. Az érték megváltoztatása a globális környezetben minden jelenlegi (és jövőbeli) színmintát tükröz az új beállításra.
További színminták kétféleképpen adhatók hozzá a témához. Az ellenőr tetején található + fülre kattintva új színmintát ad a téma utolsó helyéhez. Új színmintát is hozzáadhat, ha az előnézeti terület alján található Színtár hozzáadása gombra kattint. A színmintákat úgy lehet törölni, hogy kiválasztjuk az eltávolítani kívánt színmintát tartalmazó fület, majd rákattintunk a színminta nevétől jobbra található Törlés hivatkozásra. Vegye figyelembe, hogy a színminta törlése a verem tetejéről a többi színminta átnevezését eredményezi.
13. Eszközök
Az oldal tetején egy sor gomb található. Ezek a gombok lehetővé teszik különféle feladatok elvégzését, amelyeket egy pillanat alatt elvégezünk, de először alaposabban megvizsgáljuk magukat a gombokat:
A következő gombokat veszi észre: egy kapcsoló, amely lehetővé teszi az 1.1 (jelenlegi) verzió és az 1.0.1 verzió közötti váltást, visszavonás / újraváltás és egy kapcsoló gomb az ellenőr számára. Ha ezt a kapcsolót bekapcsolja, ellenőrizheti az előnézeti területen lévő összes widgetet. A widget fölé viszi az egeret, és kék négyzettel emeli ki az elemet. Az elemre kattintva az Ellenőr területen a harmonika menü kibővül, és megjelenik az adott elemre vonatkozó beállítások.
Négy további gomb található, amelyek lehetővé teszik a téma letöltését, egy korábban létrehozott téma importálását vagy frissítését, a téma megosztását másokkal és egy súgó gombot.
14. Téma létrehozása a Notekeeper számára
Most, hogy ismerkedünk a ThemeRoller kezelőfelületével, mi lenne, ha folytatnánk az első témánk létrehozását? Ahelyett, hogy absztrakt módon építenénk egyet, hozzunk létre egyet, amelyet valóban a korábban épített Notekeeper alkalmazáshoz fogunk használni. Kezdjük egyszerűen a jQuery Mobile-hoz mellékelt meglévő témák egyikének módosításával. A csapat kedves volt ahhoz, hogy a felhasználók az alapértelmezett témákat importálhassák az új témák kiindulópontjaként, így itt tartunk először. Kattintson az Importálás gombra az ablak bal felső sarkában, és megjelenik egy mező, amely lehetővé teszi egy meglévő téma tartalmának beillesztését:
Importálja az alapértelmezett témát a jobb felső sarokban található hivatkozásra kattintva, az Alapértelmezett téma importálása címmel. Miután a szövegmező kitöltődött CSS-sel, kattintson az Importálás gombra. Az előnézeti terület újratölti és megjeleníti a színmintákat A-tól E-ig.
Erőfeszítéseinket a fehér színminta, D megváltoztatására fogjuk összpontosítani, mivel ez áll a legközelebb a végcélhoz. Mivel inkább az A mintát használjuk névként, töröljük a többi színmintát úgy, hogy csak D maradjon. Ne feledje, hogy a ThemeRoller átnevezi a színmintákat, miközben mások törlődnek. Ez azt jelenti, hogy ha törli az A színmintát, B-ből A lesz, C-ből D-be stb.
Folytasd addig, amíg a D színminta most A pozícióba nem kerül. Végül törölje a B színmintát (ami korábban E színminta volt), hogy csak az A színminta maradjon:
Ez a színminta szép megjelenésű, de kissé unalmas. Injektáljunk egy kis színt a fejléc szép zöldre változtatásával. Annak megállapításához, hogy milyen értékeket kell megváltoztatni egy elemnél, a legegyszerűbb módszer az ellenőr használata. Váltsa felül az ellenőrzőt a Be lehetőségre, majd kattintson az A téma fejlécének bárhová. Tudni fogja, hogy jól értette-e, ha a bal oldalon az A lap van kiválasztva, és a Fejléc / lábléc sáv kitágul:
A színt néhány módon változtathatja meg. Húzhat egy színes chipet felülről közvetlenül a háttérre. Színes chipet is áthúzhat egy beviteli mezőbe. Végül manuálisan beírhatja az értéket. Figyelje meg, hogy amikor egy színértéket tartalmazó mezőre kattint, egy színválasztóval rendelkezik. Menjen előre, és módosítsa a panel beviteli mezőinek értékeit az előző képernyőképen látható értékekre.
Jól néz ki, de most a téma aktív állapotának kékje ütközik a zöldünkkel. Az ellenőr eszköz használatával kattintson egyszer a Be / Ki kapcsoló sáv Be elemére. Ez a Globális fül Aktív állapot paneljének kibővülését eredményezheti. A kéket szép meleg szürkére változtatjuk. A Globális panelnek most hasonlónak kell lennie a következő képernyőképhez:
Csak egy dolog akadályozza meg új témánkat, hogy a legforróbbnak tűnjön, a felső bekezdésben található kék szöveges link. Visszatérve megbízható ellenőrünkhöz, kattintsunk közvetlenül arra a linkre, amely kibővíti a Tartalom törzs paneljét az A lapon. Azok számára, akik már ismerik a CSS-t, tudják, hogy nem lehet egyszerűen megváltoztatni a link színét anélkül, hogy megváltoztatnák a lebegést, a meglátogatott: lebegő és aktív állapotokat is. A probléma az, hogy nincs lehetőség ezekre a változtatásokra, de a ThemeRoller lefedte. A többi opció megjelenítéséhez kattintson a Link szín beviteli mező jobb oldalán található + gombra, majd változtassa meg a színeket, az alábbi képernyőkép szerint:
És ez az. Nyugodtan hajtson végre további változtatásokat a témájában, amikor felfedezi az ellenőr területét. Változtasson bármit, ami csak tetszik, jelenleg csak bitek és bájtok. Ne feledje azonban, hogy egyelőre nincs visszavonási lehetőség. Ha valami nagyon tetszik, fontolja meg az értékek felírását, hogy ne veszítse el, vagy exportálja úgy, ahogy van. Apropó ...
15. Téma exportálása
Mielőtt valóban exportálnánk a témánkat, egy dolgot meg kell jegyezni. Emlékszel a "hasznos" információkkal ellátott splash oldalra? Kiderült, hogy van egy darab, amely nem ajánlás, hanem követelmény.
Javasoljuk a témák felépítését legalább 3 színmintával (A-C).
Ahhoz, hogy témánk megfelelően alkalmazható legyen a Notekeeper alkalmazásunkra, meg kell ismételnünk egyetlen színmintánkat (A betű) a B és C színmintákra. Szerencsére ez könnyű dolog. Válassza ki az A lapot az ellenőr tetején, majd kattintson kétszer a + fülre. Három azonos színmintát kell látnia, és most elkészültünk.
Most, hogy befejeztük a témánkat, exportálni fogjuk a Notekeeper alkalmazásunkba. Ez egy egyszerű folyamat, amely az oldal közepén, a felület tetején található Téma letöltése gombra kattintva kezdődik. Megjelenik egy doboz, amelyben megnevezheti a témát, néhány információ a téma alkalmazásáról, valamint egy gomb, amely a Zip letöltése elemet viseli. Miután elnevezte a Notekeeper témát, kattintson a Zip letöltése gombra, és egy finom kis falatot kap a letöltések mappában.
Bontsa ki a ZIP fájl tartalmát, és a következő könyvtárstruktúrát fogja látni:
- index.html
- themes / Notekeeper.css (A téma tömörítetlen verziója) Notekeeper.min.css (A tömörített verzió. Ezt használja a gyártásban) images / ajax-loader.gif icons-18-black.png icons-18-white.png icons -36-black.png ikonok-36-white.png
A fa tetején található HTML fájl információkat tartalmaz a téma megvalósításáról, valamint néhány widgetet a téma működésének megerősítésére. Az összes hivatkozás relatív a példafájlban, ezért képesnek kell lennie arra, hogy bármelyik böngészőablakba húzza, és láthassa az eredményeket.
Néhány megjegyzés a témák letöltéséről és megvalósításáról:
1. A jQuery csapata okból biztosítja a gombok ikonjait ebben a ZIP fájlban. A téma megköveteli, hogy ezek a képek viszonyuljanak a CSS-fájlhoz. Ez azt jelenti, hogy hacsak még nem használja az alapértelmezett témákat, akkor a képek mappáját is fel kell vennie, amikor feltölti a témát a webhelyére, különben az ikonok nem jelennek meg.
2. Várjon a téma tömörítetlen verzióján. Bár a méret miatt nem szeretné használni a gyártásban, szüksége lesz rá, ha valaha is szeretné szerkeszteni a ThemeRolleren belül. A ThemeRoller az írás idején nem tudja importálni a tömörített CSS fájlt.
Andy Matthews több mint 16 éve fejleszt egy alkalmazást, és rendelkezik az UI / UX, a grafikai tervezés és a programozás képességeivel. Beszélő, nyílt forráskódú fejlesztő, és családjával Nashville-ben (Tennessee) él. Ő @commadelimited a Twitteren.
Raymond Camden az Adobe vezető fejlesztői evangélistája. Munkája a webes szabványokra, a mobil fejlesztésre és a ColdFusion-re összpontosít. Közzétett szerző, konferenciákon és felhasználói csoportokban mutat be különböző témákat. Kövesse őt a @cfjedimaster oldalon.
