jQuery Mobile Data Attribute

jQuery Data Properties

jQuery Mobile gebruikt HTML5 data-* attributen om een "aanraakvriendelijke" en aantrekkelijke look te creëren voor mobiele apparaten.

In de onderstaande referentielijst worden de vetgedrukte waarden de standaardwaarden genoemd.

Button

Hyperlinks met data-role="button". Knoppen, links en invoervelden in de werkbalk worden automatisch geconfigureerd met de knopstijl, zonder data-role="button" nodig te hebben.

Data Attributes Waarde Beschrijving
data-corners true | false Stel in of de knop ronde hoeken heeft.
All <select> elements. They are automatically set to button style and do not require date-role. data-icon Stel in welk pictogram de knop heeft. Standaard heeft de knop geen pictogram.
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 Stel in of de knoppijl een schaduw heeft.
data-inline true | false Stel in of de knop inline moet zijn.
data-mini true | false Stel in of de knop klein of van standaard formaat is.
data-shadow true | false Stel in of de knop een schaduw heeft.
data-theme letter (a-z) Stel de themakleur van de knop in.

Tip:Als u meerdere knoppen wilt combineren, gebruik dan een container met de attributen data-role="controlgroup" en data-type="horizontal|vertical" om te bepalen of de knoppen horizontaal of verticaal moeten worden gecombineerd.

Checkbox

Label and input with type="checkbox" are paired. They will be automatically set to button style, no need for 'data-role'.

Data Attributes Waarde Beschrijving
data-mini true | false Specify whether the checkbox is small or regular size.
data-role none Prevent jQuery Mobile from setting the checkbox to button style.
data-theme letter (a-z) Specify the theme color of the checkbox.

Tip:To combine multiple checkboxes, use 'data-role="controlgroup"' and 'data-type="horizontal|vertical"' to specify horizontal or vertical combination of checkboxes.

Collapsible

Title element, followed by any HTML markup within a container with attribute 'data-role="collapsible"'.

Data Attributes Waarde Beschrijving
data-collapsed true | false Specify whether the content should be closed or expanded.
data-collapsed-icon data-icon Specify the icon of the collapsible button. Default is 'plus'.
data-content-theme letter (a-z) Specify the theme color of the collapsible content. It will also add rounded corners to the collapsible content.
data-expanded-icon data-icon Specify the icon of the collapsible button when the content is expanded. Default is 'minus'.
Specify the icon for the select element. The default is "arrow-d". left | right | top | bottom Specify the position of the icon. It can be left | right | top | bottom | notext.
data-inset true | false Specify whether the collapsible button has rounded corners and margin styles.
data-mini true | false Specify whether the collapsible button is small or regular size.
data-theme letter (a-z) Specify the theme color of the collapsible button.

Collapsible Set

Collapsible content block within a container with attribute 'data-role="collapsible-set"'.

Data Attributes Waarde Beschrijving
data-collapsed-icon data-icon Specify the icon of the collapsible button. Default is 'plus'.
data-content-theme letter (a-z) Specify the theme color of the collapsible content.
data-expanded-icon data-icon Specify the icon of the collapsible button when the content is expanded. Default is '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 Specify whether the collapsibles have rounded corners and margin styles.
data-mini true | false Specify whether the collapsible button is small or regular size.
data-theme letter (a-z) Specify the theme color of the collapsible set.

Content

Container with attribute 'data-role="content"'.

Data Attributes Waarde Beschrijving
data-theme letter (a-z) Specify the theme color of the content. Default is 'c'.

Controlgroup

Container with attribute 'data-role="controlgroup"' <div> or <fieldset>. Combine multiple button-style inputs of a single type (based on link buttons, radio buttons, checkboxes, select menus).

Data Attributes Waarde Beschrijving
data-mini true | false Specify whether the combination is small or regular size.
data-type horizontal | vertical Specify whether the combination is horizontal or vertical display.

Dialog

Container of 'data-role="dialog"' or link with 'data-rel="dialog"'.

