Mobile App Design / Dev Custom Themes z jQuery Mobile

W naszym wcześniejszym samouczku jQuery Mobile przedstawiłem wiele podstawowych ram i sposobów tworzenia pierwszej strony internetowej. Biblioteka JS jest zarówno lekka, jak i łatwa w odbiorze pod względem trudności w nauce. Do plików dołączony jest również ogólny arkusz stylów CSS, dzięki czemu można dodatkowo dostosować elementy w swoim układzie.

W tym drugim segmencie chciałbym poświęcić trochę czasu na zagłębienie się w tę ideę motywów jQuery Mobile. Cały przemysł projektowy został zrewolucjonizowany przez jQM, a proces konstruowania mobilnego szablonu od podstaw został znacznie ulepszony. jQuery Mobile to nie tylko biblioteka skryptów, ale cały podstawowy szkielet do tworzenia i tworzenia wydajnych szablonów mobilnych.

Domyślna zawartość arkusza stylów

Powinienem zacząć od wyjaśnienia, jaki typ kodu CSS jest dołączony do plików domyślnych. Arkusz stylów z jQM 1.0 został podzielony na dwa główne segmenty - Struktura i tematy.

Kod struktury to rzeczy, które możesz w większości ignorować. Służy do ustawiania marginesów, wypełnienia, wysokości / szerokości, wariantów czcionek oraz wielu innych ustawień domyślnych przeglądarki. Wewnętrzne tematy są następnie dzielone od A-E, z których każdy kontroluje różne efekty wizualne w projekcie. Może to obejmować kolory tła, gradienty, cienie itp.

Każdy z tych wewnętrznych elementów motywu można również określić jako próbki. Kiedy tworzysz mobilny szablon, zazwyczaj trzymasz się jednego tematu. Jednak w prawie każdym scenariuszu projekt można ulepszyć za pomocą różnych schematów kolorów. Domyślny arkusz stylów zawiera tylko próbki A-E, ale możesz zbudować próbki F-Z, aby dodać kolejne 21 alternatyw do biblioteki motywów. Aby wyjaśnić te warunki ponownie motyw jest uważany za jeden pojedynczy plik CSS, który może zawierać do 26 różnych plików próbki oznaczone jako A-Z.

Przełączanie stylów

Jeśli nie wybierzesz żadnych próbek, domyślnie jQuery Mobile będzie trzymać się próbki A. Jeśli jeszcze nie wiesz, dokumenty jQuery Mobile wykorzystują atrybuty danych HTML5 dla wielu funkcji wewnętrznych. Jedna z nich obejmuje zmianę próbek za pomocą atrybutu tematu danych. Sprawdź mój przykład kodu poniżej, aby zobaczyć, co mam na myśli.

  Domyślna strona jQM
 
  Oto niektóre treści wewnętrzne.

Zauważ, że umieściłem atrybut data-theme na stronie głównej div. Oznacza to, że nowy kolor próbki wpłynie na wszystko wewnątrz, które obejmuje zarówno nagłówek, jak i obszary zawartości. Mogę dodatkowo uwzględnić data-theme = "c" do nagłówka div, aby zmienić tylko tę zawartość z reszty mojej strony.

Komponenty Swatch

Powinno być całkiem proste, jak zaimplementować te różne próbki w jednym układzie. Przyjrzyjmy się teraz kodowi CSS jQM, abyśmy mogli podzielić poszczególne składniki próbki. Sprawdź najnowszy plik jssQuery Mobile 1.4.5 CSS na własnym CDN.

Należy zauważyć, że każda próbka jest oddzielona wyraźnym komentarzem, a każda klasa wewnętrzna kończy się odpowiednim napisem. Na przykład .ui-bar-a i .ui-body-a są domyślnie stosowane do pasków nagłówka / stopki i obszarów zawartości. Większość właściwości implementuje resetowanie kolorów czcionek i linków, gradientów tła i innych drobnych szczegółów. Włączyłem po prostu ui-bar-a kody, które dają wyobrażenie o tym, do których elementów się kierujemy.

