Atrybuty danych jQuery Mobile Data

Atrybuty danych jQuery

jQuery Mobile używa atrybutów HTML5 data-* do tworzenia "przyjaznych dla dotyku" i estetycznych wyglądów dla urządzeń mobilnych.

W poniższej liście odniesień, wartości w pogrubieniu określają wartości domyślne.

Button

Hyperlinki z atrybutem data-role="button". Elementy przycisków w pasku narzędziowym oraz linki oraz pola wejściowe są automatycznie ustawiane jako style przycisków, bez potrzeby użycia data-role="button".

Atrybuty danych Wartość Opis
data-corners true | false Określ, czy przycisk ma zaokrąglone rogi.
data-icon Dokumentacja ikon Określ, czy przycisk ma ikonę. Domyślnie brak ikony.
data-iconpos left | right | top | bottom | notext Określa pozycję ikony.
data-iconshadow true | false Określ, czy ikona przycisku ma cień.
data-inline true | false Określ, czy przycisk jest wewnętrzny.
data-mini true | false Określ, czy przycisk jest mały, czy standardowy.
data-shadow true | false Określ, czy przycisk ma cień.
data-theme litera (a-z) Określ kolor tematu przycisku.

Wskazówka:Aby połączyć wiele przycisków, użyj kontenera z atrybutami data-role="controlgroup" oraz data-type="horizontal|vertical", aby określić, czy przyciski mają być组合水平还是垂直。

Checkbox

Label i input z type="checkbox" są parą. Są automatycznie ustawiane jako przyciski, bez potrzeby użycia data-role.

Atrybuty danych Wartość Opis
data-mini true | false Określa, czy pola wyboru są małe czy standardowych rozmiarów.
data-role none Prezentuje pola wyboru jako przyciski zamiast przycisków.
data-theme litera (a-z) Określa tematyczną kolorystykę pól wyboru.

Wskazówka:Aby połączyć wiele pól wyboru, użyj data-role="controlgroup" oraz data-type="horizontal|vertical", aby określić, czy pola wyboru mają być połączone poziomo czy pionowo.

Collapsible

Element tytułowy, po którym znajduje się dowolny HTML oznakowany w kontenerze z atrybutem data-role="collapsible".

Atrybuty danych Wartość Opis
data-collapsed true | false Określa, czy zawartość powinna być zamknięta czy rozłożona.
data-collapsed-icon Dokumentacja ikon Określa ikonę przycisku rozwijanego, gdy zawartość jest złożona. Domyślnie to "plus".
data-content-theme litera (a-z) Określa tematyczną kolorystykę zawartości rozwijanej. Dodaje również zaokrąglone rogi do zawartości rozwijanej.
data-expanded-icon Dokumentacja ikon Określa ikonę przycisku rozwijanego, gdy zawartość jest rozłożona. Domyślnie to "minus".
data-iconpos left | right | top | bottom Określa pozycję ikony.
data-inset true | false Określa, czy przycisk rozwijany ma zaokrąglone rogi i marginesy.
data-mini true | false Określa, czy przyciski rozwijane są małe czy standardowych rozmiarów.
data-theme litera (a-z) Określa tematyczną kolorystykę przycisku rozwijanego.

Collapsible Set

Zawartość rozwijana w kontenerze z atrybutem data-role="collapsible-set".

Atrybuty danych Wartość Opis
data-collapsed-icon Dokumentacja ikon Określa ikonę przycisku rozwijanego, gdy zawartość jest złożona. Domyślnie to "plus".
data-content-theme litera (a-z) Określa tematyczną kolorystykę zawartości rozwijanej.
data-expanded-icon Dokumentacja ikon Określa ikonę przycisku rozwijanego, gdy zawartość jest rozłożona. Domyślnie to "minus".
data-iconpos left | right | top | bottom | notext Określa pozycję ikony.
data-inset true | false Określa, czy przyciski rozwijane mają zaokrąglone rogi i marginesy.
data-mini true | false Określa, czy przyciski rozwijane są małe czy standardowych rozmiarów.
data-theme litera (a-z) Określa tematyczną kolorystykę grupy rozwijanej.

Content

Kontener z atrybutem data-role="content".

Atrybuty danych Wartość Opis
data-theme litera (a-z) Określa tematyczną kolorystykę zawartości. Domyślnie to "c".

Controlgroup

Kontener <div> lub <fieldset> z atrybutem data-role="controlgroup". Grupa wielu przycisków typu input (oparte na linkach, przyciskach wyboru, polach wyboru, menu wyboru).

