jQuery Dane Atrybuty
jQuery Komórka używa HTML5 data-* atrybut stworzyć "touch-friendly" i atrakcyjny wygląd dla urządzeń mobilnych.
Na liście referencyjnej poniżej, bold value określa wartość domyślną.
Przycisk
Przestarzałe w wersji 1.4. Za pomocą CSS Classes zamian. Hiperłączy z data-role="button" . Elementy do guzików i linki w paski narzędzi i pól wejściowych są automatycznie stylizowany jak guziki, nie ma potrzeby data-role="button" .
| Danych atrybutu | Wartość | Opis |
|---|---|---|
| data-corners | true | false | Określa, czy przycisk powinien mieć zaokrąglone narożniki, czy nie |
| data-icon | Icons Reference | Określa ikonę przycisku. Domyślnie ma ikony |
| data-iconpos | left | right | top | bottom | notext | Określa pozycję ikony |
| data-iconshadow | true | false | Określa, czy ikona przycisk powinien mieć cienie czy nie |
| data-inline | true | false | Określa, czy przycisk powinien być inline, czy też nie |
| data-mini | true | false | Określa, czy przycisk powinien być mały lub normalnym rozmiarze |
| data-shadow | true | false | Określa, czy przycisk powinien mieć cienie czy nie |
| data-theme | letter (a-z) | Określa kolor motywu przycisku |
Do grupowania wielu przycisków, należy pojemnik z data-role="controlgroup" atrybutów wraz z data-type="horizontal|vertical" , aby określić, czy przyciski grupy poziomo lub pionowo.
pole wyboru
Pary etykiet i wejść z type="checkbox" .
| Danych atrybutu | Wartość | Opis |
|---|---|---|
| data-mini | true | false | Określa, czy pole wyboru powinno być małym lub normalnym rozmiarze |
| data-role | none | Zapobiega jQuery Mobile wyboru stylów jak guziki |
| data-theme | letter (a-z) | Określa kolor tematem wyboru |
Do grupowania wielu pól, użyj data-role="controlgroup" wraz z data-type="horizontal|vertical" , aby określić, czy grupa wyboru poziomo lub pionowo.
Składany
Element nagłówek następnie żadnych znaczników HTML wewnątrz kontenera z data-role="collapsible" .
| Danych atrybutu | Wartość | Opis |
|---|---|---|
| data-collapsed | true | false | Określa, czy zawartość powinna być zamknięta lub rozszerzona |
| data-collapsed-cue-text | sometext | Określa tekst, aby zapewnić dźwiękowych dla użytkowników z oprogramowaniem czytnika ekranu. Domyślnie jest to "kliknij, aby zwinąć zawartość". |
| data-collapsed-icon | Icons Reference | Określa ikonę przycisku składanego. Domyślnie jest to "plus" |
| data-content-theme | letter (a-z) | Określa kolor tematem składanej treści. Będzie również dodać zaokrąglone narożniki do składanego treści |
| data-expanded-cue-text | sometext | Określa tekst, aby zapewnić dźwiękowych dla użytkowników z oprogramowaniem czytnika ekranu. Domyślnie jest to "kliknij, aby rozwinąć zawartość". |
| data-expanded-icon | Icons Reference | Określa ikonę przycisku składanego, gdy zawartość jest rozszerzona. Domyślnie jest to "minus" |
| data-iconpos | left | right | top | bottom | Określa pozycję ikony |
| data-inset | true | false | Określa, czy przycisk składane powinny być urządzone z zaokrąglonymi narożnikami i pewnego marginesu czy też nie |
| data-mini | true | false | Określa, czy składane przyciski powinny być małym lub normalnym rozmiarze |
| data-theme | letter (a-z) | Określa kolor motywu przycisku składanego |
Składany zestaw
Składane blokuje zawartość wewnątrz pojemnika z data-role="collapsibleset" .
| Danych atrybutu | Wartość | Opis |
|---|---|---|
| data-collapsed-icon | Icons Reference | Określa ikonę przycisku składanego. Domyślnie jest to "plus" |
| data-content-theme | letter (a-z) | Określa kolor tematem składanej treści |
| data-expanded-icon | Icons Reference | Określa ikonę przycisku składanego, gdy zawartość jest rozszerzona. Domyślnie jest "minus" |
| data-iconpos | left | right | top | bottom | notext | Określa pozycję ikony |
| data-inset | true | false | Określa, czy collapsibles powinny być urządzone z zaokrąglonymi narożnikami i pewnego marginesu czy też nie |
| data-mini | true | false | Określa, czy składane przyciski powinny być małym lub normalnym rozmiarze |
| data-theme | letter (a-z) | Określa kolor tematem składanego zestawu |
Zadowolony
Przestarzałe w wersji 1.4 i zostaną usunięte w 1.5. Pojemnik z data-role="content" .
| Danych atrybutu | Wartość | Opis |
|---|---|---|
| data-theme | letter (a-z) | Określa kolor tematem treści |
Grupa kontrolna
<div> lub <fieldset> pojemnik z data-role="controlgroup" . Grupy kilka przycisków stylu wejść jednego typu (przyciski łącza oparte, przyciski radiowe, pola wyboru, wybierz elementy). Grupowania wyboru formularzy i przycisków radiowych, <fieldset> Kontener zaleca Wewnątrz <div> z "ui-fieldcontain" klasy, w celu poprawy etykiet stylizacji.
| Danych atrybutu | Wartość | Opis |
|---|---|---|
| data-exclude-invisible | true | false | Określa, czy należy wykluczyć niewidzialne dzieci przypisanie zaokrąglonymi narożnikami |
| data-mini | true | false | Określa, czy grupa powinna mieć małego lub normalnym rozmiarze |
| data-theme | letter (a-z) | Określa kolor tematem controlgroup |
| data-type | horizontal | vertical | Określa, czy grupa ta powinna być wyświetlane poziomo lub pionowo |
Dialog
Pojemnik z data-dialog="true" .
| Danych atrybutu | Wartość | Opis |
|---|---|---|
| data-close-btn | left | right | none | Określa położenie przycisku zamykania |
| data-close-btn-text | sometext | Określa tekst dla przycisku zamykania |
| data-corners | true | false | Określa, czy okno powinno mieć zaokrąglone narożniki, czy nie |
| data-dom-cache | true | false | Określa, czy aby wyczyścić pamięć podręczną jQuery DOM czy nie dla poszczególnych stron (jeśli jest ustawiony na true, trzeba zadbać, aby zarządzać DOM siebie i próbę dokładnie na wszystkich urządzeniach mobilnych) |
| data-overlay-theme | letter (a-z) | Określa nakładki (w tle) kolor okna dialogowego |
| data-theme | letter (a-z) | Określa kolor tematem stronie dialogowym |
| data-title | sometext | Określa tytuł strony dialogowym |
Wzmocnienie
Pojemnik z data-enhance="false" lub data-ajax="false"
| Danych atrybutu | Wartość | Opis |
|---|---|---|
| data-enhance | true | false | Jeśli jest ustawiona na "true" (domyślnie) jQuery Mobile automatycznie styl strony, dzięki czemu nadaje się do urządzeń mobilnych. Jeśli jest ustawiony na "false", ramy nie będzie projektować strony |
| data-ajax | true | false | Określa, czy można załadować strony za pośrednictwem ajax czy nie |
Uwaga: data-enhance="false" muszą być używane w połączeniu z $.mobile.ignoreContentEnabled=true" , aby zatrzymać jQuery Mobile, na stronach typu automatycznie.
Wszelkie łącza lub element formularz wewnątrz data-ajax="false" kontenery będą ignorowane przez funkcje nawigacji zasad ramowych, gdy $.mobile.ignoreContentEnabled jest ustawiony na true.
pojemniki
Przestarzałe w wersji 1.4, i zostanie usunięta z 1.5. Zastosowanie class="ui-fieldcontain instead" . Pojemnik z data-role="fieldcontain" owinięty wokół elementu pary etykiet / formularzy.
Poprawiono pasek
Pojemnik z data-role="header" lub data-role="footer" wraz z data-position="fixed" atrybut.
| Danych atrybutu | Wartość | Opis |
|---|---|---|
| data-disable-page-zoom | true | false | Określa, czy użytkownik jest w stanie przeskalować / powiększyć stronę, czy też nie |
| data-fullscreen | true | false | Określa paski narzędzi, aby zawsze być umieszczony na górnej i / lub dolnej |
| data-tap-toggle | true | false | Określa, czy użytkownik jest w stanie przełączać się na pasku narzędzi widoczności na kranów / kliknięć lub nie |
| data-transition | slide | fade | none | Określa efekt przejścia, gdy wystąpi tap / kliknij |
| data-update-page-padding | true | false | Określa dopełnienie zarówno górnej i dolnej części strony, aby być aktualizowane na zmianę rozmiaru, transformacji i "updatelayout" wydarzeń (jQuery Komórka zawsze aktualizuje padding na "pageshow" zdarzenia) |
| data-visible-on-page-show | true | false | Określa paska narzędzi widoczności, gdy strona dominująca jest pokazany |
Klapki Toggle Switch
<input type="checkbox"> z danych-roli "flipswitch" :
| Danych atrybutu | Wartość | Opis |
|---|---|---|
| data-mini | true | false | Określa, czy przełącznik powinien być mały lub normalnym rozmiarze |
| data-on-text | sometext | Określa "na" tekst na przełączniku odwrotną (domyślnie jest to "On" ) |
| data-off-text | sometext | Określa tekst "OFF" na przełączniku odwrotną (domyślnym jest "Off" ) |
Stopka
Pojemnik z data-role="footer" .
| Danych atrybutu | Wartość | Opis |
|---|---|---|
| data-id | sometext | Określa unikatowy identyfikator. Wymagane dla stałych stopkach |
| data-position | inline | fixed | Określa, czy stopka powinna być inline z zawartości strony lub pozostać umieszczony na dole |
| data-fullscreen | true | false | Określa czy stopka powinna być zawsze umieszczone na dole i na zawartości strony (nieznacznie przezroczysta), czy nie |
| data-theme | letter (a-z) | Określa kolor tematem stopce |
Uwaga: Aby włączyć funkcję pełnoekranowego, wykorzystanie data-position="fixed" , a następnie dodać data-fullscreen atrybut elementu.
nagłówek
Pojemnik z data-role="header" .
| Danych atrybutu | Wartość | Opis |
|---|---|---|
| data-id | sometext | Określa unikatowy identyfikator. Wymagane dla stałych nagłówków |
| data-position | inline | fixed | Określa, czy nagłówek powinien być inline z zawartości strony lub pozostać umieszczony na szczycie |
| data-fullscreen | true | false | Określa, czy nagłówek powinien być zawsze umieszczony u góry i nad treścią strony (lekko przezroczyste), czy nie |
| data-theme | letter (a-z) | Określa kolor motywu nagłówka |
Uwaga: Aby włączyć funkcję pełnoekranowego, wykorzystanie data-position="fixed" , a następnie dodać data-fullscreen atrybut elementu.
wejścia
Wejścia z type="text|search|etc." Lub textarea elements .
| Danych atrybutu | Wartość | Opis |
|---|---|---|
| data-clear-btn | true | false | Określa, czy dane wejściowe powinny mieć "clear" przycisk |
| data-clear-btn-text | text | Określa tekst na przycisku "Wyczyść". Domyślnie jest to "clear text" |
| data-mini | true | false | Określa, czy wejście powinno być małym lub normalnym rozmiarze |
| data-role | none | Zapobiega jQuery Mobile stylu wejść / pola tekstowe jak guziki |
| data-theme | letter (a-z) | Określa kolor tematem polu wejściowym |
Połączyć
Wszystkie linki.
| Danych atrybutu | Wartość | Opis |
|---|---|---|
| data-ajax | true | false | Określa, czy można załadować strony za pośrednictwem AJAX dla poprawy komfortu użytkownika i przejściami. Jeśli jest ustawiona na false, jQuery Mobile będzie zrobić normalne żądanie strony. |
| data-direction | reverse | animacja przejścia do tyłu (tylko dla strony lub okna) |
| data-dom-cache | true | false | Określa, czy aby wyczyścić pamięć podręczną jQuery DOM czy nie dla poszczególnych stron (jeśli jest ustawiony na true, trzeba zadbać, aby zarządzać DOM siebie i próbę dokładnie na wszystkich urządzeniach mobilnych) |
| data-prefetch | true | false | Określa, czy wstępne pobieranie stron do DOM, dzięki czemu są one dostępne, gdy użytkownik odwiedza je |
| data-rel | back | dialog | external | popup | Określa opcję jak link powinien zachowywać. Powrót - Przenosi o jeden krok wstecz w historii. Dialog - Otwiera link jako dialogu, nie są śledzone w historii. Zewnętrzne - z linkami do innej domeny. Popup - otwiera okienko. |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | Określa, jak przejście od jednej strony do drugiej. Zobacz naszą jQuery Telefony Przejścia rozdział. |
| data-position-to | origin | jQuery selector | window | Określa położenie skrzynek popup. Pochodzenie - domyślna. Pozycje popup nad linkiem, który otwiera go. selektor jQuery - pozycjonuje okienko nad określonym elemencie. Window - pozycjonuje okienko na środku ekranu okna. |
Lista
<ol> i <ul> z data-role="listview" .
| Danych atrybutu | Wartość | Opis |
|---|---|---|
| data-autodividers | true | false | Określa, czy automatycznie podzielić elementy listy, czy też nie |
| data-count-theme | letter (a-z) | Określa kolor tematem bańki count |
| data-divider-theme | letter (a-z) | Określa kolor tematem listy dzielnika |
| data-filter | true | false | Określa, czy należy dodać pole wyszukiwania na liście lub nie |
| data-filter-placeholder | sometext | Przestarzałe w wersji 1.4. Użyj atrybutu HTML zastępczy zamiast. Określa tekst w polu wyszukiwania. Domyślnie jest to "elementy filtrujące ..." |
| data-filter-theme | letter (a-z) | Określa kolor tematem filtr |
| data-icon | Icons Reference | Określa ikonę listy |
| data-inset | true | false | Określa, czy lista powinna być stylizowany z zaokrąglonymi narożnikami i pewnego marginesu czy też nie |
| data-split-icon | Icons Reference | Określa ikonę przycisku podziału. Domyślnie jest "strzałka-R" |
| data-split-theme | letter (a-z) | Określa kolor motywu przycisku podziału |
| data-theme | letter (a-z) | Określa kolor tematem listy |
Element listy
<li> wewnątrz <ol> i <ul> z data-role="listview" .
| Danych atrybutu | Wartość | Opis |
|---|---|---|
| data-filtertext | sometext | Określa tekst do wyszukania podczas filtrowania elementów. Tekst ten będzie następnie filtrowane zamiast rzeczywistej tekście elementu listy |
| data-icon | Icons Reference | Określa ikonę elementu listy |
| data-role | list-divider | Określa dzielnik dla elementów listy |
| data-theme | letter (a-z) | Określa kolor tematem elementu listy |
Uwaga: atrybut tylko pracę Dane-ikonę na elementy listy z linkami.
navbar
<li> elementy wewnątrz kontenera z data-role="navbar" .
| Danych atrybutu | Wartość | Opis |
|---|---|---|
| data-icon | Icons Reference | Określa ikonę elementu listy |
| data-iconpos | left | right | top | bottom | notext | Określa pozycję ikony |
NavBars odziedziczyć tematyczna próbkę z ich kontenera nadrzędnego. Nie jest możliwe, aby ustawić atrybut danych motywu na pasku nawigacyjnym. Atrybut danych tematem można ustawić indywidualnie dla każdego łącza wewnątrz paska nawigacyjnego.
Strona
Pojemnik z data-role="page" .
| Danych atrybutu | Wartość | Opis |
|---|---|---|
| data-dom-cache | true | false | Określa, czy aby wyczyścić pamięć podręczną jQuery DOM czy nie dla poszczególnych stron (jeśli jest ustawiony na true, trzeba zadbać, aby zarządzać DOM siebie i próbę dokładnie na wszystkich urządzeniach mobilnych) |
| data-overlay-theme | letter (a-z) | Określa nakładki (w tle) kolor stron dialogowych |
| data-theme | letter (a-z) | Określa kolor tematem strony |
| data-title | sometext | Określa tytuł strony |
| data-url | url | Wart uaktualnianie URL, zamiast adresu URL używanego do żądania strony |
Popup
Pojemnik z data-role="popup" .
| Danych atrybutu | Wartość | Opis |
|---|---|---|
| data-corners | true | false | Określa, czy wyskakujące powinny mieć zaokrąglone narożniki, czy nie |
| data-dismissible | true | false | Określa, czy należy zamknąć okienko klikając poza z popup czy nie |
| data-history | true | false | Określa, czy wyskakujące powinny tworzyć historię pozycję w przeglądarce po otwarciu. Jeśli jest ustawiona na false, to nie będzie utworzyć element historii, a wtedy nie być zamykane za pomocą przycisku "Wstecz" w przeglądarce |
| data-overlay-theme | letter (a-z) | Określa nakładki (w tle) kolor oknie popup. Domyślnie jest przezroczyste tło (brak). |
| data-shadow | true | false | Określa, czy okno podręczne powinny mieć cienie czy nie |
| data-theme | letter (a-z) | Określa kolor motywu w oknie popup. Domyślnie dziedziczone, "none" ustawia monitem o przejrzyste |
| data-tolerance | 30, 15, 30, 15 | Określa odległość od krawędzi okna ( top, right, bottom, left ) |
Kotwica z data-rel="popup" :
| Danych atrybutu | Wartość | Opis |
|---|---|---|
| data-position-to | origin | jQuery selector | window | Określa położenie skrzynek popup. Pochodzenie - domyślna. Pozycje popup nad linkiem, który otwiera go. selektor jQuery - pozycjonuje okienko nad określonym elemencie. Window - pozycjonuje okienko na środku ekranu okna. |
| data-rel | popup | Aby otworzyć okno podręczne |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | Określa, jak przejście od jednej strony do drugiej. Zobacz naszą jQuery Telefony Przejścia rozdział. |
Przycisk radiowy
Pary etykiet i wejść z type="radio" .
| Danych atrybutu | Wartość | Opis |
|---|---|---|
| data-mini | true | false | Określa, czy przycisk powinien być mały lub normalnym rozmiarze |
| data-role | none | Zapobiega jQuery Mobile stylu radiobuttons jako rozszerzonych przycisków |
| data-theme | letter (a-z) | Określa kolor motywu przycisku radiowego |
Do grupowania wielu przycisków radiowych, użyj data-role="controlgroup" wraz z data-type="horizontal|vertical" , aby określić, czy do grupy przycisków poziomo lub pionowo.
Wybierz
Wszystko <select> elementy.
| Danych atrybutu | Wartość | Opis |
|---|---|---|
| data-icon | Icons Reference | Określa ikonę elementu select. Domyślnie jest "arrow-d" |
| data-iconpos | left | right | top | bottom | notext | Określa pozycję ikony |
| data-inline | true | false | Określa, czy wybrać element powinien być inline, czy też nie |
| data-mini | true | false | Określa, czy wybrać powinien być mały lub normalnym rozmiarze |
| data-native-menu | true | false | Gdy ustawiona na false, używa własnego niestandardowego wybierz menu jQuery (zalecane, jeśli chcesz, aby wybrać menu, aby wyświetlić takie same na wszystkich urządzeniach mobilnych) |
| data-overlay-theme | letter (a-z) | Określa kolor tematem własne niestandardowe wybierz menu jQuery (używany wraz z data-native-menu="false" ) |
| data-placeholder | true | false | Może być ustawiony na <option> element nienatywnej wybierz |
| data-role | none | Zapobiega jQuery Mobile Styl Wybór elementów jak przyciski |
| data-theme | letter (a-z) | Określa kolor tematem elementu select |
Do wielu grupowej wybierz elementy, użyj data-role="controlgroup" wraz z data-type="horizontal|vertical" , aby określić, czy do grupy elementów poziomo lub pionowo.
Suwak
Wejścia z type="range" .
| Danych atrybutu | Wartość | Opis |
|---|---|---|
| data-highlight | true | false | Określa, czy utwór suwak powinien być podświetlony, czy nie |
| data-mini | true | false | Określa, czy suwak powinien być mały lub normalnym rozmiarze |
| data-role | none | Zapobiega jQuery Mobile suwaków typu jak guziki |
| data-theme | letter (a-z) | Określa kolor tematem suwaka (wejście, uchwyt i śledzenie) |
| data-track-theme | letter (a-z) | Określa kolor tematem suwaku |