Attribut Data jQuery Mobile

Attributs jQuery Data

jQuery Mobile utilise les attributs HTML5 data-* pour créer une interface utilisateur attrayante et tactile pour les appareils mobiles.

Dans la liste de référence ci-dessous, les valeurs en gras définissent les valeurs par défaut.

Bouton

Liens hypertextes avec data-role="button". Les éléments de barre d'outils, les liens et les champs d'entrée sont automatiquement mis en forme comme des boutons, sans nécessiter data-role="button".

Attributs Data Valeur Description
data-corners true | false Définir si les boutons ont des coins arrondis.
data-icon Référence des icônes Définir l'icône du bouton. Par défaut, il n'y a pas d'icône.
data-iconpos gauche | droite | haut | bas | notext Définir la position de l'icône.
data-iconshadow true | false Définir si l'icône du bouton a une ombre.
data-inline true | false Définir si les boutons sont en ligne.
data-mini true | false Définir si les boutons sont de petite taille ou de taille standard.
data-shadow true | false Définir si les boutons ont une ombre.
data-theme letter (a-z) Définir la couleur principale des boutons.

Astuce :Pour combiner plusieurs boutons, utilisez un conteneur avec les attributs data-role="controlgroup" et data-type="horizontal|vertical" pour définir la combinaison horizontale ou verticale des boutons.

Case à cocher

Le label et l'input type="checkbox" sont appariés. Ils seront automatiquement mis en forme comme des boutons, sans besoin de data-role.

Attributs Data Valeur Description
data-mini true | false Définir si les cases à cocher sont de petite taille ou de taille standard.
data-role none Empêcher jQuery Mobile de mettre en forme les cases à cocher comme des boutons.
data-theme letter (a-z) Définir la couleur du thème des cases à cocher.

Astuce :Pour combiner plusieurs cases à cocher, utilisez data-role="controlgroup" et data-type="horizontal|vertical" pour définir la combinaison horizontale ou verticale des cases à cocher.

Collapsible

Élément de titre, suivi de tout HTML marqué situé dans le conteneur avec l'attribut data-role="collapsible".

Attributs Data Valeur Description
data-collapsed true | false Définir si le contenu doit être fermé ou développé.
data-collapsed-icon Référence des icônes Définir l'icône du bouton déroulable. Par défaut, c'est "plus".
data-content-theme letter (a-z) Définir la couleur du thème du contenu déroulable. Ajoute également des arrondis au contenu déroulable.
data-expanded-icon Référence des icônes Définir l'icône du bouton déroulable lorsque le contenu est développé. Par défaut, c'est "moins".
data-iconpos left | right | top | bottom Définir la position de l'icône.
data-inset true | false Définir si le bouton déroulable a un style arrondi et des marges. left | right | top | bottom
data-mini true | false Définir si le bouton déroulable est de petite taille ou de taille standard.
data-theme letter (a-z) Définir la couleur du thème du bouton déroulable.

Collapsible Set

Contenu déroulable dans le conteneur avec l'attribut data-role="collapsible-set".

Attributs Data Valeur Description
data-collapsed-icon Référence des icônes Définir l'icône du bouton déroulable. Par défaut, c'est "plus".
data-content-theme letter (a-z) Définir la couleur du thème du contenu déroulable.
data-expanded-icon Référence des icônes Définir l'icône du bouton déroulable lorsque le contenu est développé. Par défaut, c'est "moins".
data-iconpos gauche | droite | haut | bas | notext Définir la position de l'icône.
data-inset true | false Définir si les déroulables ont un style arrondi et des marges.
data-mini true | false Définir si le bouton déroulable est de petite taille ou de taille standard.
data-theme letter (a-z) Définir la couleur du thème du groupe déroulable.

Content

Conteneur avec l'attribut data-role="content".

Attributs Data Valeur Description
data-theme letter (a-z) Définir la couleur du thème du contenu. Par défaut, c'est "c".

Controlgroup

Conteneur <div> ou <fieldset> avec l'attribut data-role="controlgroup". Combiner plusieurs inputs de style de bouton d'un type unique (boutons basés sur des liens, boutons radio, cases à cocher, menus de sélection).

Attributs Data Valeur Description
data-mini true | false Définir si la combinaison est de petite taille ou de taille standard.
data-type horizontal | vertical Définir l'alignement horizontal ou vertical de la combinaison.

Dialogue