Atrybuty danych Wartość Opis
data-mini true | false Określa, czy grupa jest mała czy standardowych rozmiarów.
data-type horizontal | vertical Określa, czy grupa jest wyświetlana poziomo czy pionowo.

Dialog

Kontener lub link z atrybutem data-role="dialog" lub data-rel="dialog".

Atrybuty danych Wartość Opis
data-close-btn-text sometext Określa tekst przycisku zamknięcia używanego wyłącznie w oknie dialogowym.
data-dom-cache true | false Określa, czy dla pojedynczej strony należy czyszczyć pamięć podręczną jQuery DOM (jeśli ustawione na true, należy zwracać uwagę na zarządzanie DOM i przeprowadzać kompleksowe testy na wszystkich urządzeniach mobilnych).
data-overlay-theme litera (a-z) Określ kolor tła strony dialogowej.
data-theme litera (a-z) Określa kolor tematu strony dialogowej.
data-title sometext Określa tytuł strony dialogowej.

Enhancement

Kontener z atrybutami data-enhance="false" lub data-ajax="false".

Atrybuty danych Wartość Opis
data-enhance true | false Jeśli ustawione na "true" (domyślne), jQuery Mobile automatycznie dodaje style do strony, aby lepiej pasowały do urządzeń mobilnych. Jeśli ustawione na "false", framework nie ustawia stylów strony.
data-ajax true | false Określa, czy strona jest ładowana za pomocą AJAX.

注释：data-enhance="false", na przykład w połączeniu z $.mobile.ignoreContentEnabled=true, aby zapobiec automatycznemu dodawaniu stylów strony przez jQuery Mobile.

Gdy $.mobile.ignoreContentEnabled ustawiony jest na true, linki lub elementy formularza w kontenerze z data-ajax="false", będą ignorowane przez funkcję nawigacyjną frameworka.

Fieldcontainer

Kontener opakowujący pary elementów label/form z atrybutem data-role="fieldcontain".

Stały pasek narzędziowy

Kontener z atrybutami data-role="header" lub data-role="footer" oraz data-position="fixed".

Atrybuty danych Wartość Opis
data-disable-page-zoom true | false Określa, czy użytkownik może skalować stronę.
data-fullscreen true | false Określa, czy pasek narzędziowy zawsze znajduje się na górze oraz/lub dole.
data-tap-toggle true | false Określa, czy użytkownik może przełączać widoczność paska narzędziowego przez kliknięcie lub naciśnięcie.
data-transition slide | fade | none Określa efekt przejścia przy kliknięciu lub naciśnięciu.
data-update-page-padding true | false Określa aktualizację wewnętrznych marginesów strony przy zdarzeniach resize, transition oraz "updatelayout" (jQuery Mobile zawsze aktualizuje marginesy przy zdarzeniu "pageshow").
data-visible-on-page-show true | false Określa widoczność paska narzędziowego podczas wyświetlania strony nadrzędnej.

Przełącznik Przełącznik

Element <select> z atrybutem data-role="slider" oraz dwoma elementami <option>.

Atrybuty danych Wartość Opis
data-mini true | false Określa, czy przełącznik jest małego, czy standardowego rozmiaru.
data-role none Zapobiega ustawianiu przełącznika jako styl przycisku przez jQuery Mobile.
data-theme litera (a-z) Określa kolor tematu przełącznika.
data-track-theme litera (a-z) Określa kolor tematu toru.

Stopka

Kontener z atrybutem data-role="footer".

Atrybuty danych Wartość Opis
data-id sometext Określa unikalny ID. Jest wymagane dla stałych stopek.
data-position liniowy | stały Określa, czy stopka jest związana z treścią strony w linii, czy utrzymuje się na dole.
data-fullscreen true | false Określa, czy strona zawsze znajduje się na dole i zakrywa zawartość strony (delikatnie przezroczysta).
data-theme litera (a-z) Określa kolor tematu stopki.

注释：Aby włączyć pozycjonowanie pełnego ekranu, użyj data-position="fixed", a następnie dodaj atrybut data-fullscreen do tego elementu.

Nagłówek

Kontener z data-role="header".

Atrybuty danych Wartość Opis
data-id sometext Określa unikalny ID. Jest wymagane dla stałych nagłówków.
data-position liniowy | stały Określa, czy nagłówek jest związany z treścią strony w linii, czy utrzymuje się na górze.
data-fullscreen true | false Określa, czy strona zawsze znajduje się na górze i zakrywa zawartość strony (delikatnie przezroczysta).
data-theme litera (a-z) Określa kolor tematu nagłówka. Domyślnie to "a".

