jQuery Mobile - Szybki przewodnik

JQuery Mobile to struktura interfejsu użytkownika, która jest oparta na jQuery Core i służy do tworzenia responsywnych witryn internetowych lub aplikacji dostępnych na urządzeniach mobilnych, tabletach i komputerach. Wykorzystuje funkcje jQuery i jQuery UI, aby zapewnić funkcje API dla mobilnych aplikacji internetowych.

Został opracowany przez zespół projektowy jQuery w roku 2010 i napisany w JavaScript.

Dlaczego warto korzystać z jQuery Mobile?

  • Tworzy aplikacje internetowe, które będą działać w ten sam sposób na urządzeniach mobilnych, tabletach i komputerach.

  • Jest kompatybilny z innymi frameworkami, takimi jak PhoneGap, Whitelight itp.

  • Zapewnia zestaw przyjaznych dla dotyku danych wejściowych i widżetów interfejsu użytkownika.

  • Stopniowe ulepszenie zapewnia unikalną funkcjonalność na wszystkich platformach mobilnych, tabletach i komputerach stacjonarnych oraz dodaje wydajne ładowanie stron i szerszą obsługę urządzeń.

Funkcje jQuery Mobile

  • Jest zbudowany na bazie jQuery Core i "pisz mniej, rób więcej".

  • Jest to platforma typu open source, kompatybilna z wieloma platformami i różnymi przeglądarkami.

  • Jest napisany w JavaScript i wykorzystuje funkcje jQuery i jQuery UI do tworzenia witryn przyjaznych dla urządzeń mobilnych.

  • Integruje HTML5, CCS3, jQuery i jQuery UI w jedną strukturę do tworzenia stron przy minimalnej liczbie skryptów.

  • Zawiera system nawigacji Ajax, który wykorzystuje animowane przejścia stron.

Zalety jQuery Mobile

  • Łatwo jest nauczyć się i rozwijać aplikacje, jeśli znasz HTML5, funkcje CSS3.

  • Jest kompatybilny z różnymi platformami i przeglądarkami, więc nie musisz się martwić pisaniem innego kodu dla każdej rozdzielczości urządzenia.

  • Możesz utworzyć motyw niestandardowy za pomocą ThemeRoller bez pisania wiersza kodu. Obsługuje wszystkie przeglądarki HTML5.

  • Używa HTML5 wraz z JavaScript do łatwego tworzenia aplikacji internetowych.

  • Jest zbudowany w sposób, który umożliwia automatyczne skalowanie tego samego kodu z ekranu telefonu komórkowego na ekran komputera.

Wady jQuery Mobile

  • Istnieje ograniczona liczba opcji dla motywów CSS, więc witryny mogą wyglądać podobnie, które są tworzone przez te motywy.

  • Aplikacje opracowane przy użyciu jQuery Mobile działają wolniej na telefonach komórkowych.

  • Połączenie jQuery mobile z innymi platformami mobilnymi staje się bardziej czasochłonne.

  • Trudne do zapewnienia pełnego, niestandardowego projektu wizualnego.

  • Wszystkie funkcje urządzenia nie są dostępne za pomocą JavaScript w przeglądarce.

W tym rozdziale omówimy, jak zainstalować i skonfigurować jQuery Mobile.

Pobierz jQuery Mobile

Po otwarciu linku jquerymobile.com/ zobaczysz dwie możliwości pobrania biblioteki mobilnej jQuery.

  • Custom Download - Kliknij ten przycisk, aby pobrać dostosowaną wersję biblioteki.

  • Latest Stable - Kliknij ten przycisk, aby uzyskać stabilną i najnowszą wersję mobilnej biblioteki jQuery.

Niestandardowe pobieranie za pomocą narzędzia Download Builder

Korzystając z narzędzia Download Builder, możesz utworzyć kompilację niestandardową zawierającą tylko te części biblioteki, których potrzebujesz. Po pobraniu nowej, dostosowanej wersji jQuery Mobile, zobaczysz następujący ekran.

Możesz wybrać biblioteki zgodnie z potrzebami i kliknąć Build My Download przycisk.

Stabilne pobieranie

Kliknij przycisk Stabilny , który prowadzi bezpośrednio do pliku ZIP zawierającego pliki CSS i JQuery, aby uzyskać najnowszą wersję biblioteki mobilnej jQuery. Wyodrębnij zawartość pliku ZIP do katalogu mobilnego jQuery.

Ta wersja zawiera wszystkie pliki, w tym wszystkie zależności, dużą kolekcję demonstracji, a nawet zestaw testów jednostkowych biblioteki. Ta wersja jest pomocna w rozpoczęciu pracy.

Pobierz bibliotekę jQuery z sieci CDN

CDN (Content Delivery Network) to sieć serwerów zaprojektowanych do udostępniania plików użytkownikom. Jeśli korzystasz z łącza CDN na swojej stronie internetowej, przenosi to odpowiedzialność za hosting plików z własnych serwerów na szereg serwerów zewnętrznych. Daje to również tę zaletę, że jeśli odwiedzający Twoją stronę internetową pobrał już kopię jQuery mobile z tej samej sieci CDN, nie będzie trzeba jej ponownie pobierać. Do dokumentu HTML można dołączyć następujące pliki CDN.

//The jQuery Mobile CSS theme file (optional, if you are overriding the default theme)
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

//The jQuery core JavaScript file
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>

//The jQuery Mobile core JavaScript file
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