Le conteneur ou le lien avec data-role="dialog" ou data-rel="dialog".

Attributs Data Valeur Description
data-close-btn-text sometext Définit le texte du bouton de fermeture utilisé uniquement pour les boîtes de dialogue.
data-dom-cache true | false Définit si le jQuery DOM cache doit être vidé pour une page individuelle (si il est réglé sur true, il faut prendre en compte la gestion du DOM et tester complètement tous les appareils mobiles).
data-overlay-theme letter (a-z) Définir la couleur de superposition (arrière-plan) de la page de dialogue.
data-theme letter (a-z) Définit la couleur de thème de la page de dialogue.
data-title sometext Définit le titre de la page de dialogue.

Amélioration

Conteneur avec les attributs data-enhance="false" ou data-ajax="false".

Attributs Data Valeur Description
data-enhance true | false Si elle est définie sur "true" (par défaut), jQuery Mobile ajoute automatiquement des styles à la page pour mieux s'adapter aux appareils mobiles. Si elle est définie sur "false", le cadre ne définit pas les styles de la page.
data-ajax true | false Définit si la page est chargée via AJAX.

Remarque :data-enhance="false", par exemple en combinaison avec $.mobile.ignoreContentEnabled=true", pour empêcher jQuery Mobile d'ajouter automatiquement des styles de page.

Lorsque $.mobile.ignoreContentEnabled est réglé sur true, les liens ou les éléments de formulaire contenus dans les conteneurs avec data-ajax="false" sont ignorés par la fonction de navigation du cadre.

Fieldcontainer

Conteneur enveloppé par data-role="fieldcontain" pour les éléments label/form.

Barre d'outils fixe

Conteneur avec les attributs data-role="header" ou data-role="footer" et data-position="fixed".

