jQuery Mobile Data-Attribute

jQuery Data-Attribute

jQuery Mobile verwendet HTML5 data-*-Attribute, um auf mobilen Geräten ein "berührungsfreundliches" und ansprechendes Aussehen zu erstellen.

In der folgenden Referenzliste wird der fettgedruckte Wert als Standardwert angegeben.

Button

Hyperlinks mit data-role="button". Die Button-Elemente in der Symbolleiste und die Links sowie Eingabefelder werden automatisch mit dem Button-Stil ausgestattet, ohne dass data-role="button" erforderlich ist.

Data-Attribute Wert Beschreibung
data-corners true | false Bestimmen Sie, ob die Ecken der Buttons abgerundet sein sollen.
All <select> elements. They are automatically styled as buttons and do not require date-role. data-icon Bestimmen Sie das Symbol des Buttons. Standardmäßig gibt es kein Symbol.
Specify the icon for the select element. The default is "arrow-d". data-iconpos Specify the position of the icon. It can be left | right | top | bottom | notext.
data-iconshadow true | false Bestimmen Sie, ob der Button-Symbol Schatten haben soll.
data-inline true | false Bestimmen Sie, ob die Buttons inline sein sollen.
data-mini true | false Bestimmen Sie, ob die Buttons kleine oder normale Größe haben sollen.
data-shadow true | false Bestimmen Sie, ob die Buttons Schatten haben sollen.
data-theme Buchstabe (a-z) Bestimmen Sie die Themenfarbe der Buttons.

Hint:Um mehrere Buttons zu kombinieren, verwenden Sie einen Container mit den Attributen data-role="controlgroup" und data-type="horizontal|vertical", um zu bestimmen, ob die Buttons horizontal oder vertikal kombiniert werden sollen.

Checkbox

Label und input mit type="checkbox" sind paarweise. Wird automatisch in einen Button-Stil umgewandelt und benötigt kein data-role.

Data-Attribute Wert Beschreibung
data-mini true | false Bestimmt, ob die Checkboxen eine kleine oder eine normale Größe haben.
data-role none Verhindert, dass jQuery Mobile die Checkboxen in ein Button-Stil umwandelt.
data-theme Buchstabe (a-z) Bestimmt die Themenfarbe der Checkboxen.

Hint:Um mehrere Checkboxen zu kombinieren, verwenden Sie data-role="controlgroup" und data-type="horizontal|vertical", um zu bestimmen, ob die Checkboxen horizontal oder vertikal kombiniert werden sollen.

Collapsible

Titel-Element, gefolgt von beliebigen HTML-Marken in einem Container mit dem Attribut data-role="collapsible".

Data-Attribute Wert Beschreibung
data-collapsed true | false Bestimmt, ob der Inhalt geschlossen oder geöffnet werden soll.
data-collapsed-icon data-icon Bestimmt das Symbol des faltbaren Buttons. Standard ist "plus".
data-content-theme Buchstabe (a-z) Bestimmt die Themenfarbe des faltbaren Inhalts. Fügt auch abgerundete Ecken hinzu.
data-expanded-icon data-icon Bestimmt das Symbol des faltbaren Buttons, wenn der Inhalt geöffnet ist. Standard ist "Minus".
Specify the icon for the select element. The default is "arrow-d". links | rechts | oben | unten Specify the position of the icon. It can be left | right | top | bottom | notext.
data-inset true | false Bestimmt, ob der faltbare Button abgerundete Ecken und Abstände haben soll.
data-mini true | false Bestimmt, ob die faltbaren Buttons eine kleine oder eine normale Größe haben.
data-theme Buchstabe (a-z) Bestimmt die Themenfarbe des faltbaren Buttons.

Collapsible Set

Faltbarer Inhalt im Container mit dem Attribut data-role="collapsible-set".