Data Attributes Waarde Beschrijving
data-close-btn-text sometext Regel de tekst van de sluitingsknop alleen voor het dialoogvenster.
data-dom-cache true | false Regel of de jQuery DOM-cache voor individuele pagina's wordt opgeschoond (indien ingesteld op true, moet er aandacht worden besteed aan het beheer van de DOM en moet alles grondig worden getest op alle mobiele apparaten).
data-overlay-theme letter (a-z) Bepaal de overlay (achtergrond) kleur van de dialoogpagina.
data-theme letter (a-z) Regel de themakleur van de dialoogpagina.
data-title sometext Regel de titel van de dialoogpagina.

Enhancement

Container met de eigenschappen data-enhance="false" of data-ajax="false".

Data Attributes Waarde Beschrijving
data-enhance true | false Indien ingesteld op "true" (standaard), voegt jQuery Mobile automatisch stijlen toe aan de pagina om deze beter geschikt te maken voor mobiele apparaten. Indien ingesteld op "false", stelt het kader geen stijlen in voor de pagina.
data-ajax true | false Regel of de pagina via AJAX wordt geladen.

Opmerking:data-enhance="false", bijvoorbeeld in combinatie met $.mobile.ignoreContentEnabled=true", om jQuery Mobile te voorkomen dat het automatisch pagina-stijlen toevoegt.

Wanneer $.mobile.ignoreContentEnabled ingesteld is op true, worden alle links of formulierelementen in containers met data-ajax="false" genegeerd door de navigatiefunctie van het kader.

Fieldcontainer

Container voor het paar label/form elementen met data-role="fieldcontain".

Fixed Toolbar

Container met de eigenschappen data-role="header" of data-role="footer" en data-position="fixed".

Data Attributes Waarde Beschrijving
data-disable-page-zoom true | false Regel of de gebruiker de mogelijkheid heeft om de pagina te zoomen.
data-fullscreen true | false Regel of de werkbalk altijd bovenaan en/of onderaan blijft.
data-tap-toggle true | false Regel of de gebruiker de mogelijkheid heeft om de zichtbaarheid van de werkbalk in te schakelen/deschakelen door te tikken/klikken.
data-transition slide | fade | none Regel het overgangseffect bij het tikken/klikken.
data-update-page-padding true | false Regel de bijpassende boven- en onderbalken van de pagina bij het gebeuren van resize, transition en "updatelayout"-gebeurtenissen (jQuery Mobile update altijd de binnenmarge bij het gebeuren van het "pageshow"-gebeurtenis).
data-visible-on-page-show true | false Regel de zichtbaarheid van de werkbalk bij het weergeven van de ouderpagina.

Omdraaien schakelaar

Een <select>-element met data-role="slider"-eigenschap en twee <option>-elementen.

Data Attributes Waarde Beschrijving
data-mini true | false Stelt in of de schakelaar kleine of standaardafmetingen moet hebben.
data-role none Voorkomt dat jQuery Mobile de schakelaar instelt als knopstijl.
data-theme letter (a-z) Stelt de themakleur van de schakelaar in.
data-track-theme letter (a-z) Stelt de themakleur van de spoor in.

Footer

Container met data-role="footer"-eigenschap.

Data Attributes Waarde Beschrijving
data-id sometext Stelt een unieke ID in. Dit is vereist voor persistente voetteksten.
data-position inline | fixed Stelt in of de voettekst inline moet blijven of vast aan de onderkant moet blijven.
data-fullscreen true | false Stelt in of de voettekst altijd onderaan moet blijven en de inhoud van de pagina moet overdekken (iets doorschijnend).
data-theme letter (a-z) Stelt de themakleur van de voettekst in. Standaard is dit "a".

Opmerking:Gebruik data-position="fixed" om fullscreen-positie in te schakelen, en voeg vervolgens de data-fullscreen-eigenschap toe aan het element.

Header

Container met data-role="header".

Data Attributes Waarde Beschrijving
data-id sometext Stelt een unieke ID in. Dit is vereist voor persistente headers.
data-position inline | fixed Stelt in of de hoofding inline moet blijven of vast aan de top moet blijven.
data-fullscreen true | false Stelt in of de hoofding altijd bovenaan moet blijven en de inhoud van de pagina moet overdekken (iets doorschijnend).
data-theme letter (a-z) Stelt de themakleur van de hoofding in. Standaard is dit "a".

