- Référence attributs data-
- Bouton
- Cases à cocher
- Bloc dépliable
- Accordéons
- Boîte de dialogue
- Contenu
- Conteneur de champ
- Interrupteur
- Pied de page
- Entête
- Lien
- Liste
- Élément de liste
- Page
- Bouton Radio
- Liste déroulante
- Curseur
- Champ de saisie & Textarea
Référence attributs data-
Le framework jQuery Mobile utilise les attributs HTML5 data- pour permettre l'initialisation et la configuration des widgets basées sur le balisage. Ces attributs sont totalement optionnels; l'appel de plugins manuellement et le passage direct d'options est également supporté. Pour éviter les conflits de nommage avec d'autre plugins ou frameworks qui utilisent également des attributs data-, définissez votre propre espace de nommage en modifiant l'option globale ns.
Bouton
Liens avec data-role="button". Les boutons basés sur l'input et les éléments button sont améliorés automatiquement, donc aucun data-role n'est requis.
| data-corners | true | false |
|---|---|
| data-icon | home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search |
| data-iconpos | left | right | top | bottom | notext |
| data-iconshadow | true | false |
| data-inline | true | false |
| data-shadow | true | false |
| data-theme | Lettre échantillon (a-z) |
Plusieurs boutons peuvent être placés dans un conteneur avec l'attribut data-role="controlgroup" d'un ensemble vertical groupé. Ajouter l'attribut data-type="horizontal" pour placer les boutons côte à côte.
Cases à cocher
Les labels et inputs avec type="checkbox" sont auto-améliorés, donc aucun data-role n'est requis.
| data-role | none (empêche l'auto-amélioration d'utiliser le contrôle natif) |
|---|---|
| data-theme | Lettre échantillon (a-z) - Ajouté à l'élément formulaire |
Bloc dépliable
Le titre et le contenu sont placés dans un conteneur avec le data-role="collapsible"
| data-collapsed | true | false |
|---|---|
| data-content-theme | Lettre échantillon (a-z) |
| data-theme | Lettre échantillon (a-z) |
Accordéons
Un certain nombre de collapsibles placés dans un conteneur avec data-role="collapsible-set"
| data-content-theme | Lettre échantillon (a-z) - Définit toutes les collapsibles dans le jeu |
|---|---|
| data-theme | Lettre échantillon (a-z) - Définit toutes les collapsibles dans le jeu |
Boîte de dialogue
Conteneur avec data-role="page" ou "dialog" liés au data-rel="dialog" sur l'ancre.
| data-close-btn-text | string (texte pour le bouton fermeture, dialogue uniquement) |
|---|---|
| data-dom-cache | true | false |
| data-id | string (id unique pour la page) |
| data-fullscreen | true | false (utilisé en conjonction avec les barres d'outils fixes) |
| data-overlay-theme | Lettre échantillon (a-z) - Thème de superposition lorsque la page est ouverte dans une fenêtre de dialogue |
| data-theme | Lettre échantillon (a-z) |
| data-title | string (Titre utilisé lorsque la page est affichée) |
Contenu
Container with data-role="content"
| data-theme | Lettre échantillon (a-z) |
|---|
Conteneur de champ
Container with data-role="fieldcontain" wrapped around label/form element pair
Interrupteur
Sélectionner avec data-role="slider", deux options uniquement
| data-role | none (empêche l'auto-amélioration d'utiliser le contrôle natif) |
|---|---|
| data-theme | Lettre échantillon (a-z) - Ajouté à l'élément formulaire |
| data-track-theme | Lettre échantillon (a-z) - Ajouté à l'élément formulaire |
Pied de page
Conteneur avec data-role="footer"
| data-id | string (id unique, utile dans les pieds de page persistants) |
|---|---|
| data-position | fixed |
| data-theme | Lettre échantillon (a-z) |
Entête
Conteneur avec data-role="header"
| data-add-back-btn | true | false (ajoute automatiquement le bouton 'Précédent'. En-tête seulement) |
|---|---|
| data-back-btn-text | string |
| data-back-btn-theme | Lettre échantillon (a-z) |
| data-position | fixed |
| data-theme | Lettre échantillon (a-z) |
| data-title | string (Titre utilisé lorsque la page est affichée) |
Lien
Liens, y compris ceux qui ont data-role="button", et les boutons de soumission de formulaire partagent ces attributs
| data-ajax | true | false |
|---|---|
| data-direction | reverse (animation inverse de transition de page) |
| data-dom-cache | true | false |
| data-prefetch | true | false |
| data-rel | back (pour reculer d'une étape dans l'historique) dialog (pour ouvrir un lien stylisé comme une boite de dialogue, non suivi dans l'historique) external (pour faire un lien vers un autre domaine) |
| data-transition | slide | slideup | slidedown | pop | fade | flip |
Liste
OL ou UL avec data-role="listview"
| data-count-theme | Lettre échantillon (a-z) |
|---|---|
| data-dividertheme | Lettre échantillon (a-z) |
| data-filter | true | false |
| data-filter-placeholder | string |
| data-filter-theme | Lettre échantillon (a-z) |
| data-inset | true | false |
| data-split-icon | home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search |
| data-theme | Lettre échantillon (a-z) |
Elément de liste
LI au sein d'une liste
| data-icon | home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search |
|---|---|
| data-role | list-divider |
| data-theme | Lettre échantillon (a-z) - peut également être défini sur chaque LI |
Page
Conteneur avec data-role="page"
| data-close-btn-text | string (texte pour le bouton 'Fermer', boîte de dialogue uniquement) |
|---|---|
| data-dom-cache | true | false |
| data-id | string (id unique pour la page) |
| data-fullscreen | true | false (utilisé en conjonction avec des barres d'outils fixes) |
| data-overlay-theme | Lettre échantillon (a-z) - Thème de la superposition lorsque la page est ouverte dans une boîte de dialogue |
| data-theme | Lettre échantillon (a-z) |
| data-title | string (Titre utilisé lorsque la page est affichée) |
Bouton Radio
Pairs of labels and inputs with type="radio" are auto-enhanced, no data-role required
| data-role | none (empêche l'auto-amélioration d'utiliser le contrôle natif) |
|---|---|
| data-theme | Lettre échantillon (a-z) - Ajouté à l'élément formulaire |
Liste déroulante
Tous les éléments select du formulaire sont auto-améliorés, aucun data-role requis.
| data-icon | home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search |
|---|---|
| data-iconpos | left | right | top | bottom | notext |
| data-inline | true | false |
| data-native-menu | true | false |
| data-overlay-theme | Lettre échantillon (a-z) - Thème de superposition pour les selects non natifs |
| data-placeholder | true | false - Ajouté à l'option |
| data-role | none (empêche l'auto-amélioration d'utiliser le contrôle natif) |
| data-theme | Lettre échantillon (a-z) - Ajouté à l'élément formulaire |
Multiple selects can be wrapped in a fieldset with a data-role="controlgroup" attribute for a vertically grouped set. Add the data-type="horizontal" attribute for the selects to sit side-by-side.
Curseur (slider)
Inputs with type="range" are auto-enhanced, pas de data-role requis.
| data-role | none (empêche l'auto-amélioration d'utiliser le contrôle natif) |
|---|---|
| data-theme | Lettre échantillon (a-z) - Ajouté à l'élément formulaire |
| data-track-theme | Lettre échantillon (a-z) - Ajouté à l'élément formulaire |
Champ de saisie & Textarea
Input type="text|number|search|etc." or textarea elements are auto-enhanced, pas de data-role requis.
| data-role | none (empêche l'auto-amélioration d'utiliser le contrôle natif) |
|---|---|
| data-theme | Lettre échantillon (a-z) - Ajouté à l'élément formulaire |