W tym samouczku używamy wersji biblioteki CDN. Używamy AMPPS (AMPPS to stos WAMP, MAMP i LAMP Apache, MySQL, MongoDB, PHP, Perl i Python) do wykonywania wszystkich naszych przykładów.

Przykład

Poniżej znajduje się prosty przykład jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   
      
   <body>
      <div data-role = "page" id = "pageone">
         <div data-role = "header">
            <h1>Header Text</h1>
         </div>

         <div data-role = "main" class = "ui-content">
            <h2>Welcome to TutorialsPoint</h2>
         </div>

         <div data-role = "footer">
            <h1>Footer Text</h1>
         </div>
      </div>
   </body>
</html>

Szczegóły powyższego kodu to -

  • Ten kod jest określony wewnątrz elementu head.

<meta name = "viewport" content = "width = device-width, initial-scale = 1">
    • Rzutnia służy do określania (przez przeglądarkę) wyświetlania poziomu powiększenia i wymiaru strony.

    • content = "width = device-width" służy do ustawiania szerokości w pikselach strony lub urządzenia ekranu.

    • initial-scale = 1 ustawia początkowy poziom powiększenia, gdy strona jest ładowana po raz pierwszy.

  • Uwzględnij następujące sieci CDN

<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  • Treść wewnątrz tagu <body> to strona wyświetlana w przeglądarce.

<div data-role = "page">
   ...
</div>
  • data-role = "header" tworzy nagłówek u góry strony.

  • data-role = "main" służy do definiowania zawartości strony.

  • data-role = "footer" tworzy stopkę u dołu strony.

  • class = "ui-content" obejmuje dopełnienie i marginesy w treści strony.

Wynik

Wykonajmy następujące kroki, aby zobaczyć, jak działa powyższy kod -

  • Zapisz powyższy kod HTML jako simple_example.html plik w folderze głównym serwera.

  • Otwórz ten plik HTML jako http: //localhost/simple_example.html, a zostanie wyświetlony następujący wynik.

Użytkownik może wchodzić w interakcje ze stronami jQuery Mobile, które grupują zawartość w logiczne widoki i widoki stron. Widok strony można animować za pomocą przejść stron. Za pomocą dokumentu HTML można utworzyć wiele stron, dzięki czemu nie ma potrzeby żądania zawartości z serwera.

Poniższa tabela szczegółowo przedstawia typy stron.

Sr.No. Typ i opis
1 Pojedyncza strona

Pojedyncza strona jest tworzona w dokumencie HTML przy użyciu standardowego sposobu pisania szablonu.

2 Szablon wielostronicowy

W jednym dokumencie HTML można umieścić wiele stron, które są ładowane razem, dodając wiele elementów div z atrybutem data-role = "page" .

3 Strona dialogów

Modalne okna dialogowe otwierają zawartość w interaktywnej nakładce nad stroną.

Konwencje, a nie wymagania

  • Elementy atrybutów roli danych, takie jak nagłówek, stopka, strona i zawartość, służą do zapewnienia podstawowego formatu i struktury strony.

  • W przypadku dokumentów jednostronicowych opakowanie strony było wymagane do automatycznej inicjalizacji i jest ustawiane jako opcjonalne.

  • Element strukturalny można wykluczyć w przypadku strony internetowej z niestandardowym układem.

  • Aby zarządzać stronami, opakowanie strony jest wstrzykiwane przez platformę, gdy nie jest uwzględnione w znacznikach.

Wstępne pobieranie stron

Włączając wstępne pobieranie danych atrybutów , możemy wstępnie pobierać strony do DOM w szablonach pojedynczych stron. Aby uzyskać więcej informacji, kliknij tutaj .

DOM Cache

Gdy pamięć przeglądarki zapełni się w DOM, spowalnia to przeglądarkę mobilną lub może ulec awarii z powodu ładowania wielu stron. Istnieje prosty sposób na utrzymanie porządku w DOM -

  • Kiedy strona jest ładowana za pośrednictwem AJAX, oznacza to usunięcie strony z DOM, gdy przekierowujesz na inną stronę.

  • Poprzednią stronę, którą odwiedziłeś, można odzyskać z pamięci podręcznej, gdy ponownie ją odwiedzisz.

  • Zamiast usuwać strony, możesz powiedzieć jQuery mobile, aby zachował je w DOM, używając następującego wiersza -

$.mobile.page.prototype.options.domCache = true;
  • Ustaw opcję domCache na wartość true we wtyczce strony, aby zachować wszystkie strony w DOM, które były wcześniej odwiedzane.

pageContainerElement.page({ domCache: true });

jQuery Mobile zapewnia zestaw wbudowanych ikon, które mogą być używane z przyciskami, przyciski widoku listy, które uatrakcyjnią przyciski.

Poniższa tabela zawiera listę niektórych ikon używanych w środowisku jQuery Mobile.

Sr.No. Obszar ikon i opis
1 Zestaw ikon

Ustawia ikonę w przycisku.

2 Ikony pozycjonowania

Określa położenie ikony na przycisku.

3 Tylko ikony

Wyświetla tylko ikonę w przycisku.

4 Cień ikony

Dodaje cień ikony do przycisku.

5 Usuwanie kręgu

Usuwa szare kółko wokół ikony.

6 Ikony czarno-białe

Zmienia kolor ikon na czarny lub biały.

7 Połączenie alt i nodisc

Łączy klasy alt i nodisc z ikoną.

Pozwala na zmianę wartości właściwości, które występują w określonym czasie i zmienia zachowanie elementu z jednego stanu na inny, stosując różne style dla każdego stanu.

