Forum | Najnowsze tutoriale tworzenie stron internetowych
 

jQuery Mobile Atrybuty danych


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-inlinetrue | false Określa, czy przycisk powinien być inline, czy też nie
data-minitrue | 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-minitrue | false Określa, czy pole wyboru powinno być małym lub normalnym rozmiarze
data-rolenone 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-minitrue | 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-minitrue | 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-minitrue | false Określa, czy grupa powinna mieć małego lub normalnym rozmiarze
data-theme letter (a-z) Określa kolor tematem controlgroup
data-typehorizontal | 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-cachetrue | 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-fullscreentrue | 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-minitrue | 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-fullscreentrue | 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-fullscreentrue | 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-btntrue | 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-minitrue | false Określa, czy wejście powinno być małym lub normalnym rozmiarze
data-rolenone 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-directionreverse animacja przejścia do tyłu (tylko dla strony lub okna)
data-dom-cachetrue | 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-prefetchtrue | false Określa, czy wstępne pobieranie stron do DOM, dzięki czemu są one dostępne, gdy użytkownik odwiedza je
data-relback | 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-autodividerstrue | 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-filtertrue | 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-insettrue | 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-rolelist-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-iconposleft | 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-cachetrue | 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-urlurl 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-tolerance30, 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-relpopup Aby otworzyć okno podręczne
data-transitionfade | 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-minitrue | false Określa, czy przycisk powinien być mały lub normalnym rozmiarze
data-rolenone 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-iconposleft | right | top | bottom | notext Określa pozycję ikony
data-inlinetrue | false Określa, czy wybrać element powinien być inline, czy też nie
data-minitrue | 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-placeholdertrue | false Może być ustawiony na <option> element nienatywnej wybierz
data-rolenone 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-highlighttrue | false Określa, czy utwór suwak powinien być podświetlony, czy nie
data-minitrue | false Określa, czy suwak powinien być mały lub normalnym rozmiarze
data-rolenone 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