Data-Attribute Wert Beschreibung
data-collapsed-icon data-icon Bestimmt das Symbol des faltbaren Buttons. Standard ist "Plus".
data-content-theme Buchstabe (a-z) Bestimmt die Themenfarbe des faltbaren Inhalts.
data-expanded-icon data-icon Bestimmt das Symbol des faltbaren Buttons, wenn der Inhalt geöffnet ist. Standard ist "Minus".
Specify the icon for the select element. The default is "arrow-d". data-iconpos Specify the position of the icon. It can be left | right | top | bottom | notext.
data-inset true | false Bestimmt, ob die faltbaren Buttons abgerundete Ecken und Abstände haben.
data-mini true | false Bestimmt, ob die faltbaren Buttons eine kleine oder eine normale Größe haben.
data-theme Buchstabe (a-z) Bestimmt die Themenfarbe der faltbaren Sammlung.

Content

Container mit dem Attribut data-role="content".

Data-Attribute Wert Beschreibung
data-theme Buchstabe (a-z) Bestimmt die Themenfarbe des Inhalts. Standard ist "c".

Controlgroup

Div- oder fieldset-Container mit dem Attribut data-role="controlgroup". Kombiniert mehrere Einträge mit einem einzigen Typ (Buttons, die auf Links basieren, Radio-Buttons, Checkboxen, Auswahllisten).

Data-Attribute Wert Beschreibung
data-mini true | false Bestimmt, ob die Kombination eine kleine oder eine normale Größe hat.
data-type horizontal | vertical Bestimmt, ob die Kombination horizontal oder vertikal angezeigt wird.

Dialog

Der Container mit dem Attribut data-role="dialog" oder der Link mit data-rel="dialog".

Data-Attribute Wert Beschreibung
data-close-btn-text sometext Regelung des Texts des Schließknopfes für die Dialogbox.
data-dom-cache true | false Regelung, ob der jQuery DOM-Cache für individuelle Seiten geleert wird (wenn auf true gesetzt, ist die Verwaltung des DOM und ein gründliches Testen auf allen mobilen Geräten erforderlich).
data-overlay-theme Buchstabe (a-z) Bestimmen Sie die Überlagerungs-(Hintergrund-)farbe der Dialogseite.
data-theme Buchstabe (a-z) Regelung der Themenfarbe der Dialogseite.
data-title sometext Regelung des Titels der Dialogseite.

Enhancement

Container mit den Attributen data-enhance="false" oder data-ajax="false".

Data-Attribute Wert Beschreibung
data-enhance true | false Wenn auf "true" gesetzt (Standard), fügt jQuery Mobile automatisch Stile hinzu, die die Seite für mobile Geräte besser machen. Wenn auf "false" gesetzt, wird das Framework keine Stile für die Seite festlegen.
data-ajax true | false Regelung, ob die Seite über AJAX geladen wird.

Anmerkung:data-enhance="false", z.B. in Verbindung mit $.mobile.ignoreContentEnabled=true, um die automatische Hinzufügung von Seitenstilen durch jQuery Mobile zu verhindern.

Wenn $.mobile.ignoreContentEnabled auf true gesetzt ist, werden alle Links oder Formularelemente in Containern mit data-ajax="false" vom Navigationsfunktion des Frameworks ignoriert.

Fieldcontainer

Container für das Paar von label/form-Elementen mit data-role="fieldcontain".

Fester Werkzeugleiste

Container mit den Attributen data-role="header" oder data-role="footer" und data-position="fixed".

Data-Attribute Wert Beschreibung
data-disable-page-zoom true | false Regelung, ob der Benutzer die Seite vergrößern oder verkleinern kann.
data-fullscreen true | false Regelung, dass die Werkleiste immer oben oder auch unten positioniert ist.
data-tap-toggle true | false Regelung, ob der Benutzer die Sichtbarkeit der Werkleiste durch Klick oder Berührung umschalten kann.
data-transition slide | fade | none Regelung des Übergangseffekts bei Klick oder Berührung.
data-update-page-padding true | false Regelung der Aktualisierung des oberen, unteren und inneren Randabstands der Seite bei Ereignissen wie resize, transition und "updatelayout" (jQuery Mobile aktualisiert immer den Innenabstand beim "pageshow"-Ereignis).
data-visible-on-page-show true | false Regelung der Sichtbarkeit der Werkleiste beim Anzeigen der Elternseite.