Poniższa tabela zawiera listę niektórych przejść stron używanych w strukturze jQuery Mobile -

Sr.No. Przejście i opis W przypadku stron Do dialogów
1

fade

Możesz sprawić, że elementy pojawią się i znikną z widoczności.

Fade Page Fade Dialog
2

flip

Przerzuć elementy od tyłu do przodu na następną stronę.

Odwróć stronę Odwróć okno dialogowe
3

pop

Możesz utworzyć wyskakujące okienko.

Strona Pop Dialog pop
4

flow

Wyświetl następną stronę, odsuwając bieżącą stronę.

Strona przepływu Okno dialogowe przepływu
5

slide

Możesz przesuwać stronę od prawej do lewej.

Slide Page Okno dialogowe slajdów
6

slidefade

Przesuwa stronę od prawej do lewej i zanika na następnej stronie.

Slidefade Page Okno dialogowe Slidefade
7

slideup

Przesuwa stronę od dołu do góry.

Slideup Page Okno dialogowe Slideup
8

slidedown

Przesuwa stronę od góry do dołu.

Slidedown Page Slidedown Dialog
9

turn

Możesz przejść do następnej strony.

Włącz stronę Włącz okno dialogowe
10

none

Nie możesz użyć żadnego efektu przejścia, używając tego atrybutu.

Brak strony Brak okna dialogowego

Ustawianie przejścia i konfiguracji globalnej

Domyślnie strony będą miały fadeprzejście w ramach. Możesz użyć niestandardowych przejść, dodającdata-transitionatrybut do łącza. Możesz użyć różnych domyślnych efektów przejścia dla strony za pomocądefaultPageTransitionopcja globalnie. W przypadku okien dialogowych możesz skorzystać zdefaultDialogTransition opcja.

Przejście awaryjne

Wszystkie przejścia obsługują transformacje 3D z wyjątkiem przejścia zanikającego. Urządzenia, które nie obsługują transformacji 3D, będą musiały korzystać z przejścia przez zanikanie. Niektóre przeglądarki nie obsługują transformacji 3D dla każdego typu przejścia, więc możesz użyć rozszerzeniafade jako domyślny rezerwowy przejście.

Max Scroll for Transitions

Przejścia są wyłączone podczas przewijania z lub do strony, a pozycja przewijania będzie trzykrotnie większa od wysokości ekranu urządzenia. Czasami odpowiedź może działać wolno lub przeglądarka może się zawiesić po kliknięciu dowolnego elementu nawigacyjnego; aby tego uniknąć, używamy pozycji przewijania do przejścia za pomocągetMaxScrollForTransition funkcjonować.

Maksymalna szerokość przejść

Możesz wyłączyć przejście, gdy szerokość okna jest większa niż szerokość w pikselach. Możesz skonfigurować maksymalną szerokość przejść za pomocą$.mobile.maxTransitionWidthglobal, która jest domyślnie ustawiona na false. Przyjmuje wartości takie jak szerokość piksela lub wartość fałszu, a przejście zostanie ustawione na brak, jeśli nie jest wartością fałszywą, gdy okno jest wyższe niż określona wartość.

Przejście tej samej strony

Możesz dodać przejścia do bieżącej strony za pomocą allowSamePageTransition opcja widgetu kontenera strony change() metoda.

Tworzenie niestandardowych przejść

Możesz tworzyć niestandardowe przejścia na stronie za pomocą $.mobile.transitionHandlers opcja, która rozszerza wybór przejść w serwisie lub aplikacji.

Systemy siatki służą do tworzenia układów stron za pomocą szeregu wierszy i kolumn, w których znajdują się treści.

Poniższa tabela szczegółowo przedstawia typy siatek.

Sr.No. Typ i opis
1 Krata

System siatki mobilnej jQuery tworzy układy stron za pomocą szeregu wierszy i kolumn.

2 Przyciski w siatkach

Kolekcja przycisków w formacie siatki w telefonie komórkowym jQuery.

3 Niestandardowa responsywna siatka

Podstawowy styl siatki można łatwo rozszerzyć na niestandardowy układ responsywny za pomocą zapytań o media w CSS.

Widżet to mały gadżet lub kontrolka aplikacji mobilnej jQuery. Widżety mogą być bardzo przydatne, ponieważ umożliwiają umieszczenie ulubionych aplikacji na ekranie głównym, aby mieć do nich szybki dostęp.

Poniższa tabela szczegółowo przedstawia typy widżetów.

Sr.No. Typ i opis
1 guziki

Określa przycisk, który można kliknąć, zawierający treść, taką jak tekst lub obrazy.

2 Pole wyboru

Pola wyboru są używane, gdy wymagane jest wybranie więcej niż jednej opcji.

3 Radiobox

Przyciski opcji są używane, gdy spośród wielu opcji wystarczy wybrać tylko jedną.

4 Datepicker

Skupia się na wejściu, aby otworzyć interaktywny kalendarz w małej nakładce.

5 Składany

Zwijane umożliwia rozwijanie lub zwijanie zawartości po każdym kliknięciu. Jest to bardzo pomocne dla urządzenia mobilnego, które przedstawia krótką treść.

6 Grupa kontrolna

Controlgroups zapewniają zestaw przycisków do określenia pojedynczego bloku, który wygląda jak komponent nawigacyjny.

7 Filtrowalne

Używając atrybutu data-filter = "true" , możesz filtrować elementy potomne dowolnego elementu.

8 Przełącznik dwustanowy

Przełącznik odwracania umożliwia wyłączenie / włączenie lub włączenie lub wyłączenie przełącznika, klikając go, aby wprowadzić dane w stylu boolowskim.

