Mobilné aplikácie Design / Dev Vlastné motívy s jQuery Mobile

V našom predchádzajúcom jQuery Mobile tutoriáli som predstavil veľa podkladového rámca a ako ísť o vytvorení vašej prvej webovej stránky. Knižnica JS je ľahká a ľahko vyzdvihli, čo sa týka problémov s učením. V súbore je tiež generovaný šablón so štýlmi CSS, ktorý vám umožní ďalej prispôsobiť prvky vo vašom rozložení.

Pre tento druhý segment by som chcel stráviť trochu času hlbšie do tejto myšlienky jQuery Mobile tém. Celý dizajnový priemysel bol revolucionizovaný spoločnosťou jQM a proces vytvárania mobilnej šablóny od začiatku sa výrazne zlepšil. jQuery Mobile nie je iba skriptovacia knižnica, ale celá základná štruktúra, na ktorej je možné stavať a produkovať efektívne mobilné šablóny.

Predvolený obsah šablóny

Mal by som začať objasnením toho, aký typ kódu CSS je zahrnutý v predvolených súboroch. Šablóna so štýlmi z jQM 1.0 bola rozdelená na dva hlavné segmenty - štruktúra a témy.

Kód štruktúry je to, čo väčšinou ignorujete. Používa sa na nastavenie okrajov, polstrovania, výšky / šírky, variantov písma spolu s mnohými inými predvolenými nastaveniami prehliadača. Vnútorné témy sú potom rozdelené z A-E, ktoré každý riadia rôzne vizuálne efekty vo vašom dizajne. Môže to zahŕňať farby pozadia, gradienty, tieňovanie kvapiek atď.

Každý z týchto prvkov vnútornej tému môže byť tiež označovaný ako vzorkovník. Keď vytvoríte mobilnú šablónu, zvyčajne sa budete držať s jednou témou. Ale v takmer každom scenári môže byť dizajn vylepšený s rôznymi farebnými schémami. Štandardná šablóna štýlov obsahuje iba vzorky A-E, ale môžete vytvoriť vzorky F-Z, ak chcete pridať ďalších 21 alternatív do vašej knižnice tém. Len aby som tieto pojmy znova objasnil a téma sa považuje za jeden jediný súbor CSS, ktorý môže obsahovať až 26 rôznych vzorkovník označené A-Z.

Prepínanie štýlov

Ak nechcete zadať žiadne vzorky, jQuery Mobile bude štandardne pripevňovať vzorku A. Ak ste si ešte neboli vedomí, dokumenty jQuery Mobile využívajú atribúty údajov HTML5 pre mnoho interných funkcií. Jedným z nich je zmena vzorkovníka pomocou atribútu dát-tému. Pozrite sa na môj príklad kódu nižšie, aby ste videli, čo mám na mysli.

  Predvolená stránka jQM
 
  Tu je interný obsah.

Všimnite si, že som umiestnil atribút dát-tému na koreňovú stránku div. Znamená to, že nová farba vzorky ovplyvní všetko, čo zahŕňa aj oblasť záhlavia a obsah. Môžem navyše zahrnúť Data-theme = "c" do záhlavia div zmeniť iba ten obsah zo zvyšku mojej stránky.

Súčasti vzorky

Malo by byť pomerne jednoduché, ako implementovať tieto rôzne vzory v rámci jediného usporiadania. Takže teraz sa pozrime na jQM kód CSS, aby sme mohli rozdeliť jednotlivé zložky vzorky. Pozrite sa na najnovší súbor CSS jQuery Mobile 1.4.5, ktorý je umiestnený na vlastnom CDN.

Mali by ste si všimnúť, ako je každá vzorka oddelená odlišnou poznámkou a každá vnútorná trieda končí príslušným písmom. Napríklad .ui-bar-a a .ui-body-a sa v predvolenom nastavení aplikujú do pruhov záhlavia / päty a oblasti obsahu. Väčšina objektov vykonáva vynulovanie farieb písma a odkazov, gradientov na pozadí a ďalších malých detailov. Jednoducho som zahrnul ui-bar-a kódy, ktoré vám dajú predstavu o tom, na ktoré prvky sa zameriavame.