Drehbarer Schalter

Ein <select>-Element mit dem Attribut data-role="slider" und zwei <option>-Elementen.

Data-Attribute Wert Beschreibung
data-mini true | false Bestimmt, ob der Schalter kleiner oder normaler Größe ist.
data-role none Verhindert, dass jQuery Mobile den Schiebereglerschalter als Buttons-Stil setzt.
data-theme Buchstabe (a-z) Bestimmt die Themenfarbe des Schiebereglers.
data-track-theme Buchstabe (a-z) Bestimmt die Themenfarbe der Spur.

Fuß

Container mit data-role="footer".

Data-Attribute Wert Beschreibung
data-id sometext Bestimmt den eindeutigen ID. Erforderlich für persistente Fußzeilen.
data-position Inline | Fest Bestimmt, ob der Fuß inline mit dem Inhaltsbereich ist oder unten bleiben soll.
data-fullscreen true | false Bestimmt, ob die Seite immer unten positioniert ist und den Inhaltsbereich der Seite überlagert (leicht durchsichtig).
data-theme Buchstabe (a-z) Bestimmt die Themenfarbe des Fußes. Standard ist "a".

Anmerkung:Um die fullscreen-Position zu aktivieren, verwenden Sie data-position="fixed" und fügen Sie dem Element data-fullscreen hinzu.

Kopf

Container mit data-role="header".

Data-Attribute Wert Beschreibung
data-id sometext Bestimmt den eindeutigen ID. Erforderlich für persistente Kopfzeilen.
data-position Inline | Fest Bestimmt, ob der Kopf inline mit dem Inhaltsbereich ist oder oben bleiben soll.
data-fullscreen true | false Bestimmt, ob die Seite immer oben positioniert ist und den Inhaltsbereich der Seite überlagert (leicht durchsichtig).
data-theme Buchstabe (a-z) Bestimmt die Themenfarbe des Kopfes. Standard ist "a".

Anmerkung:Um die fullscreen-Position zu aktivieren, verwenden Sie data-position="fixed" und fügen Sie dem Element data-fullscreen hinzu.

Link

Alle Links, einschließlich Links mit data-role="button" sowie Formularsendeschaltknöpfen.

Data-Attribute Wert Beschreibung
data-ajax true | false Bestimmt, ob die Seite über AJAX geladen wird, um die Benutzererfahrung und den Übergang zu verbessern. Wenn auf false gesetzt, führt jQuery Mobile eine normale Seitenanfrage durch.
data-direction Umkehren Umkehrt die Übergangsanimation (nur für Seiten oder Dialoge)
data-dom-cache true | false Bestimmen Sie, ob der jQuery DOM-Cache für einzelne Seiten gelöscht wird (wenn auf true gesetzt, müssen Sie auf die DOM-Verwaltung achten und alle mobilen Geräte gründlich testen).
data-prefetch true | false Bestimmt, ob die Seite in den DOM vorgecacht wird, um ihre Verfügbarkeit beim Besuch durch den Benutzer zu gewährleisten.
data-rel Zurück | Dialog | Extern | Pop-up Bestimmt die Optionen, wie Links verhalten sollen. Zurück - Bewegt einen Schritt zurück in der Historie. Dialog - Öffnet die Seite als Dialog, wird nicht in der Historie protokolliert. Extern - Verlinkt auf eine andere Domäne. Öffnet - Öffnet ein Pop-up-Fenster.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Bestimmen Sie, wie von einer Seite zur nächsten übergangen wird. Beachten Sie die jQuery Mobile Übergänge.
data-position-to origin | jQuery selector | window Bestimmen Sie die Position des Pop-up-Fensters. Ursprung - Standard. Öffnet sich bei Aktivierung des Links. jQuery-Selektor - Fügt sich auf dem angegebenen Element ein. Fenster - Fügt sich in der Mitte des Fenstersbildschirms ein.

List

Element <ol> oder <ul> mit dem Attribut data-role="listview".