注释：Aby włączyć pozycjonowanie pełnego ekranu, użyj data-position="fixed", a następnie dodaj atrybut data-fullscreen do tego elementu.

Link

Wszystkie linki, w tym te z data-role="button" oraz przyciski wysyłania formularzy.

Atrybuty danych Wartość Opis
data-ajax true | false Określa, czy strona jest ładowana za pomocą AJAX, aby poprawić doświadczenie użytkownika i przejścia. Jeśli ustawione na false, jQuery Mobile wykona zwykłe żądanie strony.
data-direction odwróć Odwraca animację przejścia (tylko dla stron lub dialogów)
data-dom-cache true | false Określ, czy czyścić osobisty cache jQuery DOM strony (jeśli ustawione na true, należy zwrócić uwagę na zarządzanie DOM i przeprowadzić kompleksowe testy na wszystkich urządzeniach mobilnych).
data-prefetch true | false Określa, czy stronę należy wczytać do DOM-a, aby była dostępna przy nawigacji użytkownika.
data-rel wstecz | dialog | zewnętrzny | wyskakujące Określa opcje dotyczące zachowania linków. Wstecz - cofa się o krok w historii. Dialog - otwiera stronę jako dialog, nie zapisuje w historii. Zewnętrzny - łączy do innego domeny. Otwiera - otwiera okno wyskakujące.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Określ, jak przejść z jednej strony do następnej. Zobacz jQuery Mobile transition.
data-position-to origin | jQuery selector | window Określ pozycję okienka modalnego. Źródło - domyślne. Wysuwa się przy otwieraniu jego linku. jQuery selector - 在指定元素上弹出。 Window - 在窗口屏幕中间弹出。

List

带有 data-role="listview" 属性的

    或
      。

      Atrybuty danych Wartość Opis
      data-autodividers true | false 规定是否自动分隔列表项。
      data-count-theme litera (a-z) 规定计数泡沫的主题颜色。默认是 "c"。
      data-divider-theme litera (a-z) 规定列表分隔符的主题颜色。默认是 "b"。
      data-filter true | false 规定是否在列表中添加搜索框。
      data-filter-placeholder sometext 规定搜索框中的文本。默认是 "Filter items..."。
      data-filter-theme litera (a-z) 规定搜索过滤程序的主题颜色。默认是 "c"。
      data-icon Dokumentacja ikon 规定列表的图标。
      data-inset true | false 规定是否为列表添加圆角和外边距样式。
      data-split-icon Dokumentacja ikon 规定划分按钮的图标。默认是 "arrow-r"。
      data-split-theme litera (a-z) 规定划分按钮的主题颜色。默认是 "b"。
      data-theme litera (a-z) 规定列表的主题颜色。

List item

带有 data-role="listview" 属性的

    或
      中的
    • 。

      Atrybuty danych Wartość Opis
      data-filtertext sometext 规定在过滤元素时搜索的文本。该文本而不是实际的列表项文本将会被搜索。
      data-icon Dokumentacja ikon 规定列表项的图标。
      data-role list-divider 规定列表项的分隔符。
      data-theme litera (a-z) 规定列表项的主题颜色。

      注释：data-icon 属性仅适用于含有链接的列表项。

Navbar