/ * A ----------------------------------------------- ---------------------------------------------- * / -bar-a okraj: 1px pevná # 2A2A2A; pozadie: # 111111; farba: #ffffff; font-weight: tučné; textový tieň: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px # 000000; pozadie-obrázok: -webkit-gradient (lineárny, ľavý horný, ľavý dolný, od (# 3c3c3c) až po (# 111)); / * Saf4 +, Chrome * / pozadie-obrázok: -webkit-linear-gradient (# 3c3c3c, # 111); / * Chrome 10+, Saf5.1 + * / pozadia-obrázok: -moz-linear-gradient (# 3c3c3c, # 111); / * FF3.6 * / pozadia-obrázok: -ms-lineárny gradient (# 3c3c3c, # 111); / * IE10 * / pozadie-obrázok: -o-lineárny gradient (# 3c3c3c, # 111); / * Opera 11.10+ * / pozadia-obrázok: lineárny gradient (# 3c3c3c, # 111); .-bar-a, .ui-bar-a výber, .ui-bar-a textarea, .ui-bar-tlačidlo font-family: serif;  .ui-bar-a .ui-link-inherit farba: #fff;  .ui-bar-a .ui-link farba: # 7cc4e7 / * a-bar-link-color * /; font-weight: tučné;  .ui-bar-a .ui-link: hover farba: # 2489CE / * a-bar-link-hover * /;  .ui-bar-a .ui-link: aktívna farba: # 2489CE / * a-bar-link-active * /;  .ui-bar-a .ui-link: navštívil color: # 2489CE / * a-bar-link-visited * /;

Ak chcete len vytvoriť vlastný vzor, odporúčam založiť šablónu na jednom z originálov. Tento proces bude omnoho hladší, ak začnete písať kódy v novom dokumente CSS. Nebudete mať ťažkosti s úpravou v pôvodnom súbore a môžete začať pracovať na čistom bridlice. Kľúčové oblasti, na ktoré chcete zaostriť, budú obsahovať nasledujúce položky:

záhlavie a päty
obsah tela a text stránky
zoznamu štýlov
tlačidlo stláča predvolené / hover / aktívne
vstupné ovládacie prvky (extra)

Kódovanie návrhu nového panela

Z rovnakého súboru CSS sme sa pozreli na skorší kopírovanie / vloženie všetkých vzoriek A (riadky 12-150) do nového súboru. Na implementáciu týchto nových štýlov môžeme použiť názov vzorky G. Teraz po skopírovaní kódu, ktorý chcete premenovať, skončí každá inštancia triedy - na -g, ako to dokáže jQuery Mobile rozpoznať, ktoré štýly sa majú používať.

Rád by som začal prepracovaním hlavičkového panelu bg, aby som napodobnil známy gradient iOS. Toto sa môže uskutočniť iba v rámci .ui-bar-g selektor. Chceme upraviť vlastnosti pozadia a pozadia pre zmenu efektov gradientu. Pozrite sa na môj kód nižšie a na demo obrazovke nového gradientu.

.ui-bar-g okraj: 1px masívny # 2d3033 / * a-bar-border * /; border-left: 0px; border-right: 0px; pozadie: # 6d83a1; farba: #fff / * a-bar-color * /; font-weight: tučné; textový tieň: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px / * a-bar-shadow-radius * / # 3e4957; (# b4bfce), farebný stop (0,5, # 899cb3), farebný stop (0.505, # 7e94b0), (# 6d83a1)); pozadie-obrázok: -webkit-lineárny gradient (hore, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Chrome 10+, Saf5.1 + * / pozadia-obrázok: -moz-linear-gradient (top, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * FF3.6 * / obrázok-pozadie: -ms-lineárny gradient (hore, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * IE10 * / pozadie-obrázok: -o-lineárny gradient (top, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Opera 11,10+ * / pozadia-obrázok: lineárny gradient (hore, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1);

Používam modrú farebnú schému, ktorá sa nachádza vo väčšine predvolených aplikácií pre systém iOS. Moje pozadie je pôvodne nastavené na plnú farbu pre zariadenia, ktoré nemôžu vykresľovať gradienty CSS3. Potom nižšie používam farebné zastávky okolo značky 50%, aby sa obnovil tradičný efekt lesklého lesku v štýle Apple. Aj vo vnútri toho istého výberu mierne upravil textový tieň jemnejšou farbou a rozsahom.

Tlačidlá a textové efekty

Pri kódovaní vzoriek je dôležité zvážiť, ktoré oblasti rozhrania potrebujú pozornosť. Záhlavie s týmto novým pozadím vyzerá skvele, ale posledná úprava, ktorú by som chcela urobiť, bude zodpovedať štýlom tlačidiel, ktoré sú bližšie k aplikáciám pre systém iOS.