Data-Attribute Wert Beschreibung
data-autodividers true | false Bestimmt, ob Listeinträge automatisch getrennt werden sollen.
data-count-theme Buchstabe (a-z) Bestimmt die Themenfarbe der Zählpumpe. Standard ist "c".
data-divider-theme Buchstabe (a-z) Bestimmt die Themenfarbe der Listeinträge. Standard ist "b".
data-filter true | false Bestimmt, ob ein Suchfeld in der Liste hinzugefügt werden soll.
data-filter-placeholder sometext Bestimmt den Text im Suchfeld. Standard ist "Filter items...".
data-filter-theme Buchstabe (a-z) Bestimmt die Themenfarbe des Suchfilters. Standard ist "c".
All <select> elements. They are automatically styled as buttons and do not require date-role. data-icon Bestimmt das Symbol der Liste.
data-inset true | false Bestimmt, ob Rundenkanten und Außenabstände für die Liste hinzugefügt werden sollen.
data-split-icon data-icon Bestimmt das Symbol des Trennknopfes. Standard ist "arrow-r".
data-split-theme Buchstabe (a-z) Bestimmt die Themenfarbe des Trennknopfes. Standard ist "b".
data-theme Buchstabe (a-z) Bestimmt die Themenfarbe der Liste.

List item

Element <li> im <ol> oder <ul> mit dem Attribut data-role="listview".

Data-Attribute Wert Beschreibung
data-filtertext sometext Bestimmt den Text, der bei der Filterung des Elements gesucht wird. Dieser Text wird anstatt des tatsächlichen Textes des Listeintrags gesucht.
All <select> elements. They are automatically styled as buttons and do not require date-role. data-icon Bestimmt das Symbol der Liste.
data-role list-divider Bestimmt den Trennstrich der Liste.
data-theme Buchstabe (a-z) Bestimmt die Themenfarbe der Listeinträge.

Anmerkung:Das data-icon-Attribut ist nur für Listeinträge mit Links gültig.

Navbar

Element <li> im Behälter mit dem Attribut data-role="navbar".

Data-Attribute Wert Beschreibung
All <select> elements. They are automatically styled as buttons and do not require date-role. data-icon Bestimmt das Symbol der Liste.
Specify the icon for the select element. The default is "arrow-d". data-iconpos Specify the position of the icon. It can be left | right | top | bottom | notext.

Hint:Die Navigationsleiste erbt das theme-swatch von ihrem übergeordneten Behälter. Es ist nicht möglich, die data-theme-Attribut der Navigationsleiste zu setzen. Das data-theme-Attribut kann separately für jeden Link in der navbar gesetzt werden.

Page

Behälter mit dem Attribut data-role="page".

Data-Attribute Wert Beschreibung
data-add-back-btn true | false Fügt automatisch einen Zurück-Knopf hinzu, der nur in der Kopfzeile verwendet wird.
data-back-btn-text sometext Bestimmt den Text des Zurück-Knopfes.
data-back-btn-theme Buchstabe (a-z) Bestimmt die Themenfarbe des Zurück-Knopfes.
data-close-btn-text Buchstabe (a-z) Bestimmt den Text des Schließknopfes auf dem Dialog.
data-dom-cache true | false Bestimmen Sie, ob der jQuery DOM-Cache für einzelne Seiten gelöscht wird (wenn auf true gesetzt, müssen Sie auf die DOM-Verwaltung achten und alle mobilen Geräte gründlich testen).
data-overlay-theme Buchstabe (a-z) Bestimmen Sie die Überlagerungs-(Hintergrund-)farbe der Dialogseite.
data-theme Buchstabe (a-z) Bestimmen Sie die Themenfarbe der Seite. Standard ist "c".
data-title sometext Bestimmen Sie den Titel der Seite.
data-url url Dieser Wert wird verwendet, um die URL zu aktualisieren, nicht jedoch, um eine Seite zu laden.

Popup

Container mit dem Attribut data-role="popup".