带有 data-role="navbar" 属性的容器内部的

  • 元素。

    Atrybuty danych Wartość Opis
    data-icon Dokumentacja ikon 规定列表项的图标。
    data-iconpos left | right | top | bottom | notext Określa pozycję ikony.

    Wskazówka:导航栏从其父容器继承 theme-swatch。向导航栏设置 data-theme 属性是不可行的。可以单独向 navbar 中的每个链接设置 data-theme 属性。

    • Strona

    Kontener z atrybutem data-role="page".

    Atrybuty danych Wartość Opis
    data-add-back-btn true | false Automatyczne dodanie przycisku cofania, używane tylko w nagłówku strony.
    data-back-btn-text sometext Określa tekst przycisku cofania.
    data-back-btn-theme litera (a-z) Określa kolor tematu przycisku cofania.
    data-close-btn-text litera (a-z) Określa tekst przycisku zamknięcia w oknie dialogowym.
    data-dom-cache true | false Określ, czy czyścić osobisty cache jQuery DOM strony (jeśli ustawione na true, należy zwrócić uwagę na zarządzanie DOM i przeprowadzić kompleksowe testy na wszystkich urządzeniach mobilnych).
    data-overlay-theme litera (a-z) Określ kolor tła strony dialogowej.
    data-theme litera (a-z) Określ kolor tematu strony. Domyślnie jest to wartość "c".
    data-title sometext Określ tytuł strony.
    data-url url Ta wartość jest używana do aktualizacji URL, a nie do żądania strony.

    Popup

    Kontener z atrybutem data-role="popup":

    Atrybuty danych Wartość Opis
    data-corners true | false Określ, czy okienko modalne ma zaokrąglone rogi.
    data-overlay-theme litera (a-z) Określ kolor tła okienka modalnego. Domyślnie jest to wartość "none", co oznacza przezroczystość.
    data-shadow true | false Określ, czy okienko modalne ma cień.
    data-theme litera (a-z) Określ kolor tematu okienka modalnego. Domyślnie jest to wartość "none", co oznacza przezroczystość.
    data-tolerance 30, 15, 30, 15 Określ odległość od krawędzi okna (top, right, bottom, left).

    Anchór z atrybutem data-rel="popup":

    Atrybuty danych Wartość Opis
    data-position-to origin | jQuery selector | window Określ pozycję okienka modalnego. Origin - domyślnie. Okienko modalne znajduje się na linku, który je otwiera. jQuery selector - okienko modalne znajduje się na określonym elemencie. Window - okienko modalne znajduje się w środku ekranu okna.
    data-rel popup Używane do otwierania okienek modalnych.
    data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Określ, jak przejść z jednej strony do następnej. Zobacz jQuery Mobile transition.

    Radio Button

    Label związany z input o atrybucie type="radio" jest automatycznie ustawiany jako styl przycisku, bez potrzeby data-role.

    Atrybuty danych Wartość Opis
    data-mini true | false Określ, czy przyciski mają być małe czy standardowego rozmiaru.
    data-role none Umieść jQuery Mobile, aby ustawić style przycisków jako enhanced buttons.
    data-theme litera (a-z) Określ kolor tematu pól wyboru.

    Wskazówka:Aby połączyć wiele pól wyboru, użyj data-role="controlgroup" oraz data-type="horizontal|vertical", aby określić, czy przyciski mają być połączone poziomo czy pionowo.

    Select

    Wszystkie elementy <select>. Są automatycznie ustawiane jako styl przycisku, nie wymagają atrybutu date-role.

    Atrybuty danych Wartość Opis
    data-icon Dokumentacja ikon Określa ikonę elementu select. Domyślnie to "arrow-d".
    data-iconpos left | right | top | bottom | notext Określa pozycję ikony.
    data-inline true | false Określa, czy element select jest wstawiony w linii.
    data-mini true | false Określa, czy element select jest małego czy standardowego rozmiaru.
    data-native-menu true | false Jeśli ustawione na false, używa własnego menu wyboru jQuery (zaleca się, jeśli wybór menu ma mieć jednolity wygląd na wszystkich urządzeniach mobilnych).
    data-overlay-theme litera (a-z) Określa tematyczną kolorystykę niestandardowego menu wyboru jQuery (używane razem z data-native-menu="false").
    data-placeholder true | false Można ustawić na elementach <option> nieoryginalnego select.
    data-role none Umieszcza jQuery Mobile, aby ustawić styl przycisku dla elementu select.
    data-theme litera (a-z) Określa tematyczną kolorystykę elementu select.

    Wskazówka:Aby połączyć wiele elementów select, użyj data-role="controlgroup" oraz data-type="horizontal|vertical", aby określić, czy elementy mają być połączone poziomo czy pionowo.

    Slider

    Elementy input o atrybucie type="range" są automatycznie ustawiane jako styl przycisku, nie wymagają atrybutu data-role.

    Atrybuty danych Wartość Opis
    data-highlight true | false Określa, czy ścieżka suwaka ma być wyróżniona.
    data-mini true | false Określa, czy suwak jest małego czy standardowego rozmiaru.
    data-role none Umieszcza jQuery Mobile, aby ustawić styl przycisku dla przycisku ustawień suwaka.
    data-theme litera (a-z) Określa tematyczną kolorystykę kontrolki suwaka (input, uchwyt i ścieżka).
    data-track-theme litera (a-z) Określa tematyczną kolorystykę ścieżki suwaka.

    Input tekstowy i textarea

    Elementy input lub textarea o atrybutach type="text|search|etc." są automatycznie stylizowane, nie wymagają atrybutu data-role.

    Atrybuty danych Wartość Opis
    data-mini true | false Określa, czy element input jest małych czy standardowych rozmiarów.
    data-role none Umieszcza jQuery Mobile, ustawia styl input/textarea jako przycisk.
    data-theme litera (a-z) Określa kolor tematu pola wejściowego.