Opmerking:Gebruik data-position="fixed" om fullscreen-positie in te schakelen, en voeg vervolgens de data-fullscreen-eigenschap toe aan het element.

Link

Alle links, inclusief links met data-role="button" en formulierindienenknoppen.

Data Attributes Waarde Beschrijving
data-ajax true | false Stelt in of de pagina moet worden geladen via AJAX om de gebruikerservaring en het overgangsproces te verbeteren. Als ingesteld op false, zal jQuery Mobile een gewone paginaanvraag uitvoeren.
data-direction reverse Keert de transitieanimatie om (alleen voor pagina's of dialogen).
data-dom-cache true | false Bepaal of de jQuery DOM cache van individuele pagina's moet worden gewist (indien ingesteld op true, moet je aandacht besteden aan het beheer van het DOM en alle mobiele apparaten grondig testen).
data-prefetch true | false Stelt in of de pagina vooraf moet worden ingeladen in het DOM, zodat het beschikbaar is bij het bezoeken ervan door de gebruiker.
data-rel back | dialog | external | popup Stelt opties in over het gedrag van links. Terug - beweegt een stap terug in de geschiedenis. Dialoog - opent de pagina als een dialoog, zonder in de geschiedenis op te slaan. Externe - koppelt naar een andere domein. Opent - opent een pop-upvenster.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Bepaal hoe je van een pagina overgaat naar de volgende. Raadpleeg jQuery Mobile overgangen.
data-position-to origin | jQuery selector | window Bepaal de positie van de pop-up. Oorsprong - standaard. Opent de link op een pop-up. jQuery selector - Pop-up op het gespecificeerde element. Venster - Pop-up in het midden van het scherm van het venster.

List

Elementen van <ol> of <ul> met de data-role-attribuut="listview".

Data Attributes Waarde Beschrijving
data-autodividers true | false Stel in of lijstitems automatisch moeten worden gescheiden.
data-count-theme letter (a-z) Stel de themakleur van de tellerstandaard in. Standaard is "c".
data-divider-theme letter (a-z) Stel de themakleur van de lijstscheiding in. Standaard is "b".
data-filter true | false Stel in of er een zoekbalk moet worden toegevoegd aan de lijst.
data-filter-placeholder sometext Stel de tekst in de zoekbalk in. Standaard is "Filter items...".
data-filter-theme letter (a-z) Stel de themakleur van het zoekfilter in. Standaard is "c".
All <select> elements. They are automatically set to button style and do not require date-role. data-icon Stel het pictogram van de lijst in.
data-inset true | false Stel in of er ronde hoeken en marges moeten worden toegevoegd aan de lijst.
data-split-icon data-icon Stel het pictogram van de scheidingsknop in. Standaard is "arrow-r".
data-split-theme letter (a-z) Stel de themakleur van de scheidingsknop in. Standaard is "b".
data-theme letter (a-z) Stel de themakleur van de lijst in.

List item

Elementen van <ol> of <ul> met de data-role-attribuut="listview".

Data Attributes Waarde Beschrijving
data-filtertext sometext Stel de tekst in die wordt gezocht bij het filteren van elementen. Deze tekst in plaats van de daadwerkelijke tekst van het lijstitem zal worden gezocht.
All <select> elements. They are automatically set to button style and do not require date-role. data-icon Stel het pictogram van de lijstitem in.
data-role list-divider Stel de scheidingsteken van de lijstitem in.
data-theme letter (a-z) Stel de themakleur van de lijstitem in.

Opmerking:Het data-icon-attribuut is alleen van toepassing op lijstitems met koppelingen.

Navbar

Elementen van <li> binnen de container met de data-role-attribuut="navbar".

Data Attributes Waarde Beschrijving
All <select> elements. They are automatically set to button style and do not require date-role. data-icon Stel het pictogram van de lijstitem in.
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.

Tip:De navigatiebalk erfde theme-swatch van zijn oudercontainer. Het instellen van de data-theme-eigenschap voor de navigatiebalk is niet mogelijk. Het is mogelijk om de data-theme-eigenschap afzonderlijk in te stellen voor elke link in de navbar.

Page

Container met de data-role-attribuut="page".

Data Attributes Waarde Beschrijving
data-add-back-btn true | false Voeg automatisch de terugknop toe, alleen voor de kop van de pagina.
data-back-btn-text sometext Stel de tekst van de terugknop in.
data-back-btn-theme letter (a-z) Stel de themakleur van de terugknop in.
data-close-btn-text letter (a-z) Stel de tekst van de sluitknop op de dialoogweergave in.
data-dom-cache true | false Bepaal of de jQuery DOM cache van individuele pagina's moet worden gewist (indien ingesteld op true, moet je aandacht besteden aan het beheer van het DOM en alle mobiele apparaten grondig testen).
data-overlay-theme letter (a-z) Bepaal de overlay (achtergrond) kleur van de dialoogpagina.
data-theme letter (a-z) Bepaal de themakleur van de pagina. Standaard is dit "c".
data-title sometext Bepaal de titel van de pagina.
data-url url Deze waarde wordt gebruikt om de URL te updaten, niet om een pagina aan te vragen.

Popup

Container met data-role="popup" eigenschap.

Data Attributes Waarde Beschrijving
data-corners true | false Bepaal of de pop-up ronde hoeken heeft.
data-overlay-theme letter (a-z) Bepaal de overlay (achtergrond) kleur van de pop-up. Standaard is dit doorzichtig (none).
data-shadow true | false Bepaal of de pop-up een schaduw heeft.
data-theme letter (a-z) Bepaal de themakleur van de pop-up. Standaard is dit geërfd, "none" stelt doorzichtig in.
data-tolerance 30, 15, 30, 15 Bepaal de afstand tot de rand van het venster (top, right, bottom, left).

Anker met data-rel="popup" eigenschap:

Data Attributes Waarde Beschrijving
data-position-to origin | jQuery selector | window Bepaal de positie van de pop-up. Origin - Standaard. De pop-up bevindt zich op de link die het opent. jQuery selector - De pop-up bevindt zich op de gespecificeerde element. Window - De pop-up bevindt zich in het midden van het scherm.
data-rel popup Gebruikt om een pop-up venster te openen.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Bepaal hoe je van een pagina overgaat naar de volgende. Raadpleeg jQuery Mobile overgangen.

Radio Button

label en input met type="radio" worden automatisch ingesteld op knopstijl, zonder data-role nodig te hebben.

Data Attributes Waarde Beschrijving
data-mini true | false Bepaal of de knoppen klein of van standaard formaat moeten zijn.
data-role none Stel de keuzevelden in als enhanced buttons met jQuery Mobile.
data-theme letter (a-z) Stel de themakleur van de keuzevelden in.

Tip:Om meerdere keuzevelden te combineren, gebruik data-role="controlgroup" en data-type="horizontal|vertical" om te bepalen of de knoppen horizontaal of verticaal moeten worden gecombineerd.

Select

Select

Data Attributes Waarde Beschrijving
All <select> elements. They are automatically set to button style 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 is used (recommended if you want the select menu to have a consistent appearance on all mobile devices).
data-overlay-theme letter (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 non-native <option> elements.
data-role none Apply jQuery Mobile to set the select element to button style.
data-theme letter (a-z) Specify the theme color for the select element.

Tip: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 of type="range". They are automatically set to button style and do not require data-role.

Data Attributes Waarde Beschrijving
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 to set the style of the slider buttons.
data-theme letter (a-z) Specify the theme color for the slider control (input, handle, and track).
data-track-theme letter (a-z) Specify the theme color for the slider track.

Text input & Textarea

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

Data Attributes Waarde Beschrijving
data-mini true | false Stelt in of het input-element klein of standaard van maat is.
data-role none Plaats jQuery Mobile om de stijl van de knop van input/textarea in te stellen.
data-theme letter (a-z) Stelt de themakleur van het invoerveld in.