/ * A ----------------------------------------------- ---------------------------------------------- * / .ui -bar-a border: 1px solid # 2A2A2A; tło: # 111111; kolor: #ffffff; waga czcionki: pogrubiona; text-shadow: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px # 000000; background-image: -webkit-gradient (liniowy, lewy górny, lewy dolny, od (# 3c3c3c), do (# 111)); / * Saf4 +, Chrome * / background-image: -webkit-linear-gradient (# 3c3c3c, # 111); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradient (# 3c3c3c, # 111); / * FF3.6 * / background-image: -ms-linear-gradient (# 3c3c3c, # 111); / * IE10 * / background-image: -o-linear-gradient (# 3c3c3c, # 111); / * Opera 11.10+ * / background-image: linear-gradient (# 3c3c3c, # 111);  .ui-bar-a, .ui-bar-a input, .ui-bar-a select, .ui-bar-a textarea, .ui-bar-a button font-family: Helvetica, Arial, sans- szeryf;  .ui-bar-a .ui-link-inherit color: #fff;  .ui-bar-a .ui-link color: # 7cc4e7 / * a-bar-link-color * /; waga czcionki: pogrubiona;  .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: visited color: # 2489CE / * a-bar-link-visited * /;

Jeśli chcesz tylko utworzyć próbkę niestandardową, zalecam odłożenie szablonu od jednego z oryginałów. Proces będzie przebiegał o wiele sprawniej, jeśli zaczniesz pisać kody w nowym dokumencie CSS. Nie będziesz mieć kłopotów z edycją oryginalnego pliku i możesz rozpocząć pracę nad czystym kontem. Najważniejsze obszary, na których chcesz się skupić, to:

paski nagłówka i stopki
treść treści i tekst strony
listy stylów
stan przycisków domyślny / hover / active
formanty wprowadzania danych (dodatkowe)

Kodowanie nowego projektu pręta

Z tego samego pliku CSS przyjrzeliśmy się wcześniej skopiować / wkleić cały kod próbki A (wiersze 12-150) do nowego pliku. Możemy użyć nazwy próbki G do wdrożenia tych nowych stylów. Teraz po skopiowaniu kodu chcesz zmienić nazwę każdej instancji klasy kończącej się na -za do -sol, w ten sposób jQuery Mobile rozpozna, których stylów użyć.

Chciałbym zacząć od przeprojektowania paska nagłówka bg, aby naśladować bardziej znany gradient iOS. Można to zrobić wyłącznie w ramach .ui-bar-g selektor. Chcemy edytować właściwości tła i obrazu tła, aby zmienić efekty gradientu. Sprawdź mój kod poniżej i ekran demonstracyjny nowego gradientu.

.ui-bar-g border: 1px solid # 2d3033 / * a-bar-border * /; border-left: 0px; border-right: 0px; tło: # 6d83a1; kolor: #fff / * a-bar-color * /; waga czcionki: pogrubiona; text-shadow: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px / * a-bar-shadow-radius * / # 3e4957; background-image: -webkit-gradient (liniowy, 0% 0%, 0% 100%, z (# b4bfce), zatrzymanie koloru (0,5, # 899cb3), zatrzymanie koloru (0,505, # 7e94b0), na (# 6d83a1)); background-image: -webkit-linear-gradient (góra, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradient (góra, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * FF3.6 * / background-image: -ms-linear-gradient (góra, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * IE10 * / background-image: -o-linear-gradient (góra, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Opera 11.10+ * / background-image: linear-gradient (góra, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1);

Używam niebieskiego schematu kolorów znalezionego w większości domyślnych aplikacji iOS. Moje tło jest początkowo ustawione na jednolity kolor dla urządzeń, które nie mogą renderować gradientów CSS3. Następnie poniżej używam ograniczników koloru wokół znacznika 50%, aby odtworzyć tradycyjny efekt błyszczącego połysku w stylu Apple. Również w tym samym selektorze nieznacznie zmodyfikowałem cień tekstu z bardziej subtelnym kolorem i zakresem.

Przyciski i efekty tekstowe

Podczas kodowania próbek ważne jest, aby rozważyć, które obszary interfejsu wymagają uwagi. Pasek nagłówka wygląda wspaniale w tym nowym tle, ale ostatnia modyfikacja, którą chciałbym wprowadzić, będzie pasować do stylów przycisków bliższych do stylów aplikacji iOS.

