Mobilní aplikace Design / Dev Vlastní témata s jQuery Mobile

V našem dřívějším tutoriálu jQuery Mobile jsem představil většinu základního rámce a jak jít o nastavení vaší první webové stránky. Knihovna JS je lehká a snadno vyzvednutelná s ohledem na potíže s učením. K dispozici je také obecný CSS stylesheet součástí souborů, takže můžete dále přizpůsobit prvky v rozvržení.

Pro tento druhý segment bych rád strávil trochu času ponořením se hlouběji do této myšlenky témat jQuery Mobile. Celý design průmysl byl revoluci jQM a proces výstavby mobilní šablony od nuly byl výrazně zlepšen. jQuery Mobile není jen skriptovací knihovnou, ale celým základním rámcem, na kterém lze stavět a vytvářet efektivní mobilní šablony.

Výchozí obsah šablony stylů

Měla bych začít objasněním, jaký typ CSS kódu je součástí výchozích souborů. Šablona stylů z jQM 1.0 byla rozdělena do dvou hlavních segmentů - struktura a témat.

Kód struktury je věc, kterou můžete většinou ignorovat. Používá se k nastavení okrajů, výplně, výšky / šířky, variant písma a mnoha dalších výchozích nastavení prohlížeče. Vnitřní motivy jsou pak rozděleny z A-E, které ovládají různé vizuální efekty ve vašem návrhu. To může zahrnovat barvy pozadí, přechody, stíny, atd.

Každá z těchto vnitřních motivů může být také označována jako vzorníky. Při vytváření mobilní šablony se budete obvykle držet jednoho tématu. Téměř v každém scénáři je však možné návrh vylepšit různými barevnými schématy. Výchozí šablona stylů obsahuje pouze vzorníky A-E, ale můžete sestavit vzorník F-Z, abyste do knihovny motivů přidali dalších 21 alternativ. Abych tyto termíny znovu objasnil téma je považován za jeden jediný CSS soubor, který může obsahovat až 26 různých vzorníky označené A-Z.

Styly přepínání

Pokud se rozhodnete neoznačit žádný vzorník, pak jQuery Mobile bude ve výchozím nastavení držet vzorník A. Pokud jste si již nebyli vědomi, dokumenty jQuery Mobile využívají datové atributy HTML5 pro mnoho interních funkcí. Jeden z nich zahrnuje změnu vzorníku pomocí atributu data-theme. Podívejte se na níže uvedený příklad kódu, abyste zjistili, co tím myslím.

  Výchozí stránka jQM
 
  Zde je nějaký interní obsah.

Všimněte si, že jsem umístil atribut data-theme na kořenovou stránku div. To znamená, že nová barva vzorníku bude působit na vše uvnitř, které zahrnuje jak oblasti záhlaví, tak obsahové oblasti. Mohl bych navíc zahrnout data-theme = "c" do záhlaví div pro změnu pouze obsahu ze zbytku mé stránky.

Komponenty Swatch

Mělo by být poměrně jednoduché, jak tyto různé vzorníky implementovat v rámci jednoho uspořádání. Podívejme se nyní na kód jQM CSS, abychom mohli rozdělit jednotlivé komponenty vzorníku. Podívejte se na nejnovější soubor jQuery Mobile 1.4.5 CSS hostovaný na vlastním CDN.

Měli byste si všimnout, jak je každý vzorník oddělen odděleným komentářem a každá z interních tříd končí příslušným písmem. Například .ui-bar-a a .ui-body-a ve výchozím nastavení jsou použity do sloupců záhlaví / zápatí a oblastí obsahu. Většina vlastností implementuje reset na barvy písma a odkazů, přechody pozadí a další malé detaily. Zahrnula jsem prostě ui-bar-a kódy, které vám poskytnou představu o tom, na které prvky se zaměřujeme.

