Hozzon létre egy egyedi témát a jQuery Mobile alkalmazásban

  • 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 , a Packt Publishing kiadó.

A jQuery Mobile témája egyszerű és egyszerűen használható a fejlesztő számára, de meglehetősen bonyolult 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éhez:

A fejlesztők általában a data-theme 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 azokon a területeken alkalmazzák, ahol a bekezdések szövege várható. 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 örökölnek a szüleiktől, 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?

Teljesen elfogadható, sőt ösztönözhető, ha 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ű is. Egyszerűen helyezzen el egy gombot (vagy más elemet) a fejlécen belül, és rendelje hozzá a saját adat-téma attribútumát:

05. Az egész helyszínen 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ő néven .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 az adatok-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 mennyire hatékony a témákban. 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:

  1. Töltse le és nyissa meg a meglévő jQuery Mobile CSS fájlt, és szerkessze a szíved tartalmára.
  2. Irányítsa a webböngészőt ThemeRoller a jQuery Mobile-hoz .

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? Tudjuk meg, mi a ThemeRoller.

08. Mi a ThemeRoller?

A jQuery Mobile ThemeRoller egy webalapú alkalmazás kiterjesztése, amelyet a jQuery felhasználói felület projektjéhez írtak. Lehetővé teszi a felhasználók számára, hogy a drag-and-drop színkezelés segítségével percek alatt gyorsan összeállítsanak egy színmintákkal teli témát. 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 beismerni 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. Ide tartoznak a fejléc (és a listanézet fejlécei) és a gombok. Saját téma létrehozásakor ezt érdemes 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 mindaddig ü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 könnyedség csúszka beállítja a színminták sorozatának világos és sötét tónusait, 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 ugyanolyan stílust kap, mint a listanézet fejléce. 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 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ék, 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 törölheti, ha kiválasztja az eltávolítani kívánt színmintát tartalmazó fület, majd a színminta nevétől jobbra található Törlés hivatkozásra kattint. 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 nézze meg közelebbről 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ó az ellenőr számára. Ha ezt a kapcsolót bekapcsolja, ellenőrizheti az előnézeti terület bármelyik widgetjét. Az egérrel egy widget fölé viszi az elemet egy kék mezővel. 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ülettel, mi lenne, ha folytatnánk az első téma létrehozását? Ahelyett, hogy absztrakt módon építenénk, hozzunk létre egyet, amelyet ténylegesen 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, tehát itt tartunk először. Kattintson az Importálás gombra az ablak bal felső sarkában, és kap egy mezőt, amelybe beillesztheti egy meglévő téma tartalmá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 fordítani, mivel ez áll a legközelebb a végcélunkhoz. Mivel inkább az A mintát használjuk névként, töröljük a többi színmintát, hogy csak D maradjon. Ne feledje, hogy a ThemeRoller átnevezi a színmintákat, mivel 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 (amely 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 bármely elemnél, a legegyszerűbb módszer az ellenőr használata. Váltsa felül az ellenőrzőt a Be elemre, 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 segítségével 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 az egérmutatót, 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 leírását, hogy ne veszítse el azokat, 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 másolnunk 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, amely 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 áthú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.

két. Várjon a téma tömörítetlen verzióján . Bár a méret miatt nem akarja használni a termelésben, 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ásokat, és rendelkezik felhasználói és felhasználói felület, grafikai tervezés és programozási ismeretekkel. Beszélő, nyílt forráskódú fejlesztő, és családjával Nashville-ben (TN) é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.