Twórz aplikacje za pomocą jQuery Mobile

jQuery Mobile jest wtyczką oryginalnego jQuery i wymaga wcześniejszej instalacji tego ostatniego aby móc funkcjonować.
Raz aktywny, jQuery Mobile robi dwie rzeczy:

Po pierwsze, optymalizuje natywne funkcje, aby poprawić ich wydajność na urządzeniach mobilnych.
Po drugie, modyfikuje HTML i generuje układ z serią predefiniowanych elementów graficznych, co znacznie przyspiesza szybkość produkcji.

Zainstaluj jQuery Mobile
Chociaż jest możliwa i bardzo powszechna technika na stronach internetowych, aby zainstalować jQuery Mobile poprzez bezpośrednie linkowanie do plików przechowywanych w chmurze, zdecydowanie nie zaleca się stosowania tej techniki w aplikacjach PhoneGap. Bardzo często Twoja aplikacja będzie używana bez połączenia z Internetem lub z połączeniem przerywanym. Jeśli pliki jQuery są połączone z dokumentami w chmurze, aplikacja prawdopodobnie stałaby się bezużyteczna.
Aby zainstalować ten framework, pierwszą rzeczą, którą powinieneś zrobić, to pobrać jQuery z jego oficjalnej strony:

http://docs.jQuery.com/Downloading_jQuery#Current_Release

Po pobraniu jQuery musisz pobrać wtyczkę jQuery Mobile z jej oficjalnej strony internetowej:

http://jquerymobile.com/download/

Zaczniemy od przykładu, który pozwoli nam zrozumieć programowanie i strukturę aplikacji.
Stworzymy plik html z następującym kodem

 Aplikacja mobilna JQuery 

jQuery Mobile pozwala nam bardzo szybko i przy stosunkowo niewielkim wysiłku tworzyć interfejsy przyjazne dla urządzeń mobilnych.
Sposób, w jaki to działa, polega na przepisaniu oryginalnego kodu dokumentu i wygenerowaniu nowego, bardziej złożonego, zgodnie z charakterystyką i żądanymi argumentami.
Interesującą cechą jQuery Mobile jest to, że w przeciwieństwie do strony internetowej, która przechodzi z jednego dokumentu HTML do drugiego w celu wyświetlenia informacji, strony lub ekrany aplikacji obsługiwane są z jednego dokumentu HTML.
Strony lub ekrany znajdują się w jednym pliku, jQuery Mobile zarządza nimi, aby pokazać tylko część dokumentu odpowiadającą każdemu ekranowi, podczas gdy reszta pozostaje ukryta. W ten sposób ładowanie stron jest znacznie przyspieszone, pozwala też na zarządzanie zdarzeniami i animacjami między jednym ekranem a drugim.
jQuery Mobile w pełni wykorzystuje nowe elementy HTML5 i intensywnie wykorzystuje niestandardowe atrybuty zdefiniowane za pomocą prefiksu „data-”
Na przykład rola danych, jeden z najczęściej używanych atrybutów w jQuery Mobile, pozwala zdefiniować rolę na poziomie funkcjonalności i wyglądu elementu, który ją zawiera. Definiując rolę elementu, ten atrybut umożliwia tworzenie stron, przycisków, menu i wielu innych elementów.
Wstawiając atrybut data-role w dowolnym tagu, czynimy z niego element interfejsu. Nie musisz dodawać żadnego dodatkowego kodu jQuery dodaj wszystkie elementy graficzne, klasy, a nawet animacje niezbędne do działania danego elementu.
Na przykład, aby utworzyć stronę, użyj atrybutu rola-danych = ”strona” zatem:

Ekran 1
Ekran 2

Wracać

Przykładowy link nie tylko pozwala przejść do ekranu 2, jQuery Mobile automatycznie dołączył animację przejścia, aby nadać jej wygląd podobny do natywnej aplikacji.
Przejdźmy do linku, który właśnie stworzyliśmy, trochę dalej i dodajmy atrybut data-role = ”button” jQuery Mobile, aby ten link zachowywał się jak przycisk:
Aby powrócić do strony głównej można zastosować poprzednią technikę łączenia linku z id strony głównej lub jeszcze prościej można użyć atrybutu data-rel = ”wstecz” co powoduje powrót aplikacji do bezpośrednio poprzedniego ekranu .Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt