Przewodnik dla początkujących użytkowników aplikacji mobilnej na jQuery Mobile

W ciągu ostatnich 2-3 lat zaobserwowaliśmy ogromny wzrost obsługi przeglądarek i systemów operacyjnych dla witryn mobilnych. Zwracają uwagę przede wszystkim platformy Apple iOS i Google Android. Ale inne, takie jak PalmOS i Blackberry są nadal w miksie. Do niedawna bardzo trudno było dopasować jeden motyw mobilny do wszystkich tych platform.

JavaScript był początkiem, ale do tej pory nie istniała prawdziwie zunifikowana biblioteka. jQuery Mobile wykorzystuje wszystkie najlepsze funkcje jQuery i przekazuje je do internetowego źródła mobilnego. Biblioteka jest bardziej jak framework, który zawiera animacje, efekty przejścia i automatyczne style CSS dla podstawowych elementów HTML. W tym przewodniku mam nadzieję wprowadzić platformę w taki sposób, abyś czuł się komfortowo projektując własne aplikacje mobilne jQuery.

Funkcje i obsługa systemu operacyjnego

Powodem, dla którego sugeruję, aby uczyć się jQuery Mobile w innych ramach, jest prostota. Kod został zbudowany na rdzeniu jQuery i ma aktywny zespół programistów piszących skrypty i edytujących błędy. Wśród wielu funkcji znajduje się obsługa HTML5, linki nawigacyjne oparte na technologii Ajax oraz programy obsługi zdarzeń Touch / swipe.

Obsługa różni się w zależności od telefonu i jest podzielona na 3 kategorie z A-C. A to najwyższy poziom, który oferuje pełną obsługę jQuery Mobile, B ma wszystko poza Ajaxem, podczas gdy C jest podstawowym HTML z niewielką ilością JavaScript. Na szczęście większość popularnych systemów operacyjnych jest w pełni obsługiwana - dodałem listę poniżej tylko kilku przykładów.

• Apple iOS 3-5
• Android 2.1, 2.2, 2.3
• Windows Phone 7
• Blackberry 6.0, Blackberry 7
• Palm WebOS 1.4-2.0, 3.0

Jeśli chcesz dowiedzieć się więcej, spróbuj przeczytać ich oficjalną stronę z dokumentami. Nie jest napisany bełkotem i rzeczywiście jest bardzo łatwy do naśladowania. Skupmy się teraz na podstawach pisania strony mobilnej jQuery i na tym, jak możemy zbudować małą aplikację!

Standardowy szablon HTML

Aby Twoja pierwsza aplikacja mobilna działała, należy ustawić szablon, od którego należy zacząć. Obejmuje to kod podstawowy jQuery wraz z mobilnym JS i CSS, wszystkie zewnętrzne hostowane z jQuery CDN. Sprawdź mój przykładowy kod poniżej.

Jedynymi obcymi elementami powinny być dwa meta tagi. Szczyt rzutnia tag aktualizuje przeglądarki mobilne, aby korzystać z pełnego efektu powiększenia. Ustawianie wartości szerokość = szerokość urządzenia ustawi szerokość strony dokładnie na szerokości ekranu telefonu. A co najważniejsze, nie wyłącza funkcji powiększania, ponieważ jQuery Mobile może dostosować się do zmieniających się układów.

Następny metatag Kompatybilny z X-UA po prostu zmusza program Internet Explorer do renderowania HTML w najnowszej iteracji. Starsze przeglądarki, a zwłaszcza mobilne, będą próbowały obejść nieznane błędy renderowania.

Konstruowanie treści ciała

Teraz jest to miejsce, w którym jQuery mobile może się skomplikować. Każda strona HTML nie jest koniecznie jedną stroną w witrynie mobilnej. Ramy wykorzystują atrybuty danych HTML5, które można tworzyć z kaprysu, dołączając dane- uprzednio. W podobny sposób data-role = "strona" można ustawić na wiele div w jednym pliku HTML, co daje więcej niż jedną stronę.

Następnie przechodziłbyś między tymi stronami za pomocą linków do zakotwiczenia i unikalnego identyfikatora. Ta konfiguracja jest dobrym pomysłem na podstawowe, proste aplikacje. Jeśli potrzebujesz tylko 3-5 stron, dlaczego nie przechowywać ich w jednym pliku? Chyba że masz dużo napisanych treści, w takim przypadku spróbuj użyć PHP, aby zaoszczędzić czas.

Sprawdź poniższy przykład kodu, jeśli się zgubiłeś.

 
 
 
Najlepszy pasek tytułu
 
 
 
Pokaż inną stronę??
 
podpowiedź: kliknij przycisk poniżej!
 
O nas
 
  
 
 
 