9 Widok listy

Zadaniem komponentu listview jest renderowanie złożonej i dostosowanej treści na listach.

10 Ładowarka

JQuery Mobile zapewnia różne sposoby ładowania stanów do elementu.

11 Navbar

Widżet paska nawigacyjnego to zestaw przycisków, które odsyłają do innych stron internetowych lub sekcji.

12 Panele

Panele służą do wyświetlania komponentów DOM w pudełku.

13 Wyskakujące okienka

Popup to interfejs użytkownika, który pojawia się w małym oknie i wyświetla tekst, obrazy i inną zawartość.

14 Rangeslider

Widżet Rangeslider udostępnia parę uchwytów umożliwiających wybór zakresu wartości liczbowych.

15 Wybierz menu

Menu wyboru udostępnia różne opcje w postaci listy rozwijanej, z której użytkownik może wybrać jedną lub więcej opcji.

16 Suwak

Suwak umożliwia wybór wartości poprzez przesuwanie uchwytu suwaka.

17 Stół

jQuery Mobile używa tabeli do reprezentowania danych w postaci wierszy i kolumn, tj. wyświetla dane w formacie tabelarycznym.

18 Zakładki

Widżet tabs to rozszerzenie widgetu jQuery ui tabs, które akceptuje wszystkie metody i opcje.

19 Wprowadzanie tekstu

Znacznik <input> służy do deklarowania elementu wejściowego, kontrolki, która umożliwia użytkownikowi wprowadzanie danych.

20 pasek narzędzi

Widżet paska narzędzi jQuery dla urządzeń przenośnych umożliwia tworzenie nagłówków i stopek.

jQuery Mobile umożliwia tworzenie dynamicznych stron internetowych. Korzystając ze zdarzeń, można ustawić na elementach procesy sterowane zdarzeniami, które są uruchamiane przez interakcję użytkownika, takie jak kliknięcie myszą, najechanie myszą na element, naciśnięcie klawisza na klawiaturze itp.

Poniższa tabela zawiera listę niektórych zdarzeń dla urządzeń mobilnych, które są obsługiwane przez jQuery Mobile.

Sr.No. Opis wydarzenia
1 jQuery Mobile Events

Reaguje na interakcję użytkownika, gdy użytkownik kliknie określoną stronę lub najedzie kursorem myszy na element itp.

2 Wydarzenia jQuery Touch

Zapewnia zdarzenia dotykowe, gdy użytkownik dotyka ekranu.

3 Zdarzenia jQuery Scroll

Uruchamia zdarzenia przewijania, gdy użytkownik przewija w górę iw dół.

4 jQuery Orientation Event

Wyzwala zdarzenie orientacji, gdy użytkownik obraca urządzenie w pionie lub w poziomie.

5 Zdarzenia strony jQuery

Zapewnia zdarzenia strony, gdy użytkownik ukrywa, tworzy, ładuje lub usuwa strony.

Tworzenie formularzy jest łatwe i bardzo elastyczne, które są zbudowane z kombinacji standardowych elementów formularzy i przycisków.

Poniższa tabela szczegółowo przedstawia typy formularzy.

Sr.No. Typ i opis
1 Formularz podstawowy

jQuery Mobile zapewnia potężny, łatwy i wszechstronny system układu dla Formularzy, który łączy style formularzy, przycisk wprowadzania i obsługę suwaków.

2 Formularz danych wejściowych

Znacznik <input> to element sterujący, który umożliwia użytkownikowi wprowadzanie danych.

3 Wybierz formularz

W formie opcji dostępna jest lista rozwijana dla menu wyboru.

4 Form Slider

Suwak umożliwia wybór wartości poprzez przesuwanie uchwytu suwaka.

5 Odświeżanie i automatyczna inicjalizacja elementów formularza

Refresh służy do samodzielnego aktualizowania nowego stanu formantu formularza i aktualizowania kontrolki formularza za pomocą JavaScript.

Ustawia różne typy motywów dla przycisków, pasków nawigacyjnych, bloków, łączy i tak dalej. Kompozycję można ustawić za pomocą atrybutu data-theme .

Poniższa tabela opisuje wykorzystanie funkcji motywu w różnych obszarach obsługiwanych przez jQuery Mobile.

Sr.No. Funkcjonalność i opis
1 Motywy

Udostępnia dwa różne typy motywów, takie jak motyw „a” i motyw „b”, aby dostosować wygląd aplikacji.

2 Nagłówek i stopka motywu w oknach dialogowych

Ustawia motyw nagłówka i stopki w oknie dialogowym.

3 Przyciski tematyczne, ikony i wyskakujące okienka

Określa motyw przycisków, ikon i wyskakujących okienek.

4 Przyciski tematyczne w nagłówku i stopce

Wyświetla motyw przycisków w nagłówku i stopce.

5 Tematyczne paski nawigacyjne

Stosuje motyw dla pasków nawigacji w nagłówku lub stopce.

6 Panele tematyczne

Możesz zastosować motyw do panelu.

7 Motywacyjny przycisk zwijany i przyciski dzielone

Wyświetla motyw dla przycisków zwijanych i podzielonych.

8 Listy tematyczne i listy zwijane

Wyświetla motyw dla list i list rozwijanych.

9 Składane formularze

Możesz zastosować motyw do formularzy.

Klasy CSS jQuery

Możesz użyć różnych typów klas CSS do stylizacji elementów, jak opisano w poniższych sekcjach.

Klasy globalne