.ui-btn-up-g okraj: 1px pevná # 375073; pozadie: # 4a6c9b; font-weight: tučné; farba: #fff; textový tieň: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; box-tieň: žiadny; -webkit-box-shadow: žiadny; -moz-box-tieň: žiadny; (# 89a0be), farebný stop (0,5, # 5877a2), farebný stop (0,505, # 476999), (# 4a6c9b)); pozadie-obrázok: -webkit-lineárny gradient (top, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Chrome 10+, Saf5.1 + * / pozadia-obrázok: -moz-linear-gradient (top, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * FF3.6 * / obrázok-pozadie: -ms-lineárny gradient (top, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * IE10 * / pozadia-obraz: -o-lineárny gradient (top, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Opera 11,10+ * / pozadia-obrázok: lineárny gradient (top, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); polomer okrajov: 4px; -webkit-border-radius: 4px; -moz-okraj-polomer: 4px;  .j-btn-up-g .j-btn-vnútorný, .ui-btn-hover-g .ui-btn-vnútorný, 0; -webkit-border-radius: 0; -moz-okraj-polomer: 0;  .ui-btn-hover-g okraj: 1px pevný # 1b49a5; pozadie: # 2463de; font-weight: tučné; farba: #fff; textový tieň: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; box-tieň: žiadny; -webkit-box-shadow: žiadny; -moz-box-tieň: žiadny; (# 779be9), farebný stop (0.5, # 376fe0), farebný stop (0.505, # 2260dd), (# 2463de)); pozadie-obrázok: -webkit-lineárny gradient (top, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Chrome 10+, Saf5.1 + * / background-image: -moz-lineárny gradient (top, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * FF3.6 * / background-image: -ms-lineárny gradient (top, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * IE10 * / background-image: -o-lineárny gradient (top, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Opera 11.10+ * / pozadie-obrázok: lineárny gradient (top, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); polomer okrajov: 4px; -webkit-border-radius: 4px; -moz-okraj-polomer: 4px;

Kótovaná oblasť, ktorú teraz upravujeme, je v triedach tlačidiel používateľského rozhrania. K dispozícii sú tri rôzne režimy: .ui-btn-up-g, .ui-btn-vznášať-g, a .ui-btn-dole-g. Väčšinou sa sústreďujem na štandardné efekty (btn-up) a hover (btn-hover) úpravou stínového a lineárneho gradientu. Taktiež som rozšíril efekt zaoblených rohov tak, aby sa tlačidlá zobrazovali viac pravouhlé.

Z tohto dôvodu som musel odstrániť okruh vnútorného okraja z triedy s názvom .ui-btn-vnútorné. Táto trieda sa pripojí na prvok rozpätia v každom ukotveni v hlavičke. Bez vynulovania vlastností okraja ohraničenia si všimnete drobné závady v dizajne, kedykoľvek nad kurzorom. Keď strávite viac času kódovaním v jQuery Mobile témach, budete si pamätať tieto malé odtiene pre budúce projekty.

Úvod do témyRoller

Ak máte rád dostať ruky špinavé v kóde, potom veľmi odporúčam prilepiť vlastné úpravy. Nielenže máte väčšiu kontrolu, ale je to oveľa jednoduchšie ladiť problémy v rámci CSS, ak ste vykonali všetky úpravy sami. Ale pre mnohých dizajnérov tento proces je únavný a jednoducho trvá dlhšie, ako je potrebné. Našťastie tím jQuery Mobile vydal online editor pod názvom ThemeRoller.

Na tejto stránke máte prístup k úprave prvých 3 vzoriek A-C alebo dokonca k vytvoreniu jedného z vašich vlastných. Ak sa pozriete na ľavý bočný panel, môžete prepínať medzi týmito 3 nastaveniami alebo rýchlo vykonať zmeny v globálnych možnostiach témy. Patria sem vlastnosti CSS, ako sú okraje okrajov, tieň skriniek alebo predvolené písma. Všimnite si, že vyberiete akékoľvek predvolené vzorky, ktoré môžeme upraviť iba v tých istých oblastiach ako predtým - horné / dolné pruhy, obsah tela a tri stlačenia tlačidiel.

Ale mojou najobľúbenejšou funkciou musí byť priamy prístup k vzorkám Adobe Kuler. Môžete vlastne vytvoriť niekoľko farebných schém v rámci účtu Kuler a importovať ich do ThemeRoller. Rozhranie podporuje funkciu "drag-and-drop", takže je jednoducho vyskúšať niekoľko rôznych nápadov za niekoľko minút.

Nakoniec neexistuje žiadna absolútna metóda správneho budovania vašich jQM vzoriek. Niektorí dizajnéri dávajú prednosť tvrdému kódu CSS, zatiaľ čo iní budú milovať intuitívnu webovú aplikáciu ThemeRoller. Pokiaľ budete sledovať štruktúru triedy, mali by ste získať rovnaké výsledky v oboch smeroch.

Užitočné zdroje

jQuery Mobile Témy - Dokumentácia
Používanie a prispôsobenie motívov jQuery Mobile