Page 2 Tutaj
 
 
 
tylko trochę dodatkowych treści.
 
To znaczy, możesz Wróć kiedykolwiek.
 
 
   

Spójrz na link kotwicy na stronie indeksu przez chwilę. Zauważ, że dodałem atrybut data-role = "button" aby ustawić link jako przycisk. Ale zamiast używać domyślnych stylów, które zawieramy data-theme = "c". Przełącza między 1 z 5 (tematy a-e) szablonami, które są domyślnie spakowane jako style CSS w jQ Mobile.

Mój przycisk obejmuje również całą szerokość strony. Aby usunąć zachowanie, musimy ustawić element z wyświetlania blokowego na wbudowany. Atrybut do tego jest data-inline = "true" które można dołączyć do dowolnego przycisku kotwicy.

Paski nagłówka i stopki

Na samej górze i dole aplikacji powinieneś dołączać zawartość nagłówka i stopki. Ten styl projektowania jest często przypisywany aplikacjom iOS, które stały się popularne dzięki mobilnemu App Store firmy Apple. jQ Mobile wykorzystuje atrybuty roli danych do definiowania nagłówka, stopki i zawartości strony. Przyjrzyjmy się krótko tym obszarom.

Przyciski górnego paska

Domyślnie górny pasek obsługuje zestaw dwóch (2) linków w podobny sposób do innych aplikacji mobilnych. iOS domyślnie używa a “z powrotem” przycisk w lewo i często “opcje” lub “config” po prawej.

 
 Ustawienia 
Page 2 Tutaj
 
 

Powyższy kod skupia się na kontenerze div dla naszej strony About wraz z zawartością nagłówka. Dodatkowy atrybut HTML data-add-back-btn = "true" będzie działać tylko po dodaniu do roli danych strony. Celem jest automatyczne dołączenie przycisku Wstecz, który działa podobnie do przycisku Wstecz przeglądarki.

Moglibyśmy ręcznie dodać przycisk Wstecz z podobnym kodem, tak jak w przypadku zawartości. Ale wydaje mi się, że konfiguracja zajmuje dużo więcej czasu, zwłaszcza na wielu stronach. Wszystkie linki zakotwiczone w sekcji nagłówka będą domyślnie ustawione w pozycji lewego / prawego przycisku. Używając class = "ui-btn-right" to zmieniło mój przycisk Ustawienia, dzięki czemu jest wolne miejsce na przycisk Wstecz. Używam też dodatkowych stylów motywów, aby nadać im trochę dodatkowego spun!

Nawigacja stopki

Obszar stopki wielu z początku nie wydaje się bardzo przydatny. To miejsce, w którym możesz przechowywać rzeczy chronione prawami autorskimi i ważniejsze linki, ale można to równie łatwo dodać na dole obszaru zawartości. Więc co dobrego używa stopka?

Cóż, najlepszy przykład, jaki widziałem, wykorzystuje przestrzeń stopki jako system nawigacji, w którym linki do zakładek wydają się kontrolować nawigację po stronie. Istnieje wiele opcji, w których można wybierać efekty pełnoekranowe, dodawać ikony, dostosowywać rozmieszczenie oraz kilka innych atrybutów. Ale zbudujmy prostą nawigację stopką z 3 przyciskami, aby dowiedzieć się, jak to działa.

• Podgląd demonstracji na żywo

Oto kod stopki dla sekcji o stronie. data-role = "navbar" należy dodać do elementu kontenera zawierającego nieuporządkowaną listę, a NIE do samego elementu UL. Każdy link na liście jest traktowany jako pasek kart, który następnie zostaje równo podzielony na podstawie całkowitej liczby linków. Dodatkowa klasa ui-body-b po prostu dodaje efekty estetyczne, ponieważ przełączamy się między kilkoma dostępnymi stylami.

Jeśli zauważysz na pierwszym przycisku, mam atrybut data-direction = "reverse". Mimo że mogłem użyć ustawienia przycisku Wstecz tak jak poprzednio, aby wrócić na stronę główną, zamiast tego użyłem identyfikatora strony #indeks. Domyślnie okno aplikacji przejdzie w prawo, co wygląda dość tandetnie, ponieważ oczekuje się, że animacja przesunie się do tyłu. Jeśli masz czas, możesz bawić się jeszcze większą ilością tych animowanych efektów. Sprawdź stronę informacji o przejściach w dokumentacji jQuery.

Strony Ajax i dynamiczne

Pierwszy segment naprawdę otworzył kluczowe punkty do zbudowania aplikacji mobilnej z jQuery. Ale chcę uruchomić nową aplikację, która ładuje dane ze strony zewnętrznej. Użyję bardzo prostego skryptu PHP, aby uzyskać $ _REQUEST [] zmienna i odpowiednio wyświetl mały strzał Dribbble. Poniższy ekran powinien dać ci pojęcie, co zbudujemy.