Następujące klasy mogą być używane jako klasy globalne w widżetach jQuery Mobile -

Sr.No. Klasa i opis
1

ui-corner-all

Wyświetla elementy z zaokrąglonymi narożnikami.

2

ui-shadow

Wyświetla cień elementów.

3

ui-overlay-shadow

Wyświetla cień nakładki dla elementów.

4

ui-mini

Wyświetla mniejsze elementy.

Klasy przycisków

W poniższej tabeli wymieniono klasy przycisków, które są używane z elementami zakotwiczenia lub przycisku -

Sr.No. Klasa i opis
1

ui-btn

Określa, że ​​element będzie stylizowany na przycisk.

2

ui-btn-inline

Pokazuje przycisk jako element wbudowany, co pozwala zaoszczędzić miejsce na etykietę.

3

ui-btn-icon-top

Umieszcza ikonę nad tekstem.

4

ui-btn-icon-right

Umieszcza ikonę po prawej stronie tekstu.

5

ui-btn-icon-bottom

Umieszcza ikonę pod tekstem.

6

ui-btn-icon-left

Umieszcza ikonę po lewej stronie tekstu.

7

ui-btn-icon-notext

Pokazuje jedyną ikonę.

8

ui-btn-a|b

Wyświetla kolor przycisku („a” będzie domyślnym kolorem tła, tj. Szary, a „b” zmieni kolor tła na czarny).

Klasy ikon

W poniższej tabeli wymieniono klasy ikon, które są używane z elementami zakotwiczenia lub przycisku -

Sr.No. Klasa i opis
1

ui-icon-action

Pokazuje ikonę akcji.

2

ui-icon-alert

Wyświetla wykrzyknik wewnątrz trójkąta.

3

ui-icon-arrow-d-l

Określa dół za pomocą strzałki w lewo.

4

ui-icon-arrow-d-r

Określa dół za pomocą prawej strzałki.

5

ui-icon-arrow-u-l

Określa się za pomocą strzałki w lewo.

6

ui-icon-arrow-u-r

Określa się za pomocą prawej strzałki.

7

ui-icon-arrow-l

Określa lewą strzałkę.

8

ui-icon-arrow-r

Określa strzałkę w prawo.

9

ui-icon-arrow-u

Określa strzałkę w górę.

10

ui-icon-arrow-d

Określa strzałkę w dół.

11

ui-icon-bars

Pokazuje 3 poziome paski jeden nad drugim.

12

ui-icon-bullets

Pokazuje 3 poziome pociski jeden nad drugim.

13

ui-icon-carat-d

Wyświetla karat do dołu.

14

ui-icon-carat-l

Wyświetla karat po lewej stronie.

15

ui-icon-carat-r

Wyświetla karat po prawej stronie.

16

ui-icon-carat-u

Wyświetla karat do góry.

17

ui-icon-check

Pokazuje ikonę znacznika wyboru.

18

ui-icon-comment

Określa komentarz lub wiadomość.

19

ui-icon-forbidden

Wyświetla zabronioną ikonę.

20

ui-icon-forward

Określa ikonę do przodu.

21

ui-icon-navigation

Określa ikonę nawigacji.

22

ui-icon-recycle

Wyświetla ikonę recyklingu.

23

ui-icon-refresh

Pokazuje ikonę odświeżania.

24

ui-icon-tag

Wskazuje ikonę tagu.

25

ui-icon-video

Wskazuje ikonę wideo lub aparatu.

Zajęcia tematyczne

Udostępnia dwa różne typy motywów, takie jak motyw „a” i motyw „b”, aby dostosować wygląd aplikacji. Możesz tworzyć własne klasy motywów, dołączając literę próbki (az). Poniższa tabela zawiera listę klas motywów, które są określone od litery a do z.

Sr.No. Klasa i opis
1

ui-bar-(a-z)

Wyświetla kolor paska, w tym nagłówków, stopek i innych pasków na stronie.

2

ui-body-(a-z)

Wyświetla kolor bloku treści, w tym widoku listy, wyskakujących okienek, suwaków, paneli, programów ładujących itp.

3

ui-btn-(a-z)

Wyświetla kolor przycisku.

4

ui-group-theme-(a-z)

Wyświetla kolor grup kontrolnych, widoków list i zestawów zwijanych.

5

ui-overlay-(a-z)

Wyświetla kolor tła dla kontenerów wyskakujących okienek, okien dialogowych i stron.

6

ui-page-theme-(a-z)

Wyświetla kolor stron.

Klasy siatki

W poniższej tabeli wymieniono klasy siatki, które są używane z równą szerokością, bez obramowania, tła, marginesu lub wypełnienia.

Sr.No. Klasa siatki Kolumny Szerokość kolumn Koresponduje z
1 ui-grid-solo 1 100% ui-block-a
2 ui-grid-a 2 50% / 50% ui-block-a | b
3 ui-grid-b 3 33% / 33% / 33% ui-block-a | b | c
4 ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a | b | c | d
5 ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a | b | c | d | e

Przycisk

Określa przycisk, który można kliknąć, zawierający treść, taką jak tekst lub obrazy, przy użyciu klasy ui-btn . W wersji 1.4 jest przestarzały. Użyj atrybutu ui-btn zamiast atrybutu data-role = "button" .

Poniższa tabela zawiera listę elementów przycisków używanych z atrybutem danych.

Sr.No. Atrybut danych i opis Wartość
1

data-corners

Określa, czy przycisk powinien zawierać zaokrąglone rogi, czy nie.

prawda | fałszywy
2

data-icon