/ * A ----------------------------------------------- ---------------------------------------------- * / .ui -bar-a hranice: 1px pevná # 2A2A2A; pozadí: # 111111; barva: #ffffff; font-weight: tučné; textový stín: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px # 000000; pozadí-obraz: -webk-gradient (lineární, levý horní, levý dolní, od (# 3c3c3c), do (# 111)); / * Saf4 +, Chrome * / background-image: -webkit-lineární gradient (# 3c3c3c, # 111); / * Chrome 10+, Saf5.1 + * / background-image: -moz-lineární gradient (# 3c3c3c, # 111); / * FF3,6 * / pozadí-obraz: -ms-lineární gradient (# 3c3c3c, # 111); / * IE10 * / background-image: -o-lineární gradient (# 3c3c3c, # 111); / * Opera 11.10+ * / background-image: lineární gradient (# 3c3c3c, # 111);  .ui-bar-a, .ui-bar-a input, .ui-bar-a select, .ui-bar-a textarea, .ui-bar-a button rodina fontů: Helvetica, Arial, sans- serif;  .ui-bar-a .ui-link-inherit color: #fff;  .ui-bar-a .ui-link barva: # 7cc4e7 / * a-bar-link-color * /; font-weight: tučné;  .ui-bar-a .ui-link: hover color: # 2489CE / * a-bar-link-hover * /;  .ui-bar-a .ui-link: active color: # 2489CE / * a-bar-link-active * /;  .ui-bar-a .ui-link: navštíveno barva: # 2489CE / * a-bar-link-visit * /;

Pokud hledáte jen vytvořit vlastní vzorník, doporučuji vyložit šablonu z jednoho z originálů. Proces bude mnohem plynulejší, pokud začnete psát kódy do nového dokumentu CSS. Nebudete mít problémy s úpravami v původním souboru a můžete začít pracovat na čisté břidlice. Mezi klíčové oblasti, na které se chcete zaměřit, patří:

záhlaví a zápatí
obsah těla a text stránky
seznam stylů
Tlačítko uvádí výchozí / hover / active
ovládací prvky vstupu formuláře (extra)

Kódování nového pruhu

Ze stejného souboru CSS jsme se podívali na dřívější kopírování / vkládání všech kódů vzorníku A (řádky 12-150) do nového souboru. K implementaci těchto nových stylů můžeme použít název vzorníku G. Nyní po zkopírování kódu chcete přejmenovat každou instanci třídy končící na -A na -G, jak jQuery Mobile rozpozná, které styly použít.

Chtěl bych začít přepracováním záhlaví bg, aby napodobil známější přechod iOS. To lze provést pouze v rámci EU .ui-bar-g volič. Chceme upravit vlastnosti pozadí a pozadí pro změnu efektů přechodu. Podívejte se na můj kód níže a na demo obrazovku nového přechodu.

.ui-bar-g ohraničení: 1px pevné # 2d3033 / * a-bar-border * /; border-left: 0px; border-right: 0px; pozadí: # 6d83a1; barva: #fff / * a-bar-color * /; font-weight: tučné; textový stín: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px / * a-bar-shadow-radius * / # 3e4957; pozadí-obraz: -webk-gradient (lineární, 0% 0%, 0% 100%, od (# b4bfce), barevný doraz (0,5, # 899cb3), barevný doraz (0,505, # 7e94b0), do (# 6d83a1))); pozadí-obraz: -webkit-lineární gradient (horní, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Chrome 10+, Saf5.1 + * / background-image: -moz-lineární gradient (horní, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * FF3,6 * / pozadí: -ms-lineární gradient (horní, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * IE10 * / background-image: -o-lineární gradient (horní, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Opera 11.10+ * / background-image: lineární gradient (horní, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1);

Používám modré barevné schéma, které se nachází ve většině výchozích aplikací iOS. Moje pozadí je zpočátku nastaveno na plnou barvu pro zařízení, která nemohou vykreslovat přechody CSS3. Pak používám barevné zastávky kolem značky 50%, abych vytvořil tradiční lesklý lesklý efekt ve stylu Apple. Také uvnitř stejného voliče jsem mírně upravil textový stín s jemnější barvou a rozsahem.

Tlačítka a textové efekty

Je důležité, když kódování vzorníků zvážit konkrétně, které oblasti rozhraní potřebují pozornost. Panel záhlaví s tímto novým pozadím vypadá skvěle, ale jedna poslední modifikace, kterou bych chtěl provést, bude odpovídat stylům tlačítek blíže k stylům aplikací pro systém iOS.