Attributs Data Valeur Description
data-disable-page-zoom true | false Définit si l'utilisateur peut zoomer sur la page.
data-fullscreen true | false Définit si la barre d'outils est toujours située en haut et/ou en bas.
data-tap-toggle true | false Définit si l'utilisateur peut basculer la visibilité de la barre d'outils en cliquant ou en appuyant.
data-transition glisse | fondu | none Définit l'effet de transition lors de l'appui ou du clic.
data-update-page-padding true | false Définit la mise à jour des marges supérieure, inférieure et intérieure de la page lors de l'occurrence de l'événement resize, transition et "updatelayout" (jQuery Mobile met toujours à jour les marges intérieures lors de l'événement "pageshow").
data-visible-on-page-show true | false Définit la visibilité de la barre d'outils lors de l'affichage de la page parent.

Interrupteur basculant à bascule

Un élément <select> avec l'attribut data-role="slider" et deux éléments <option>.

Attributs Data Valeur Description
data-mini true | false Définir si le basculeur est de petite taille ou de taille normale.
data-role none Empêcher jQuery Mobile de définir le basculeur comme style de bouton.
data-theme letter (a-z) Définir la couleur du thème du basculeur.
data-track-theme letter (a-z) Définir la couleur du thème de la piste.

Pied de page

Conteneur avec l'attribut data-role="footer".

Attributs Data Valeur Description
data-id sometext Définir un ID unique. Nécessaire pour les pieds de page persistants.
data-position inline | fixed Définir si le pied de page est en relation inline avec le contenu de la page ou conservé en bas.
data-fullscreen true | false Définir si le pied de page doit toujours être situé en bas et couvrir le contenu de la page (partiellement transparent).
data-theme letter (a-z) Définir la couleur du thème du pied de page. Par défaut, c'est "a".

Remarque :Pour activer la position fullscreen, utilisez data-position="fixed" et ajoutez l'attribut data-fullscreen à cet élément.

En-tête

Conteneur avec data-role="header".

Attributs Data Valeur Description
data-id sometext Définir un ID unique. Nécessaire pour les en-têtes persistants.
data-position inline | fixed Définir si l'en-tête de page est en relation inline avec le contenu de la page ou conservé en haut.
data-fullscreen true | false Définir si la page doit toujours être située en haut et couvrir le contenu de la page (partiellement transparent).
data-theme letter (a-z) Définir la couleur du thème de l'en-tête de page. Par défaut, c'est "a".

Remarque :Pour activer la position fullscreen, utilisez data-position="fixed" et ajoutez l'attribut data-fullscreen à cet élément.

Lien

Tous les liens, y compris les liens avec data-role="button" et les boutons de soumission de formulaire.

Attributs Data Valeur Description
data-ajax true | false Définir si la page doit être chargée via AJAX pour améliorer l'expérience utilisateur et la transition. Si réglé sur false, jQuery Mobile effectuera une requête de page ordinaire.
data-direction inverse Inverser l'animation de transition (uniquement pour les pages ou les dialogues).
data-dom-cache true | false Définir si le cache jQuery DOM des pages individuelles doit être effacé (si réglé sur true, vous devez prêter attention à la gestion du DOM et tester complètement tous les appareils mobiles).
data-prefetch true | false Définir si la page doit être pré-chargée dans le DOM pour être disponible lors de l'accès de l'utilisateur.
data-rel retour | dialogue | externe | popup Définir les options concernant le comportement des liens. Retour - faire un pas en arrière dans l'historique. Dialogue - ouvrir la page comme un dialogue, sans l'enregistrer dans l'historique. Externe - lien vers un autre domaine. Ouvrir - ouvrir une fenêtre contextuelle.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Définir comment passer d'une page à l'autre. Consultez les transitions jQuery Mobile.
data-position-to origin | jQuery selector | window Définir la position du popup. Origine - par défaut. Pop-up lors de l'ouverture du lien. Sélecteur jQuery - Affichage sur l'élément spécifié. Fenêtre - Affichage au centre de l'écran de la fenêtre.

Liste

Conteneur <ol> ou <ul> avec l'attribut data-role="listview".

Attributs Data Valeur Description
data-autodividers true | false Définir si séparer automatiquement les éléments de liste.
data-count-theme letter (a-z) Définir la couleur de thème de la mousse de compte. Par défaut, c'est "c".
data-divider-theme letter (a-z) Définir la couleur de thème du séparateur de liste. Par défaut, c'est "b".
data-filter true | false Définir si ajouter une zone de recherche dans la liste.
data-filter-placeholder sometext Définir le texte dans la zone de recherche. Par défaut, c'est "Filtrer les éléments...".
data-filter-theme letter (a-z) Définir la couleur de thème du programme de filtrage de recherche. Par défaut, c'est "c".
data-icon Référence des icônes Définir l'icône de la liste.
data-inset true | false Définir si ajouter des styles arrondis et des marges extérieures à la liste.
data-split-icon Référence des icônes Définir l'icône du bouton de division. Par défaut, c'est "arrow-r".
data-split-theme letter (a-z) Définir la couleur de thème du bouton de division. Par défaut, c'est "b".
data-theme letter (a-z) Définir la couleur de thème de la liste.

Élément de liste

Élément <li> à l'intérieur de <ol> ou <ul> avec l'attribut data-role="listview".

Attributs Data Valeur Description
data-filtertext sometext Définir le texte à rechercher lors du filtrage des éléments. Ce texte, et non le texte réel des éléments de liste, sera recherché.
data-icon Référence des icônes Définir l'icône des éléments de liste.
data-role list-divider Définir le séparateur des éléments de liste.
data-theme letter (a-z) Définir la couleur de thème des éléments de liste.

Remarque :L'attribut data-icon ne s'applique qu'aux éléments de liste contenant des liens.

Navbar

Élément <li> à l'intérieur du conteneur avec l'attribut data-role="navbar".

Attributs Data Valeur Description
data-icon Référence des icônes Définir l'icône des éléments de liste.
data-iconpos gauche | droite | haut | bas | notext Définir la position de l'icône.

Astuce :La barre de navigation hérite du theme-swatch de son conteneur parent. Il n'est pas possible de définir l'attribut data-theme pour la barre de navigation. Vous pouvez définir l'attribut data-theme pour chaque lien dans la navbar séparément.

Page

Conteneur avec l'attribut data-role="page".

Attributs Data Valeur Description
data-add-back-btn true | false Ajouter automatiquement le bouton de retour, uniquement pour l'en-tête de page.
data-back-btn-text sometext Définir le texte du bouton de retour.
data-back-btn-theme letter (a-z) Définir la couleur de thème du bouton de retour.
data-close-btn-text letter (a-z) Définir le texte du bouton de fermeture sur la barre de dialogue.
data-dom-cache true | false Définir si le cache jQuery DOM des pages individuelles doit être effacé (si réglé sur true, vous devez prêter attention à la gestion du DOM et tester complètement tous les appareils mobiles).
data-overlay-theme letter (a-z) Définir la couleur de superposition (arrière-plan) de la page de dialogue.
data-theme letter (a-z) Définir la couleur principale de la page. Par défaut, c'est "c".
data-title sometext Définir le titre de la page.
data-url url Cette valeur est utilisée pour mettre à jour l'URL, pas pour demander une page.

Popup

Conteneur avec l'attribut data-role="popup".

Attributs Data Valeur Description
data-corners true | false Définir si le popup a des coins arrondis.
data-overlay-theme letter (a-z) Définir la couleur de superposition (arrière-plan) du popup. Par défaut, c'est un arrière-plan transparent (none).
data-shadow true | false Définir si le popup a une ombre.
data-theme letter (a-z) Définir la couleur principale du popup. Par défaut, il hérite, "none" pour transparent.
data-tolerance 30, 15, 30, 15 Définir la distance par rapport aux bords de la fenêtre (top, right, bottom, left).

Ancres avec l'attribut data-rel="popup":

Attributs Data Valeur Description
data-position-to origin | jQuery selector | window Définir la position du popup. Origin - Par défaut. Le popup est placé sur le lien qui l'ouvre. jQuery selector - Le popup est placé sur l'élément spécifié. Window - Le popup est placé au centre de l'écran de la fenêtre.
data-rel popup Utilisé pour ouvrir les popups.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Définir comment passer d'une page à l'autre. Consultez les transitions jQuery Mobile.

Bouton Radio

L'élément label avec input de type="radio" sera automatiquement mis en forme comme un bouton, sans nécessiter data-role.

Attributs Data Valeur Description
data-mini true | false Définir si les boutons doivent être de petite taille ou de taille standard.
data-role none Placer jQuery Mobile pour définir le style des boutons radio comme being enhanced buttons.
data-theme letter (a-z) Définir la couleur principale des boutons radio.

Astuce :Pour combiner plusieurs boutons radio, utilisez data-role="controlgroup" et data-type="horizontal|vertical" pour définir s'ils doivent être combinés horizontalement ou verticalement.

Sélection

Tous les éléments <select>. Ils seront automatiquement mis en forme en style de bouton, sans nécessiter date-role.

Attributs Data Valeur Description
data-icon Référence des icônes Définir l'icône de l'élément select. Par défaut, c'est "arrow-d".
data-iconpos gauche | droite | haut | bas | notext Définir la position de l'icône.
data-inline true | false Définir si l'élément select est en ligne.
data-mini true | false Définir si l'élément select est de petite taille ou de taille standard.
data-native-menu true | false Si défini à false, utilisez le menu de sélection personnalisé de jQuery (recommandé si vous souhaitez que le menu de sélection ait un aspect cohérent sur tous les appareils mobiles).
data-overlay-theme letter (a-z) Définir la couleur du thème du menu de sélection personnalisé de jQuery (à utiliser avec data-native-menu="false").
data-placeholder true | false Peut être utilisé sur l'élément <option> non natif.
data-role none Placer jQuery Mobile pour définir l'élément select en style de bouton.
data-theme letter (a-z) Définir la couleur du thème de l'élément select.

Astuce :Pour combiner plusieurs éléments select, utilisez data-role="controlgroup" et data-type="horizontal|vertical" pour définir si l'élément doit être combiné horizontalement ou verticalement.

Curseur

L'élément input de type "range" sera automatiquement mis en forme en style de bouton, sans nécessiter data-role.

Attributs Data Valeur Description
data-highlight true | false Définir si la piste du curseur doit être mise en surbrillance.
data-mini true | false Définir si le curseur est de petite taille ou de taille standard.
data-role none Placer jQuery Mobile pour définir le style du bouton de mise en place du curseur.
data-theme letter (a-z) Définir la couleur du thème du contrôle du curseur (input, handle et piste).
data-track-theme letter (a-z) Définir la couleur du thème de la piste du curseur.

Entrée de texte et Textarea

L'élément input ou textarea de type "text|search|etc." sera automatiquement mis en forme, sans nécessiter data-role.

Attributs Data Valeur Description
data-mini true | false Définir si l'élément input est de petite taille ou de taille normale.
data-role none Placer jQuery Mobile pour définir le style de bouton pour input/textarea.
data-theme letter (a-z) Définir la couleur du thème du champ d'entrée.