Definiuje ikonę przycisku.

Domyślnie nie ma ikony
3

data-iconpos

Określa pozycję ikony.

lewo | prawo | do góry | Dolny
4

data-iconshadow

Określa, czy ikona przycisku ma zawierać cień, czy nie.

prawda | fałszywy
5

data-inline

Określa, czy przycisk ma być wbudowany, czy nie.

prawda | fałszywy
6

data-mini

Określa, czy przycisk powinien być wyświetlany w mniejszym lub normalnym rozmiarze.

prawda | fałszywy
7

data-shadow

Określa, czy przycisk powinien zawierać cień, czy nie.

prawda | fałszywy
8

data-theme

Wyświetla kolor motywu dla przycisku.

litera (az)

Pole wyboru

Poniższa tabela zawiera listę elementów pól wyboru używanych w programie type = "checkbox".

Sr.No. Atrybut danych i opis Wartość
1

data-mini

Określa, czy pole wyboru powinno być wyświetlane w mniejszym lub normalnym rozmiarze.

prawda | fałszywy
2

data-role

Zatrzymuje stylizowanie pól wyboru jako przycisków.

Żaden
3

data-theme

Wyświetla kolor motywu dla pola wyboru.

litera (az)

Składany

Poniższa tabela zawiera listę zwijanych elementów używanych w programie data-role = "collapsible" atrybut.

Sr.No. Atrybut danych i opis Wartość
1

data-collapsed

Wskazuje, czy treść powinna zostać zamknięta, czy rozwinięta.

prawda | fałszywy
2

data-collapsed-cue-text

Wyświetla opinie użytkowników korzystających z oprogramowania czytnika ekranu.

Domyślnie zawartość jest zwijana
3

data-collapsed-icon

Definiuje ikonę zwijanego przycisku.

Domyślna ikona to „plus”
4

data-content-theme

Wyświetla kolor motywu dla zwijanej zawartości.

litera (az)
5

data-expanded-cue-text

Wyświetla opinie użytkowników korzystających z oprogramowania czytnika ekranu.

Domyślnie jest rozwijana zawartość
6

data-expanded-icon

Wyświetla zwijany przycisk po rozwinięciu zawartości.

Domyślna ikona to „minus”
7

data-iconpos

Określa pozycję ikony.

lewo | prawo | do góry | Dolny
8

data-inset

Określa, czy zwijany przycisk powinien być wyświetlany z zaokrąglonymi rogami i marginesami, czy nie.

prawda | fałszywy
9

data-mini

Określa, czy zwijane przyciski mają być wyświetlane w mniejszym lub normalnym rozmiarze.

prawda | fałszywy
10

data-theme

Wyświetla kolor motywu dla zwijanego przycisku.

litera (az)

Składany zestaw

W poniższej tabeli wymieniono zwijane elementy zestawu używane z data-role = "collapsibleset" atrybut.

Sr.No. Atrybut danych i opis Wartość
1

data-collapsed-icon

Definiuje ikonę zwijanego przycisku.

Domyślna ikona to „plus”
2

data-content-theme

Wyświetla kolor motywu dla zwijanej zawartości.

litera (az)
3

data-expanded-icon

Wyświetla zwijany przycisk po rozwinięciu zawartości.

Domyślna ikona to „minus”
4

data-iconpos

Określa pozycję ikony.

lewo | prawo | do góry | Dolny
5

data-inset

Określa, czy zwijany przycisk powinien być wyświetlany z zaokrąglonymi rogami i marginesami, czy nie.

prawda | fałszywy
6

data-mini

Określa, czy zwijane przyciski mają być wyświetlane w mniejszym lub normalnym rozmiarze.

prawda | fałszywy
7

data-theme

Wyświetla kolor motywu dla zwijanego przycisku.

litera (az)

Grupa kontrolna

Poniższa tabela zawiera listę elementów Controlgroup używanych w programie data-role = "controlgroup" atrybut -

Sr.No. Atrybut danych i opis Wartość
1

data-exclude-invisible

Określa, czy należy wykluczyć niewidoczne elementy podrzędne w przypisaniu zaokrąglonych rogów.

prawda | fałszywy
2

data-mini

Określa, czy grupa powinna być wyświetlana w mniejszym lub normalnym rozmiarze.

prawda | fałszywy
3

data-theme

Wyświetla kolor motywu dla grupy kontrolnej.

litera (az)
4

data-type

Wskazuje, czy grupa powinna być wyświetlana w formacie poziomym czy pionowym.

pozioma | pionowy

Dialog

Poniższa tabela zawiera listę elementów okna dialogowego używanych w programie data-dialog="true" atrybut.

Sr.No. Atrybut danych i opis Wartość
1

data-close-btn

Definiuje pozycję przycisku zamykania.

lewo | prawo | Żaden
2

data-close-btn-text

Definiuje tekst przycisku zamykania.

tekst
3

data-corners

Określa, czy okno dialogowe ma być wyświetlane z zaokrąglonymi narożnikami, czy nie.

prawda | fałszywy
4

data-dom-cache

Wskazuje, czy pamięć podręczna DOM musi zostać wyczyszczona dla poszczególnych stron, czy nie.

prawda | fałszywy
5

data-overlay-theme

Określa kolor nakładki strony okna dialogowego.

litera (az)
6

data-theme

Określa kolor motywu strony okna dialogowego.

litera (az)
7

data-title

Określa tytuł strony okna dialogowego.

tekst

Wzmocnienie

Poniższa tabela zawiera listę elementów ulepszeń używanych w programie data-enhance="false" or data-ajax = "false" atrybut.