Najpierw ustawię stronę index.html na domyślnym szablonie. Do tego ekranu głównego używam ustawień widoku listy, aby wyświetlić każde łącze w kolejności. Odbywa się to w obszarze zawartości za pomocą data-role = "listview" atrybut w kontenerze listy. Wycinając te same nagłówki, co poprzednio, dodałem cały mój kod z tej nowej strony indeksu poniżej.

 
 
 
Październik 2011 Zdjęcia
 
 
 
 
Pierwszy obraz
 
Drugi obraz
 
Trzeci obraz
 
Czwarty obraz
 
 
  
   

Każde z linków zakotwiczenia w moim widoku listy wskazuje na ten sam plik - index.php. Ale przekazujemy parametr imgid jako zmienna żądania. W pliku image.php pobieramy identyfikator i testujemy go na 4 wstępnie ustawionych wartościach. Jeśli jakieś dopasowanie się zgadza, używamy pasującego adresu URL obrazu i tytułu, w przeciwnym razie wyświetlamy tylko domyślny strzał Dribbble.

Skrypt programu ładującego obraz

Skrypt image.php nadal zawiera domyślny szablon mobilny jQuery dodany do kodu. W rzeczywistości ma bardzo podobny nagłówek i stopkę, z wyjątkiem dodania naszego atrybutu łącza wstecznego data-add-back-btn = "true". Zauważ, że ten przycisk pojawi się tylko wtedy, gdy zaczniemy od index.html! Spróbuj bezpośrednio załadować image.php i nic się nie pojawi, ponieważ nie ma “z powrotem” przenieść się do.

Myślę, że możemy lepiej zrozumieć kod, analizując najpierw moją logikę PHP. Używamy przełącznik / walizka metoda sprawdzania pod kątem 4 różnych identyfikatorów i podawania tytułu nagłówka, adresu URL obrazu i oryginalnego linku źródłowego wykonawcy.

Wszystko wydaje się dość proste - nawet początkujący dev PHP powinien być w stanie śledzić! A jeśli nie rozumiesz, nie jest to ważne dla kodu jQuery, więc nie martw się. Powinniśmy przejść teraz i spojrzeć na szablon, który zbudowałem na tej nowej stronie. Cały kod HTML jest dodawany po tym całym bloku PHP powyżej. Użyłem identyfikatora “obrazy” dla kontenera, a nawet ustawić nagłówek, aby zmienić z każdym nowym zdjęciem.

 
 
 
 
 
 Wyświetl oryginał
 
www.dribbble.com
 
 

 
 
  
Zadania Wunderkit
 
Sebastian Scheerer
 
  
Colleeeeeeeeeeeeege
 
Scott Hill
 
  
Aplikacja Forum na Facebooku
 
Ionut Zamfir
 
  
Świergot
 
Sam Jones
 
 
 

Klasy dla ui-li-nagłówek i ui-li-desc są domyślnie dodawane do arkusza stylów jQuery Mobile. Jest to podobne do klasy obrazu ui-li-thumb który automatycznie zmienia rozmiar każdego paska widoku listy w zależności od wysokości obrazu. Teraz możesz zbudować więcej na frontend z animacjami, efektami stron, arkuszami stylów itp.

Alternatywnie można rozpocząć tworzenie systemu zaplecza, aby przesyłać nowe obrazy i automatycznie przycinać miniatury, aby uwzględnić je na liście. Dzięki jQuery Mobile jest tak wiele elastyczności, że prawie nie można oznaczyć go wyłącznie jako biblioteką JavaScript. To więcej niż cały framework HTML5 / CSS / jQuery do budowania szybkich i skalowalnych aplikacji mobilnych.

Wniosek

Podczas pisania tego artykułu zespół jQuery Mobile oficjalnie wydał RC1.0 biblioteki kodu. Oznacza to, że większość, jeśli nie wszystkie główne poprawki błędów zostały zmiażdżone, a teraz testerzy przygotowują się do pełnej wersji. Z tego powodu w Internecie nie znajdziesz wielu informacji.

Ale z upływem miesięcy twórcy stron internetowych z pewnością podążą za trendem. Aplikacje mobilne, a nawet mobilne układy internetowe zyskują na popularności wraz ze wzrostem liczby smartfonów. Twórcy stron internetowych nie mają czasu na naukę pełnego języka programowania do tworzenia aplikacji na Androida / iOS. Zatem jQuery Mobile to smukła alternatywa, która obejmuje wsparcie dla większości oprogramowania dla branży mobilnej i nadal rośnie każdego dnia z aktywną społecznością programistów.