.ui-btn-up-g obramowanie: 1px bryła # 375073; tło: # 4a6c9b; waga czcionki: pogrubiona; kolor: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; box-shadow: brak; -webkit-box-shadow: brak; -moz-box-shadow: brak; background-image: -webkit-gradient (liniowy, 0% 0%, 0% 100%, od (# 89a0be), zatrzymanie koloru (0,5, # 5877a2), zatrzymanie koloru (0,505, # 476999), do (# 4a6c9b)); background-image: -webkit-linear-gradient (góra, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradient (góra, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * FF3.6 * / background-image: -ms-linear-gradient (góra, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * IE10 * / background-image: -o-linear-gradient (góra, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Opera 11.10+ * / background-image: linear-gradient (góra, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); border-radius: 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 border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;  .ui-btn-hover-g border: 1px solid # 1b49a5; tło: # 2463de; waga czcionki: pogrubiona; kolor: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; box-shadow: brak; -webkit-box-shadow: brak; -moz-box-shadow: brak; background-image: -webkit-gradient (liniowy, 0% 0%, 0% 100%, od (# 779be9), zatrzymanie koloru (0,5, # 376fe0), zatrzymanie koloru (0,505, # 2260dd), do (# 2463de)); background-image: -webkit-linear-gradient (góra, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradient (góra, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * FF3.6 * / background-image: -ms-linear-gradient (góra, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * IE10 * / background-image: -o-linear-gradient (góra, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Opera 11.10+ * / background-image: linear-gradient (góra, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;

Obszar kodu, który edytujemy teraz, mieści się w klasach przycisków interfejsu użytkownika. Istnieją 3 różne tryby, którymi należy się zająć: .ui-btn-up-g, .ui-btn-hover-g, i .ui-btn-down-g. Koncentruję się głównie na efektach standardowych (btn-up) i hover (btn-hover), edytując cień pola i gradienty liniowe. Rozszerzyłem również efekt zaokrąglonych rogów, dzięki czemu przyciski wydają się bardziej prostokątne.

Z tego powodu musiałem usunąć wewnętrzny promień granicy z klasy zatytułowanej .ui-btn-inner. Ta klasa zostaje dołączona do elementu zakresu w każdym łączu kotwicy w pasku nagłówka. Bez resetowania właściwości promienia granicy zauważysz małe usterki w projekcie, gdy najedziesz kursorem na przycisk. Gdy poświęcisz więcej czasu na kodowanie w motywach jQuery Mobile, zapamiętasz te małe niuanse dla przyszłych projektów.

Wprowadzenie do ThemeRoller

Jeśli lubisz zabrudzić sobie ręce kodem, zdecydowanie polecam trzymać się własnych zmian. Nie tylko masz większą kontrolę, ale znacznie łatwiej jest debugować problemy w CSS, jeśli sam dokonałeś wszystkich zmian. Jednak dla wielu projektantów proces ten jest męczący i będzie wymagał więcej czasu niż to konieczne. Na szczęście zespół jQuery Mobile wydał edytor online pod nazwą ThemeRoller.

Z tej strony masz dostęp do edycji pierwszych 3 próbek A-C, a nawet tworzenia własnych. Jeśli spojrzysz na lewy pasek boczny, możesz przełączać się między tymi trzema ustawieniami lub szybko wprowadzać zmiany w globalnych opcjach motywu. Należą do nich właściwości CSS, takie jak promienie graniczne, cienie pudełka lub domyślne czcionki stron. Zauważ, że wybierając dowolną z gotowych próbek możemy edytować tylko te same obszary, co poprzednio - górne / dolne paski, zawartość ciała i 3 przyciski stan.

Ale moją ulubioną funkcją musi być bezpośredni dostęp do próbek Adobe Kuler. Możesz utworzyć kilka schematów kolorów na koncie Kuler i zaimportować je do ThemeRoller. Interfejs obsługuje funkcję „przeciągnij i upuść”, więc wypróbowanie kilku różnych pomysłów w ciągu kilku minut jest naprawdę proste.

Ostatecznie nie ma absolutnej metody poprawnego budowania próbek jQM. Niektórzy projektanci wolą twardy kod CSS, podczas gdy inni pokochają intuicyjną aplikację webową ThemeRoller. Dopóki podążasz za strukturą klasy, powinieneś uzyskać te same wyniki w obu kierunkach.

Pomocne zasoby

Motywy jQuery Mobile - Dokumentacja
Używanie i dostosowywanie motywów jQuery Mobile