Sr.No. Atrybut danych i opis Wartość
1

data-enhance

Możesz stylizować stronę, ustawiając ten atrybut na „true”. Nie możesz stylizować strony, jeśli jest ustawiona na „fałsz”.

prawda | fałszywy
2

data-ajax

Wskazuje, czy strony muszą być ładowane z Ajax, czy nie.

prawda | fałszywy

Naprawiono pasek narzędzi

Poniższa tabela zawiera listę elementów paska narzędzi używanych w programie data-position = "fixed" atrybut.

Sr.No. Atrybut danych i opis Wartość
1

data-disable-page-zoom

Określa, czy użytkownik może skalować / powiększać stronę, czy nie.

prawda | fałszywy
2

data-fullscreen

Określa, że ​​paski narzędzi muszą być umieszczone na górze i / lub na dole.

prawda | fałszywy
3

data-tap-toggle

Wskazuje, czy użytkownik może przełączać widoczność paska narzędzi po dotknięciu, czy nie.

prawda | fałszywy
4

data-transition

Pokazuje efekt przejścia po dotknięciu lub kliknięciu elementu.

slajd | zanikać | Żaden
5

data-update-page-padding

Aktualizuje wypełnienie strony za pomocą zdarzeń zmiany rozmiaru, przejścia i aktualizacji układu.

prawda | fałszywy
6

data-visible-on-page-show

Definiuje widoczność paska narzędzi, gdy wyświetlana jest strona nadrzędna.

prawda | fałszywy

Flip Toggle Switch

Poniższa tabela zawiera listę elementów przełączania odwracania używanych w programie data-role = "flipswitch" atrybut -

Sr.No. Atrybut danych i opis Wartość
1

data-mini

Określa, czy przełącznik powinien być wyświetlany w mniejszym lub normalnym rozmiarze.

prawda | fałszywy
2

data-on-text

Definiuje tekst „włączony” na przełączniku klapki.

Domyślnie jest włączone
3

data-off-text

Definiuje tekst „wyłączony” na przełączniku klapki.

Domyślnie jest wyłączone

Stopka

Poniższa tabela zawiera listę elementów stopki używanych z atrybutem data-role = "footer" -

Sr.No. Atrybut danych i opis Wartość
1

data-id

Definiuje unikalny identyfikator.

tekst
2

data-position

Określa, czy stopka ma być umieszczona na dole, czy w treści strony.

inline | naprawiony
3

data-fullscreen

Określa, czy stopka ma być umieszczona na dole i nad zawartością strony, czy nie.

prawda | fałszywy
4

data-theme

Określa kolor stopki motywu.

litera (az)

nagłówek

Poniższa tabela zawiera listę elementów nagłówka używanych w programie data-role = "header" atrybut.

Sr.No. Atrybut danych i opis Wartość
1

data-id

Definiuje unikalny identyfikator.

tekst
2

data-position

Określa, czy nagłówek powinien być umieszczony na dole, czy w treści strony.

inline | naprawiony
3

data-fullscreen

Określa, czy nagłówek powinien być umieszczony na dole i nad zawartością strony, czy nie.

prawda | fałszywy
4

data-theme

Określa kolor motywu nagłówka.

litera (az)

Wejścia

Poniższa tabela zawiera listę elementów wejściowych używanych w programie type = "text|search|etc" atrybut.

Sr.No. Atrybut danych i opis Wartość
1

data-clear-btn

Określa, czy element wejściowy powinien zawierać przycisk wyczyść, czy nie.

prawda | fałszywy
2

data-clear-btn-text

Definiuje tekst przycisku wyczyść.

tekst
3

data-mini

Określa, czy dane wejściowe powinny być wyświetlane w mniejszym lub normalnym rozmiarze.

prawda | fałszywy
4

data-role

Zatrzymuje stylizowanie pól wejściowych lub tekstowych na przyciski.

Żaden
5

data-theme

Definiuje kolor motywu elementu wejściowego.

litera (az)

Połączyć

Poniższa tabela zawiera listę elementów linków używanych w jQuery Mobile.

Sr.No. Atrybut danych i opis Wartość
1

data-ajax

Wskazuje, czy strony muszą być ładowane przez Ajax, czy nie.

prawda | fałszywy
2

data-direction

Służy do odwrotnego przejścia.

odwrócić
3

data-dom-cache

Wskazuje, czy pamięć podręczna jQuery DOM musi być czysta dla stron, czy nie.

prawda | fałszywy
4

data-prefetch

Służy do wstępnego pobierania stron do DOM.

prawda | fałszywy
5

data-rel

Określa zachowanie łącza.

wstecz | okno dialogowe | zewnętrzny | wyskakujące okienko
6

data-transition

Definiuje przejście z jednej strony na drugą.

zanikać | odwróć | przepływ | pop | slajd | slidedown | slidefade | slideup | skręcić | Żaden
7

data-position-to

Definiuje położenie okien podręcznych.

pochodzenie | Selektor jQuery | okno

Lista

Poniższa tabela przedstawia elementy listy używane w programie data-role = "listview" atrybut.

Sr.No. Atrybut danych i opis Wartość
1

data-autodividers

Automatycznie dzieli listę.

prawda | fałszywy
2

data-count-theme

Określa kolor motywu elementu count.

litera (az)
3

data-divider-theme

Określa kolor motywu dla separatora listy.

litera (az)
4

data-filter

Służy do filtrowania wartości listy w polu wyszukiwania.

prawda | fałszywy
5