Data-Attribute Wert Beschreibung
data-corners true | false Bestimmen Sie, ob das Pop-up-Fenster abgerundete Ecken hat.
data-overlay-theme Buchstabe (a-z) Bestimmen Sie die Überlagerungs-(Hintergrund-)farbe des Pop-up-Fensters. Standard ist transparenter Hintergrund (none).
data-shadow true | false Bestimmen Sie, ob das Pop-up-Fenster einen Schatten hat.
data-theme Buchstabe (a-z) Bestimmen Sie die Themenfarbe des Pop-up-Fensters. Standard ist "none", was transparent bedeutet.
data-tolerance 30, 15, 30, 15 Bestimmen Sie den Abstand vom Rand des Fensters (top, right, bottom, left).

Anker mit data-rel="popup"-Attribut:

Data-Attribute Wert Beschreibung
data-position-to origin | jQuery selector | window Bestimmen Sie die Position des Pop-up-Fensters. Origin - Standard. Das Pop-up-Fenster befindet sich auf dem Link, der es öffnet. jQuery selector - Das Pop-up-Fenster befindet sich auf dem angegebenen Element. Window - Das Pop-up-Fenster befindet sich in der Mitte des Bildschirms.
data-rel popup Für das Öffnen der Pop-up-Fenster.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Bestimmen Sie, wie von einer Seite zur nächsten übergangen wird. Beachten Sie die jQuery Mobile Übergänge.

Radio Button

Ein label mit einem input von type="radio" wird automatisch in Button-Style umgewandelt und benötigt kein data-role.

Data-Attribute Wert Beschreibung
data-mini true | false Bestimmen Sie, ob die Schaltflächen klein oder in der Standardgröße sein sollen.
data-role none Stellen Sie die Schaltflächen von jQuery Mobile in den Stil der enhanced buttons.
data-theme Buchstabe (a-z) Bestimmen Sie die Themenfarbe der Single-Optionen.

Hint:Um mehrere Single-Optionen zu kombinieren, verwenden Sie data-role="controlgroup" und data-type="horizontal|vertical", um die horizontale oder vertikale Kombination der Schaltflächen zu bestimmen.

Select

Select

Data-Attribute Wert Beschreibung
All <select> elements. They are automatically styled as buttons and do not require date-role. data-icon Icons Reference
Specify the icon for the select element. The default is "arrow-d". data-iconpos Specify the position of the icon. It can be left | right | top | bottom | notext.
data-inline true | false Specify whether the select element is inline.
data-mini true | false Specify whether the select element is small or regular size.
data-native-menu true | false If set to false, jQuery's own custom select menu will be used (it is recommended to use it if you want the select menu to have a consistent appearance on all mobile devices).
data-overlay-theme Buchstabe (a-z) Specify the theme color for jQuery custom select menu (to be used with data-native-menu="false").
data-placeholder true | false Can be set on the non-native <option> element of select.
data-role none Apply jQuery Mobile styles to set the select element as a button style.
data-theme Buchstabe (a-z) Specify the theme color for the select element.

Hint:To combine multiple select elements, use data-role="controlgroup" and data-type="horizontal|vertical" to specify whether to combine the element horizontally or vertically.

Slider

input elements with type="range". They are automatically styled as buttons and do not require data-role.

Data-Attribute Wert Beschreibung
data-highlight true | false Specify whether to highlight the slider track.
data-mini true | false Specify whether the slider is small or regular size.
data-role none Apply jQuery Mobile styles to the slider set button.
data-theme Buchstabe (a-z) Specify the theme color for the slider control (input, handle, and track).
data-track-theme Buchstabe (a-z) Specify the theme color for the slider track.

Text input & Textarea

Elements with the attribute type="text|search|etc." or textarea elements. They are automatically styled and do not require data-role.

Data-Attribute Wert Beschreibung
data-mini true | false Bestimmt, ob das input-Element klein oder normal groß ist.
data-role none Stellt den Stil der Schaltfläche für input/textarea ein, die jQuery Mobile verwendet.
data-theme Buchstabe (a-z) Bestimmt die Themenfarbe des Eingabefelds.