Zawartość
- 01. Bary (.ui-bar-?)
- 02. Bloki treści (.ui-body-?)
- 03. Przyciski i widoki list (.ui-btn-?)
- 04. Mieszanie i dopasowywanie próbek
- 05. Stan aktywny w całej witrynie
- 06. Ikony domyślne
- 07. Tworzenie i używanie motywu niestandardowego
- 08. Co to jest ThemeRoller?
- 09. Korzystanie z ThemeRoller
- 10. Podgląd
- 11. Kolory
- 12. Inspektor
- 13. Narzędzia
- 14. Tworzenie motywu dla Notekeepera
- 15. Eksportowanie motywu
- Potrzebna wiedza: HTML, trochę CSS i JavaScript
- Wymaga: Nic więcej niż Twój ulubiony edytor HTML i przeglądarka
- Czas projektu: Dwie godziny
- Plik wsparcia
To jest zredagowany fragment rozdziału 11 jQuery Mobile Web Development Essentials, opublikowanego przez Packt Publishing.
Motywowanie w jQuery Mobile jest proste i proste w użyciu dla programisty, ale za kulisami jest dość skomplikowane. Na szczęście rzadko kiedy będziesz musiał wiedzieć wszystko, co jest dla Ciebie robione. Warto jednak poświęcić trochę czasu, aby zrozumieć, jak to działa.
Po wyjęciu z pudełka jQuery Mobile zawiera zestaw motywów składający się z pięciu próbek kolorów, z których każda jest powiązana z literą od A do E. Motyw zawiera szereg podstawowych klas CSS, które można dowolnie zastosować do prawie każdego elementu i zawierają globalne ustawienia szerokości, wysokości, promienia obramowania, cieni. Poszczególne próbki zawierają określone informacje o kolorze, czcionkach i tak dalej.
Dodatkowe próbki można dodać do pięciu oryginalnych próbek od F-Z lub oryginalne próbki można dowolnie zastępować lub nadpisywać. Ten system umożliwia w sumie 26 różnych próbek, co pozwala na miliony możliwych kombinacji kolorów, stylów i wzorów motywu. Stosujesz motyw jQuery Mobile do wybranego elementu, dodając atrybut Data-Theme z literą żądanego motywu:
Programiści zazwyczaj wybierają metodę atrybutu motywu danych podczas stosowania stylów, ale możliwe jest również dołączenie nazw klas CSS bezpośrednio do elementów strony, aby uzyskać bardziej szczegółową kontrolę. Istnieje kilka głównych przedrostków, które pozwalają na taką elastyczność.
01. Bary (.ui-bar-?)
Prefiks słupka jest zwykle stosowany do nagłówków, stopek i innych obszarów o dużym znaczeniu:
02. Bloki treści (.ui-body-?)
Bloki treści są zwykle stosowane do obszarów, w których spodziewany jest tekst akapitowy. Jego kolor pomaga zapewnić maksymalną czytelność z umieszczonym na nim kolorem tekstu:
03. Przyciski i widoki list (.ui-btn-?)
Przyciski i widoki list to dwa najważniejsze elementy w bibliotece jQuery Mobile i możesz mieć pewność, że zespół nie spieszył się z ich poprawieniem. Przedrostek .ui-btn zawiera również style dla stanów up, down, hover i active:
04. Mieszanie i dopasowywanie próbek
Jedną z fajnych rzeczy w tworzeniu motywów w jQuery Mobile jest to, że elementy potomne dziedziczą po swoim rodzicu, chyba że określono inaczej. Oznacza to, że jeśli umieścisz przycisk bez własnego atrybutu tematu danych wewnątrz paska nagłówka lub stopki, ten przycisk będzie używał tego samego motywu, co jego element nadrzędny. Wicked, co?
Jest również całkowicie dopuszczalne, a nawet zalecane, umieszczanie elementu przy użyciu jednej próbki i elementu podrzędnego elementu przy użyciu innej próbki. Może to pomóc elementowi bardziej się wyróżnić lub dopasować do innej części aplikacji lub z dowolnego powodu wybranego przez programistę. Jest to możliwe, a co więcej, jest to łatwe. Po prostu umieść przycisk (lub inny element) wewnątrz paska nagłówka i przypisz mu własny atrybut tematu danych:
05. Stan aktywny w całej witrynie
jQuery Mobile stosuje również globalny stan aktywny dla wszystkich elementów. Ten stan aktywny jest używany w przypadku przycisków, elementów formularzy, nawigacji i wszędzie tam, gdzie istnieje potrzeba wskazania, że coś jest aktualnie wybrane. Jedynym sposobem zmiany tej wartości koloru jest ustawienie (lub zastąpienie) jej za pomocą CSS.Klasa CSS dla stanu aktywnego to odpowiednio nazwana .ui-btn-active:
06. Ikony domyślne
W zestawie jQuery Mobile znajduje się 18 ikon, które odpowiadają szerokiemu wachlarzowi potrzeb programistów. Zestaw ikon jest biały na przezroczystym, który jQuery Mobile nakłada się na półprzezroczyste czarne kółko, aby zapewnić kontrast ze wszystkimi próbkami. Aby dodać ikonę, określ atrybut ikony danych z nazwą żądanej ikony:
jQuery Mobile zapewnia również możliwość umieszczania ikon na górnej, prawej, dolnej lub lewej stronie przycisku za pomocą atrybutu data-iconpos = "[top, right, bottom, left]", przy czym lewa jest domyślnym miejscem docelowym. Programiści mogą również wyświetlać samą ikonę, bez tekstu, podając data-iconpos = "notext":
Wdrażanie ikon niestandardowych jest również możliwe i zostanie omówione w dalszej części tego rozdziału.
07. Tworzenie i używanie motywu niestandardowego
Omówiliśmy już, jak potężne są motywy w jQuery Mobile. To sprawia, że stworzenie bogatej witryny mobilnej o prostym i eleganckim stylu jest banalne. Jeszcze potężniejsza jest możliwość tworzenia własnej biblioteki próbek, dzięki której Twoja aplikacja lub witryna internetowa będzie naprawdę wyjątkowa. Opracowanie własnego motywu można podejść na jeden z następujących dwóch sposobów:
- Pobierz i otwórz istniejący plik CSS jQuery Mobile i edytuj do woli.
- Skieruj swoją przeglądarkę internetową na ThemeRoller dla jQuery Mobile.
Skoncentrujemy się wyłącznie na opcji drugiej, ponieważ bądźmy szczerzy, po co brodzić przez cały ten CSS, skoro możesz wskazywać, klikać i przeciągać do nowego motywu, pełnego próbek w 10 minut? Zobaczmy, o co chodzi w ThemeRoller.
08. Co to jest ThemeRoller?
ThemeRoller dla jQuery Mobile to rozszerzenie aplikacji internetowej, która została napisana dla projektu jQuery UI. Pozwala użytkownikom szybko skompletować motyw pełen próbek w ciągu kilku minut za pomocą zarządzania kolorami metodą „przeciągnij i upuść”. Zawiera interaktywny podgląd, dzięki czemu można od razu zobaczyć, jak zmiany wpływają na motyw. Ma również wbudowane narzędzie inspektora, które pomaga zagłębić się w najdrobniejsze szczegóły (jeśli ich chcesz). Integruje się również z Adobe® Kuler®, narzędziem do zarządzania kolorami. Gdy skończysz, możesz pobrać motyw, udostępnić go innym za pośrednictwem niestandardowego adresu URL i ponownie zaimportować poprzednie motywy, aby w ostatniej chwili wprowadzić poprawki. To potężne narzędzie i doskonałe uzupełnienie jQuery Mobile.
Jedną z cech charakterystycznych pięciu domyślnych próbek jest to, że zespół jQuery Mobile spędził sporo czasu nad czytelnością i użytecznością. Próbki obejmują zakres od najwyższego kontrastu (A) do najniższego kontrastu (E). W ramach jednego motywu obszary, które mają największy kontrast, to te najbardziej widoczne na stronie. Obejmuje to nagłówek (i nagłówki widoku listy) i przyciski. Tworząc własny motyw, warto o tym pamiętać. Zawsze chcemy skupiać się na użyteczności naszej aplikacji, prawda? Po co zręczna aplikacja, jeśli nikt nie może jej przeczytać z powodu złego wyboru kolorów?
09. Korzystanie z ThemeRoller
Pierwszą rzeczą, którą zobaczysz po załadowaniu ThemeRoller, jest zgrabnie wyglądający ekran powitalny, a po nim pomocny ekran Pierwsze kroki:
Na ekranie Pierwsze kroki znajdziesz kilka przydatnych wskazówek, więc rzuć na niego okiem, zanim klikniesz przycisk Get Rolling:
Po tym, jak wszystkie ekrany powitalne znikną, pojawi się główny interfejs:
ThemeRoller jest podzielony na cztery główne obszary: Podgląd, Kolor, Inspektor i Narzędzia. Każdy z nich zawiera ważne funkcje, które musimy przejrzeć. Zaczniemy od sekcji Podgląd.
10. Podgląd
O ile nie wczytujesz istniejącego motywu, obszar podglądu będzie zawierał trzy kompletne, identyczne i interaktywne strony jQuery Mobile wypełnione różnego rodzaju widżetami:
Najedź na nie myszą, a zobaczysz, że każda strona działa. Nagłówek każdej strony zawiera literę wskazującą, która próbka kontroluje jej wygląd.
11. Kolory
U góry strony zobaczysz serię kolorów wraz z dwoma suwakami i przyciskiem przełączania. Dalej po prawej stronie zobaczysz kolejne dziesięć kolorowych znaczników, które powinny być puste. Są one przeznaczone dla ostatnio używanych kolorów i będą puste, dopóki nie wybierzesz koloru:
Poniżej znaczników kolorów znajdują się dwa suwaki oznaczone jako Jasność i Nasycenie. Suwak jasności dostosowuje jasne i ciemne odcienie serii próbek kolorów, podczas gdy nasycenie sprawia, że kolory są bardziej lub mniej żywe. Podsumowując, użytkownik powinien być w stanie przybliżyć prawie każdy wybrany przez siebie kolor. Aby użyć kolorów z serwisu Kuler, kliknij łącze tekstowe oznaczone jako próbki Adobe Kuler.
Każdy ze znaczników koloru można przeciągnąć na dowolny element w obszarze podglądu. To sprawia, że tworzenie zestawu próbek jest niezwykle łatwe. Zwróć uwagę, że wiele stylów jQuery Mobile nakłada się na siebie, na przykład pasek nagłówka u góry strony ma ten sam styl, co nagłówek widoku listy. Dostosuj kolory według potrzeb, a następnie przeciągnij każdy żeton na element na stronie. Pamiętaj, że każda strona to osobna próbka, więc uważaj na to, jak wybierasz mieszanie kolorów.
12. Inspektor
Po lewej stronie interfejsu znajduje się panel inspektora, podzielony na dwie części. W górnej części znajdują się przyciski umożliwiające programistom pobranie ich motywu, zaimportowanie istniejącego motywu i udostępnienie łącza do motywu. Jest też link Pomoc dla osób, które nie kupiły tej książki:
Dolna sekcja zawiera serię zakładek oznaczonych jako Globalne, A, B, C i +. Na każdej z tych kart znajduje się panel harmonijki, który zawiera wszystkie wartości dla indywidualnej próbki, z wyjątkiem karty Globalne, która ma zastosowanie do wszystkich próbek.
Wybierz kartę Globalne, a następnie kliknij opcję Stan aktywny, a panel harmonijki rozwinie się, pokazując ustawienia stanu aktywnego dla całego motywu. Opcje obejmują kolor tekstu, cień tekstu, tło i obramowanie. Zmiana wartości globalnej powoduje, że każda obecna (i przyszła) próbka odzwierciedla nowe ustawienie.
Dodatkowe próbki można dodać do motywu na dwa sposoby. Kliknięcie zakładki + u góry inspektora dodaje nową próbkę na ostatnim miejscu motywu. Możesz także dodać nową próbkę, klikając przycisk Dodaj próbkę znajdujący się u dołu obszaru podglądu. Próbki można usunąć, wybierając kartę z próbką, którą chcesz usunąć, a następnie klikając łącze Usuń znajdujące się po prawej stronie nazwy próbki. Zwróć uwagę, że usunięcie próbki z góry stosu spowoduje zmianę nazwy pozostałych próbek.
13. Narzędzia
Na samej górze strony znajduje się seria przycisków. Te przyciski umożliwiają wykonywanie różnych zadań, które za chwilę omówimy, ale najpierw przyjrzyjmy się bliżej samym przyciskom:
Zauważysz następujące przyciski: przełącznik umożliwiający przełączanie między wersją 1.1 (bieżącą) a wersją 1.0.1, cofnij / ponów oraz przycisk przełączania dla inspektora. Włączenie tego przełącznika umożliwia sprawdzenie dowolnego widżetu w obszarze podglądu. Najechanie kursorem na widżet powoduje podświetlenie tego elementu niebieskim prostokątem. Kliknięcie elementu spowoduje rozwinięcie menu harmonijki w obszarze Inspektora w celu wyświetlenia ustawień specyficznych dla tego elementu.
Dostępne są cztery dodatkowe przyciski, które umożliwiają pobranie motywu, importowanie lub aktualizowanie wcześniej utworzonego motywu, udostępnianie motywu innym oraz przycisk pomocy.
14. Tworzenie motywu dla Notekeepera
Skoro już znamy interfejs ThemeRoller, co powiesz na stworzenie naszego pierwszego motywu? Zamiast tworzyć abstrakcję, stwórzmy taką, której będziemy używać w aplikacji Notekeeper, którą stworzyliśmy wcześniej. Zacznijmy od zmodyfikowania jednego z istniejących motywów, który jest dostarczany z jQuery Mobile. Zespół był na tyle uprzejmy, że pozwolił użytkownikom zaimportować domyślne motywy jako miejsce startu dla nowych motywów, więc to właśnie tam skierujemy się w pierwszej kolejności. Kliknij przycisk Importuj w lewym górnym rogu okna, a pojawi się okno umożliwiające wklejenie zawartości istniejącego motywu:
Zaimportuj motyw domyślny, klikając łącze w prawym górnym rogu, odpowiednio zatytułowane Importuj motyw domyślny. Po wypełnieniu pola tekstowego kodem CSS kliknij Importuj. Obszar podglądu załaduje się ponownie i wyświetli próbki od A do E.
Skoncentrujemy się na zmianie białej próbki D, ponieważ jest ona najbliższa naszemu końcowemu celowi. Ponieważ wolelibyśmy użyć próbki A jako nazwy, usuńmy pozostałe próbki, tak aby zostało tylko D. Pamiętaj, że ThemeRoller zmienia nazwy próbek, gdy inne są usuwane. Oznacza to, że po usunięciu próbki A B staje się A, C staje się D i tak dalej.
Kontynuuj, aż próbka, która była D, znajdzie się teraz w pozycji A. Na koniec usuń próbkę B (która wcześniej była próbką E), aby pozostała tylko próbka A:
Ta próbka wygląda ładnie, ale jest trochę nijaka. Dodajmy trochę koloru, zmieniając nagłówek na ładną zieleń. Najprostszym sposobem określenia, jakie wartości należy zmienić dla dowolnego elementu, jest skorzystanie z inspektora. Przełącz inspektora na Włączony u góry, a następnie kliknij w dowolnym miejscu nagłówka motywu A. Jeśli karta A jest zaznaczona po lewej stronie, a panel paska nagłówka / stopki rozszerzy się, dowiesz się, czy wszystko działa prawidłowo:
Możesz zmienić kolor na jeden z kilku sposobów. Możesz przeciągnąć znacznik koloru z góry bezpośrednio na tło. Możesz także przeciągnąć kolorowy znacznik na pole wejściowe. Wreszcie możesz ręcznie wprowadzić wartość. Zwróć uwagę, że po kliknięciu pola zawierającego wartość koloru otrzymujesz zręczny próbnik kolorów. Śmiało i zmień wartości w polach wejściowych w tym panelu na wartości pokazane na poprzednim zrzucie ekranu.
Wygląda dobrze, ale teraz niebieski z aktywnego stanu motywu zderza się z naszym zielonym. Korzystając z narzędzia inspektora, kliknij raz w sekcji Włącz na pasku przełączania Wł. / Wył. Powinno to spowodować rozwinięcie panelu Stan aktywny na karcie Globalne. Zmienimy niebieski na przyjemny ciepły szary. Panel globalny powinien teraz wyglądać podobnie do poniższego zrzutu ekranu:
Jest tylko jedna rzecz, która powstrzymuje nasz nowy motyw przed najgorętszym wyglądem - niebieski link tekstowy w akapicie u góry. Wracając do naszego zaufanego inspektora, kliknijmy bezpośrednio link, który rozwinie panel Treść treści na karcie A. Teraz, dla tych, którzy już znają CSS, wiesz, że nie możesz po prostu zmienić koloru linku bez zmiany wskaźnika najechania, odwiedzone: po najechaniu i aktywne stany. Problem polega na tym, że nie ma opcji wprowadzania tych zmian, ale ThemeRoller zapewnia Ci ochronę. Kliknij znak + po prawej stronie pola wprowadzania Kolor łącza, aby wyświetlić pozostałe opcje, a następnie zmień kolory, jak pokazano na poniższym zrzucie ekranu:
I to jest to. Możesz swobodnie wprowadzać dodatkowe zmiany w swoim motywie podczas eksploracji obszaru inspektora. Zmień, co chcesz, teraz to tylko bity i bajty. Pamiętaj jednak, że w tej chwili nie ma możliwości cofnięcia. Jeśli naprawdę coś ci się podoba, rozważ zapisanie wartości, aby ich nie stracić, lub wyeksportowanie ich takimi, jakie są. Mówiąc o...
15. Eksportowanie motywu
Zanim wyeksportujemy nasz motyw, należy zwrócić uwagę na jedną rzecz. Pamiętasz stronę powitalną z „pomocnymi” informacjami? Okazuje się, że jest jeden element, który nie jest zaleceniem, ale wymogiem.
Zalecamy tworzenie motywów z co najmniej 3 próbkami (A-C).
Aby nasz motyw został prawidłowo zastosowany w naszej aplikacji Notekeeper, musimy skopiować naszą pojedynczą próbkę (litera A) do próbek B i C. Na szczęście jest to łatwa rzecz. Wybierz kartę A u góry inspektora, a następnie kliknij dwukrotnie kartę +. Powinieneś zobaczyć trzy identyczne próbki. Gotowe.
Teraz, gdy skończyliśmy nasz motyw, zamierzamy wyeksportować go do użycia w naszej aplikacji Notekeeper. Jest to prosty proces, który rozpoczyna się od kliknięcia przycisku Pobierz motyw znajdującego się na środku strony, u góry interfejsu. Zostanie wyświetlone pole, w którym możesz nazwać swój motyw, kilka informacji o tym, jak go zastosować, oraz przycisk oznaczony jako Pobierz Zip. Po nazwaniu naszego motywu Notekeeper, kliknij przycisk Pobierz Zip, a otrzymasz smaczny mały kąsek w folderze pobierania.
Wyodrębnij zawartość pliku ZIP, a zobaczysz następującą strukturę katalogów:
- index.html
- motywy / Notekeeper.css (nieskompresowana wersja Twojego motywu) Notekeeper.min.css (wersja skompresowana. Użyj tego w produkcji) images / ajax-loader.gif icons-18-black.png icons-18-white.png icons -36-black.png icons-36-white.png
Plik HTML w górnej części drzewa zawiera informacje o tym, jak zaimplementować motyw, a także kilka widżetów, które potwierdzają, że motyw działa. Wszystkie linki są względne w przykładowym pliku, więc powinieneś móc przeciągnąć go do dowolnego okna przeglądarki i zobaczyć wyniki.
Kilka uwag na temat pobierania i wdrażania motywów:
1. Zespół jQuery nie bez powodu udostępnia ikony przycisków w tym pliku ZIP. Motyw wymaga, aby te obrazy były względne w stosunku do pliku CSS. Oznacza to, że jeśli nie korzystasz już z domyślnych motywów, musisz również dołączyć folder z obrazami podczas przesyłania motywu do serwisu WWW. W przeciwnym razie ikony nie pojawią się.
2. Trzymaj się nieskompresowanej wersji swojego motywu. Chociaż nie chcesz go używać w środowisku produkcyjnym ze względu na rozmiar, będziesz go potrzebować, jeśli kiedykolwiek zechcesz edytować go w ThemeRoller. ThemeRoller nie może w chwili pisania tego tekstu zaimportować zminimalizowanego pliku CSS.
Andy Matthews jest programistą aplikacji od ponad 16 lat i posiada umiejętności w zakresie UI / UX, projektowania graficznego i programowania. Jest mówcą, programistą open source i wraz z rodziną mieszka w Nashville w stanie TN. Jest @commadelimited na Twitterze.
Raymond Camden jest starszym ewangelistą programistów Adobe. Jego praca koncentruje się na standardach internetowych, programowaniu mobilnym i ColdFusion. Jest autorem publikacji i prezentuje na konferencjach i grupach użytkowników na różne tematy. Śledź go na @cfjedimaster.