data-filter-placeholder

Definiuje tekst w polu wyszukiwania.

tekst
6

data-filter-theme

Określa kolor motywu dla filtra wyszukiwania.

litera (az)
7

data-icon

Zawiera ikonę listy.

Domyślnie nie ma ikony
8

data-inset

Określa, czy lista powinna być wyświetlana z zaokrąglonymi rogami i marginesami, czy nie.

prawda | fałszywy
9

data-split-icon

Definiuje ikonę przycisku podziału.

Domyślna ikona to „arrow-r”
10

data-split-theme

Definiuje kolor motywu dla przycisku podziału.

litera (az)
11

data-theme

Definiuje kolor motywu listy.

litera (az)

Element listy

W poniższej tabeli przedstawiono elementy listy używane w programie data-role = "listview" atrybut.

Sr.No. Atrybut danych i opis Wartość
1

data-filtertext

Służy do filtrowania wartości listy za pomocą tekstu w polu wyszukiwania.

tekst
2

data-icon

Zawiera ikonę elementu listy.

Domyślnie nie ma ikony
3

data-role

Definiuje separator dla elementów listy.

dzielnik listy
4

data-theme

Określa kolor motywu dla elementu listy.

litera (az)

Navbar

Poniższa tabela zawiera listę elementów paska nawigacyjnego używanych w programie data-role = "navbar" atrybut.

Sr.No. Atrybut danych i opis Wartość
1

data-icon

Zawiera ikonę elementu listy.

Domyślnie nie ma ikony
2

data-iconpos

Określa pozycję ikony.

lewo | prawo | do góry | dół | brak tekstu

Strona

Poniższa tabela zawiera listę elementów strony używanych w programie data-role = "page" atrybut.

Sr.No. Atrybut danych i opis Wartość
1

data-dom-cache

Wskazuje, czy pamięć podręczna DOM musi zostać wyczyszczona dla poszczególnych stron, czy nie.

prawda | fałszywy
2

data-overlay-theme

Określa kolor nakładki stron dialogowych.

litera (az)
3

data-theme

Definiuje kolor motywu strony.

litera (az)
4

data-title

Zawiera tytuł strony.

Domyślnie nie ma ikony
5

data-url

Służy do aktualizacji adresu URL.

url

Popup

Poniższa tabela zawiera listę elementów wyskakujących używanych w programie data-role = "popup" atrybut.

Sr.No. Atrybut danych i opis Wartość
1

data-corners

Określa, czy wyskakujące okienko powinno być wyświetlane z zaokrąglonymi rogami i marginesami, czy nie.

prawda | fałszywy
2

data-dismissible

Określa, czy wyskakujące okienko ma być zamknięte, klikając na zewnątrz, czy nie.

prawda | fałszywy
3

data-history

Określa, czy wyskakujące okienko powinno wyświetlać historię elementu po otwarciu.

prawda | fałszywy
4

data-overlay-theme

Określa kolor nakładki wyskakującego okienka.

litera (az)
5

data-shadow

Wyświetla cień wyskakującego okienka.

prawda | fałszywy
6

data-theme

Określa kolor motywu dla wyskakującego okienka.

litera (az)
7

data-tolerance

Określa krawędzie okna.

30, 15, 30, 15

Przycisk radiowy

Poniższa tabela zawiera listę elementów przycisków opcji używanych w programie type = "radio" atrybut.

Sr.No. Atrybut danych i opis Wartość
1

data-mini

Określa, czy przycisk powinien być wyświetlany w mniejszym lub normalnym rozmiarze.

prawda | fałszywy
2

data-role

Zatrzymuje stylizację przycisków radiowych na przyciski rozszerzone.

Żaden
3

data-theme

Definiuje kolor motywu dla przycisku opcji.

litera (az)

Wybierz

Poniższa tabela zawiera listę wybranych elementów używanych w jQuery Mobile.

Sr.No. Atrybut danych i opis Wartość
1

data-icon

Zawiera ikonę dla wybranego elementu.

Domyślnie jest to „arrow-d”
2

data-iconpos

Określa pozycję ikony.

lewo | prawo | do góry | Dolny
3

data-inline

Określa, czy przycisk ma być wbudowany, czy nie.

prawda | fałszywy
4

data-mini

Określa, czy opcja select powinna być wyświetlana w mniejszym lub normalnym rozmiarze.

prawda | fałszywy
5

data-native-menu

Używa menu niestandardowego, gdy zostało ustawione na fałsz.

prawda | fałszywy
6

data-overlay-theme

Określa kolor nakładki dla niestandardowego menu wyboru.

litera (az)
7

data-placeholder

Służy do ustawiania elementu opcji wyboru innego niż natywny.

prawda | fałszywy
8

data-role

Zatrzymuje stylizację wybranych elementów jako przycisków.

Żaden
9

data-theme

Wyświetla kolor motywu dla wybranych elementów.

litera (az)

Suwak

Poniższa tabela zawiera listę elementów suwaka używanych w programie type = "range" atrybut.

Sr.No. Atrybut danych i opis Wartość
1

data-highlight

Podświetla suwak.

prawda | fałszywy
2

data-mini

Określa, czy suwak powinien być wyświetlany w mniejszym lub normalnym rozmiarze.

prawda | fałszywy
3

data-role

Zatrzymuje stylizację suwaków na przyciski.

Żaden
4

data-theme

Wyświetla kolor motywu dla kontrolki suwaka.

litera (az)
5

data-track-theme

Wyświetla kolor motywu dla ścieżki suwaka.

litera (az)