.ui-btn-up-g ohraničení: 1px pevné # 375073; pozadí: # 4a6c9b; font-weight: tučné; barva: #ff; textový stín: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; box-shadow: žádný; -webkit-box-shadow: žádný; -moz-box-shadow: žádný; pozadí-obraz: -webk-gradient (lineární, 0% 0%, 0% 100%, od (# 89a0be), barevný doraz (0,5, # 5877a2), barevný doraz (0,505, # 476999), do (# 4a6c9b)); pozadí-obraz: -webkit-lineární gradient (horní, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Chrome 10+, Saf5.1 + * / background-image: -moz-lineární gradient (horní, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * FF3,6 * / pozadí: -ms-lineární gradient (horní, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * IE10 * / background-image: -o-lineární gradient (horní, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Opera 11.10+ * / background-image: lineární gradient (horní, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); hraniční rádius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;  .ui-btn-up-g .ui-btn-inner, .ui-btn-hover-g .ui-btn-inner, .ui-btn-down-g .ui-btn-inner okraj-poloměr: 0; -webkit-border-radius: 0; -moz-border-radius: 0;  .ui-btn-hover-g hranice: 1px pevné # 1b49a5; pozadí: # 2463de; font-weight: tučné; barva: #ff; textový stín: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; box-shadow: žádný; -webkit-box-shadow: žádný; -moz-box-shadow: žádný; background-image: -webkit-gradient (lineární, 0% 0%, 0% 100%, od (# 779be9), color-stop (0.5, # 376fe0), color-stop (0.505, # 2260dd), na (# 2463de)); background-image: -webkit-lineární gradient (horní, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Chrome 10+, Saf5.1 + * / background-image: -moz-lineární gradient (horní, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * FF3.6 * / background-image: -ms-lineární gradient (horní, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * IE10 * / background-image: -o-lineární gradient (horní, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Opera 11.10+ * / background-image: lineární gradient (horní, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); hraniční rádius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;

Oblast kódu, kterou nyní upravujeme, je v rámci tříd tlačítek UI. K dispozici jsou 3 různé režimy: .ui-btn-up-g, .ui-btn-hover-g, a .ui-btn-down-g. Většinou se zaměřuji na standardní (btn-up) a hover (btn-hover) efekty úpravou boxu stínů a lineárních gradientů. Také jsem rozšířil efekt zaoblených rohů, takže tlačítka vypadají obdélníková.

Z tohoto důvodu jsem potřeboval odstranit vnitřní okraj rádia z třídy s názvem .ui-btn-inner. Tato třída se připojí k prvku rozpětí uvnitř každého kotevního spoje v záhlaví. Bez nutnosti resetovat vlastnosti poloměru hrany si všimnete malých závad v designu, kdykoliv přejdete na tlačítko. Jak budete trávit více času kódování v jQuery Mobile témata si zapamatujete tyto malé nuance pro budoucí projekty.

Úvod do ThemeRoller

Pokud se vám líbí dostat špinavé ruce v kódu, pak jsem vřele doporučuji držet se vlastních úprav. Nejen, že máte více kontroly, ale je mnohem snazší ladit problémy v rámci CSS, pokud jste provedli všechny úpravy sami. Pro mnoho návrhářů je však tento proces únavný a bude trvat déle, než je nutné. Tým jQuery Mobile naštěstí vydal online editor pod názvem ThemeRoller.

Z této stránky máte přístup k úpravám prvních 3 vzorníků A-C nebo dokonce k vytvoření jednoho ze svých vlastních. Pokud se podíváte do levého postranního panelu, můžete přepínat mezi těmito třemi nastaveními nebo rychle měnit globální možnosti motivu. Patří mezi ně vlastnosti CSS, jako jsou poloměry hran, stíny boxů nebo výchozí písma stránek. Všimněte si, že když vyberete některý z přednastavených vzorníků, které můžeme upravovat pouze tytéž oblasti jako předcházející - horní / dolní pruhy, obsah těla a tlačítko 3 uvádí.

Ale moje nejoblíbenější funkce musí být přímý přístup k vzorkovníkům Adobe Kuler. Vlastně můžete vytvořit několik barevných schémat v účtu Kuler a importovat je do ThemeRoller. Rozhraní podporuje drag-and-drop funkce, takže je to opravdu jednoduché vyzkoušet několik různých nápadů během několika minut.

Nakonec neexistuje absolutní metoda správného sestavení vzorníku jQM. Někteří návrháři dávají přednost kódu CSS, zatímco jiní budou milovat intuitivní webovou aplikaci ThemeRoller. Pokud budete sledovat strukturu třídy, měli byste získat stejné výsledky v obou směrech.

Užitečné zdroje

jQuery Mobile Témata - Dokumentace
Použití a přizpůsobení témat jQuery Mobile