jQuery données Attributs
jQuery Mobile utilise le HTML5 de données * attribut pour créer un "touch-friendly" et attrayant look pour les appareils mobiles.
Pour la liste de référence ci - dessous, la bold value en bold value indique la valeur par défaut.
Bouton
Obsolète dans la version 1.4. Utilisez les classes CSS au lieu. Hyperliens avec data-role="button" . Éléments des boutons et des liens dans les barres d' outils et les champs d'entrée sont automatiquement décorées sous forme de boutons, pas besoin de data-role="button" .
| Données-attribut | Valeur | La description |
|---|---|---|
| data-corners | true | false | Indique si le bouton doit avoir des coins arrondis ou non |
| data-icon | Icons Reference | Indique l'icône du bouton. Default a pas d'icône |
| data-iconpos | left | right | top | bottom | notext | Indique la position de l'icône |
| data-iconshadow | true | false | Indique si l'icône du bouton doit avoir des ombres ou non |
| data-inline | true | false | Indique si le bouton doit être en ligne ou non |
| data-mini | true | false | Indique si le bouton doit être de petite taille ou régulière |
| data-shadow | true | false | Indique si le bouton doit avoir des ombres ou non |
| data-theme | letter (a-z) | Indique la couleur du thème de la touche |
Pour regrouper plusieurs boutons, utilisez un récipient avec le data-role="controlgroup" attribut avec data-type="horizontal|vertical" pour indiquer si les boutons de groupe horizontalement ou verticalement.
Checkbox
Paires d'étiquettes et entrées avec type="checkbox" .
| Données-attribut | Valeur | La description |
|---|---|---|
| data-mini | true | false | Indique si la case à cocher doit être de petite taille ou régulière |
| data-role | none | Empêche jQuery Mobile cases de style que les boutons |
| data-theme | letter (a-z) | Indique la couleur du thème de la case à cocher |
Pour regrouper plusieurs cases à cocher, utilisez le data-role="controlgroup" avec le data-type="horizontal|vertical" pour indiquer si le groupe CheckBoxes horizontalement ou verticalement.
Pliant
Un élément d' en- tête suivi d'un balisage HTML à l' intérieur d' un conteneur avec le data-role="collapsible" .
| Données-attribut | Valeur | La description |
|---|---|---|
| data-collapsed | true | false | Indique si le contenu doit être fermé ou élargi |
| data-collapsed-cue-text | sometext | Indique un texte pour fournir une rétroaction audible pour les utilisateurs avec le logiciel de lecture d'écran. Par défaut est "Click to collapse contenu". |
| data-collapsed-icon | Icons Reference | Indique l'icône du bouton pliable. Par défaut est "plus" |
| data-content-theme | letter (a-z) | Indique la couleur du thème du contenu pliable. Seront également ajouter des coins arrondis au contenu pliable |
| data-expanded-cue-text | sometext | Indique un texte pour fournir une rétroaction audible pour les utilisateurs avec le logiciel de lecture d'écran. Par défaut est "cliquez pour développer le contenu". |
| data-expanded-icon | Icons Reference | Indique l'icône du bouton pliable lorsque le contenu est élargi. Par défaut est "minus" |
| data-iconpos | left | right | top | bottom | Indique la position de l'icône |
| data-inset | true | false | Indique si le bouton pliable doit être stylé avec des coins arrondis et une certaine marge ou non |
| data-mini | true | false | Indique si les boutons escamotables doivent être de petite taille ou régulière |
| data-theme | letter (a-z) | Indique la couleur du thème du bouton pliable |
Set pliable
Blocs de contenu pliables à l' intérieur d' un conteneur avec le data-role="collapsibleset" .
| Données-attribut | Valeur | La description |
|---|---|---|
| data-collapsed-icon | Icons Reference | Indique l'icône du bouton pliable. Par défaut est "plus" |
| data-content-theme | letter (a-z) | Indique la couleur du thème du contenu pliable |
| data-expanded-icon | Icons Reference | Indique l'icône du bouton pliable lorsque le contenu est élargi. Par défaut est "moins" |
| data-iconpos | left | right | top | bottom | notext | Indique la position de l'icône |
| data-inset | true | false | Indique si les pliables doivent être décorés avec des coins arrondis et une certaine marge ou non |
| data-mini | true | false | Indique si les boutons escamotables doivent être de petite taille ou régulière |
| data-theme | letter (a-z) | Indique la couleur du thème de l'ensemble pliable |
Contenu
Obsolète dans la version 1.4, et sera supprimée dans 1,5. Conteneur avec data-role="content" .
| Données-attribut | Valeur | La description |
|---|---|---|
| data-theme | letter (a-z) | Indique la couleur du thème du contenu |
Groupe de contrôle
A <div> ou <fieldset> récipient avec data-role="controlgroup" . Groupes multiples entrées de boutons de style d'un seul type (boutons fondées sur les liens, les boutons radio, cases à cocher, sélectionnez les éléments). Pour grouper les cases du formulaire et des boutons radio, le <fieldset> conteneur est recommandé dans un <div> avec le "ui-fieldcontain" classe, pour améliorer l' étiquette de style.
| Données-attribut | Valeur | La description |
|---|---|---|
| data-exclude-invisible | true | false | Indique si d'exclure les enfants invisibles dans l'attribution des coins arrondis |
| data-mini | true | false | Indique si le groupe devrait être de petite taille ou régulière |
| data-theme | letter (a-z) | Indique la couleur du thème de l'controlgroup |
| data-type | horizontal | vertical | Indique si le groupe doit être affiché horizontalement ou verticalement |
Dialogue
Un récipient avec des data-dialog="true" de data-dialog="true" .
| Données-attribut | Valeur | La description |
|---|---|---|
| data-close-btn | left | right | none | Indique la position du bouton de fermeture |
| data-close-btn-text | sometext | Indique le texte pour le bouton de fermeture |
| data-corners | true | false | Indique si la boîte de dialogue doit avoir des coins arrondis ou non |
| data-dom-cache | true | false | Indique si le cache pour effacer jQuery DOM ou non pour les pages individuelles (si la valeur true, vous devez prendre soin de gérer les DOM-vous et de tester à fond sur tous les appareils mobiles) |
| data-overlay-theme | letter (a-z) | Indique la superposition de couleurs (arrière-plan) de la page de dialogue |
| data-theme | letter (a-z) | Indique la couleur du thème de la page de dialogue |
| data-title | sometext | Indique le titre de la page de dialogue |
Renforcement
Un récipient avec des data-enhance="false" d' data-ajax="false" data-enhance="false" ou data-ajax="false"
| Données-attribut | Valeur | La description |
|---|---|---|
| data-enhance | true | false | Si la valeur "true" , (par défaut) jQuery Mobile styliser automatiquement la page, ce qui convient pour les appareils mobiles. Si réglé sur "false", le cadre ne sera pas le style de la page |
| data-ajax | true | false | Indique si le chargement des pages via ajax ou non |
Remarque: les data-enhance="false" doit être utilisé en conjonction avec $.mobile.ignoreContentEnabled=true" pour arrêter jQuery Mobile aux pages de style automatiquement.
Tout lien ou élément de formulaire à l' intérieur data-ajax="false" conteneurs sera ignoré par la fonctionnalité de navigation du cadre lorsque $.mobile.ignoreContentEnabled est définie sur true.
Container Champ
Obsolète dans la version 1.4, et sera supprimée dans 1,5. Utiliser class="ui-fieldcontain instead" à la data-role="fieldcontain" class="ui-fieldcontain instead" . Un récipient avec data-role="fieldcontain" enroulé autour de l' étiquette / forme paire d' éléments.
barre d'outils fixe
Un récipient avec data-role="header" ou data-role="footer" ainsi que la data-position="fixed" attribut.
| Données-attribut | Valeur | La description |
|---|---|---|
| data-disable-page-zoom | true | false | Indique si l'utilisateur est en mesure de l'échelle / agrandir la page ou non |
| data-fullscreen | true | false | Spécifie les barres d'outils toujours être positionnés en haut et / ou en bas |
| data-tap-toggle | true | false | Indique si l'utilisateur est en mesure de basculer la barre d'outils visibilité sur les robinets / clics ou non |
| data-transition | slide | fade | none | Indique l'effet de transition lors d'un robinet / clic se produit |
| data-update-page-padding | true | false | Indique le rembourrage du haut et en bas de la page pour être mis à jour sur le redimensionnement, la transition et "updatelayout" événements (jQuery Mobile met toujours à jour le rembourrage sur le "pageshow" événement) |
| data-visible-on-page-show | true | false | Indique la barre d'outils visibilité lorsque la page de parent est représenté |
Retourner à bascule
Un <input type="checkbox"> avec un data-role de "flipswitch" :
| Données-attribut | Valeur | La description |
|---|---|---|
| data-mini | true | false | Indique si le commutateur doit être de petite taille ou régulière |
| data-on-text | sometext | Indique le "sur" le texte sur le commutateur à bascule (valeur par défaut est "On" ) |
| data-off-text | sometext | Indique le texte "off" sur le commutateur à bascule (valeur par défaut est "Off" ) |
Bas de page
Un récipient avec data-role="footer" .
| Données-attribut | Valeur | La description |
|---|---|---|
| data-id | sometext | Indique un identifiant unique. Requis pour les pieds de page persistants |
| data-position | inline | fixed | Indique si le pied de page devrait être en ligne avec le contenu de la page ou rester positionné au fond |
| data-fullscreen | true | false | Indique si le pied de page doit toujours être positionné au fond et sur le contenu de la page (un peu voir à travers) ou non |
| data-theme | letter (a-z) | Indique la couleur du thème du pied de page |
Remarque: Pour activer la position fullscreen, l' utilisation des data-position="fixed" et puis ajoutez le data-fullscreen attribut à l'élément.
Entête
Un récipient avec data-role="header" .
| Données-attribut | Valeur | La description |
|---|---|---|
| data-id | sometext | Indique un identifiant unique. Requis pour les en-têtes persistants |
| data-position | inline | fixed | Indique si l'en-tête doit être en ligne avec le contenu de la page ou rester positionné en haut |
| data-fullscreen | true | false | Indique si l'en-tête doit toujours être placé en haut et sur le contenu de la page (un peu voir à travers) ou non |
| data-theme | letter (a-z) | Indique la couleur du thème de l'en-tête |
Remarque: Pour activer la position fullscreen, l' utilisation des data-position="fixed" et puis ajoutez le data-fullscreen attribut à l'élément.
Entrées
Entrées avec type="text|search|etc." Ou textarea elements .
| Données-attribut | Valeur | La description |
|---|---|---|
| data-clear-btn | true | false | Indique si l'entrée doit avoir un "clear" bouton |
| data-clear-btn-text | text | Indique un texte pour le bouton "clear". Par défaut est "clear text" |
| data-mini | true | false | Indique si l'entrée doit être de petite taille ou régulière |
| data-role | none | Empêche jQuery Mobile pour le style des entrées / textareas que les boutons |
| data-theme | letter (a-z) | Indique la couleur du thème du champ d'entrée |
Lien
Tous les liens.
| Données-attribut | Valeur | La description |
|---|---|---|
| data-ajax | true | false | Indique si le chargement des pages via ajax pour l'expérience et les transitions utilisateur améliorée. Si la valeur false, jQuery Mobile fera une demande de page normale. |
| data-direction | reverse | animation de transition inversée (uniquement pour la page ou boîte de dialogue) |
| data-dom-cache | true | false | Indique si le cache pour effacer jQuery DOM ou non pour les pages individuelles (si la valeur true, vous devez prendre soin de gérer les DOM-vous et de tester à fond sur tous les appareils mobiles) |
| data-prefetch | true | false | Indique si SQLite pages dans le DOM afin qu'ils soient disponibles lorsque l'utilisateur les visites |
| data-rel | back | dialog | external | popup | Indique une option pour la façon dont le lien doit se comporter. Retour - Déplace un pas en arrière dans l'histoire. Dialog - Ouvre un lien comme une boîte de dialogue, pas suivi dans l'histoire. Externe - Pour un lien vers un autre domaine. Popup - ouvre une fenêtre contextuelle. |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | Indique comment passer d'une page à l'autre. Voir notre Transitions mobile jQuery chapitre. |
| data-position-to | origin | jQuery selector | window | Indique la position des boîtes automatiques. Origine - Default. Positions popup sur le lien qui l'ouvre. jQuery selector - positionne la fenêtre contextuelle sur l'élément spécifié. Fenêtre - positionne la fenêtre contextuelle dans le milieu de l'écran de la fenêtre. |
liste
Un <ol> ou <ul> avec data-role="listview" .
| Données-attribut | Valeur | La description |
|---|---|---|
| data-autodividers | true | false | Indique si diviser automatiquement les éléments de la liste ou non |
| data-count-theme | letter (a-z) | Indique la couleur du thème de la bulle de comptage |
| data-divider-theme | letter (a-z) | Indique la couleur du thème de la liste diviseur |
| data-filter | true | false | Indique si vous souhaitez ajouter une zone de recherche dans une liste ou non |
| data-filter-placeholder | sometext | Obsolète dans la version 1.4. Utilisez l'attribut d'espace réservé HTML à la place. Indique le texte à l' intérieur de la zone de recherche. Par défaut est "éléments de filtre ..." |
| data-filter-theme | letter (a-z) | Indique la couleur du thème du filtre de recherche |
| data-icon | Icons Reference | Indique l'icône de la liste |
| data-inset | true | false | Indique si la liste doit être de style avec des coins arrondis et une certaine marge ou non |
| data-split-icon | Icons Reference | Indique l'icône du bouton partagé. Par défaut est "arrow-r" |
| data-split-theme | letter (a-z) | Indique la couleur du thème du bouton partagé |
| data-theme | letter (a-z) | Indique la couleur du thème de la liste |
Liste article
Un <li> l' intérieur d' un <ol> ou <ul> avec data-role="listview" .
| Données-attribut | Valeur | La description |
|---|---|---|
| data-filtertext | sometext | Indique un texte à rechercher lors du filtrage des éléments. Ce texte sera ensuite filtré au lieu de l'actuel texte liste d'articles |
| data-icon | Icons Reference | Indique l'icône de l'élément de liste |
| data-role | list-divider | Indique un diviseur pour les éléments de liste |
| data-theme | letter (a-z) | Indique la couleur du thème de l'élément de liste |
Remarque: L'icône de données-attribut seul travail sur les éléments de liste avec des liens.
navbar
<li> éléments à l' intérieur d' un conteneur avec data-role="navbar" .
| Données-attribut | Valeur | La description |
|---|---|---|
| data-icon | Icons Reference | Indique l'icône de l'élément de liste |
| data-iconpos | left | right | top | bottom | notext | Indique la position de l'icône |
Navbars héritent le thème-swatch de leur conteneur parent. Il est impossible de définir l'attribut data-theme à un navbar. L'attribut data-theme peut être réglée individuellement pour chaque lien dans la barre de navigation.
Page
Un récipient avec data-role="page" .
| Données-attribut | Valeur | La description |
|---|---|---|
| data-dom-cache | true | false | Indique si le cache pour effacer jQuery DOM ou non pour les pages individuelles (si la valeur true, vous devez prendre soin de gérer les DOM-vous et de tester à fond sur tous les appareils mobiles) |
| data-overlay-theme | letter (a-z) | Indique la superposition de couleurs (arrière-plan) des pages de dialogue |
| data-theme | letter (a-z) | Indique la couleur du thème de la page |
| data-title | sometext | Indique le titre de la page |
| data-url | url | Valeur pour mettre à jour l'URL, au lieu de l'URL utilisée pour demander la page |
Apparaitre
Un récipient avec data-role="popup" .
| Données-attribut | Valeur | La description |
|---|---|---|
| data-corners | true | false | Indique si le popup doit avoir des coins arrondis ou non |
| data-dismissible | true | false | Indique si le popup doit être fermé en cliquant sur l'extérieur de la fenêtre ou non |
| data-history | true | false | Indique si le popup doit créer un élément de l'historique du navigateur lors de l'ouverture. Si la valeur false, il ne sera pas créer un élément de l'histoire, et ne sera alors pas refermable par bouton "Retour" du navigateur |
| data-overlay-theme | letter (a-z) | Indique la superposition de couleurs (fond) de la boîte de pop-up. Par défaut fond transparent (aucun). |
| data-shadow | true | false | Indique si la boîte de popup doit avoir des ombres ou non |
| data-theme | letter (a-z) | Indique la couleur du thème de la boîte de pop-up. Par défaut hérité, "none" définit le popup pour la transparence |
| data-tolerance | 30, 15, 30, 15 | Indique la distance entre les bords de la fenêtre ( en top, right, bottom, left à top, right, bottom, left en top, right, bottom, left à top, right, bottom, left ) |
Une ancre avec des data-rel="popup" :
| Données-attribut | Valeur | La description |
|---|---|---|
| data-position-to | origin | jQuery selector | window | Indique la position des boîtes automatiques. Origine - Default. Positions popup sur le lien qui l'ouvre. jQuery selector - positionne la fenêtre contextuelle sur l'élément spécifié. Fenêtre - positionne la fenêtre contextuelle dans le milieu de l'écran de la fenêtre. |
| data-rel | popup | Pour ouvrir la boîte de pop-up |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | Indique comment passer d'une page à l'autre. Voir notre Transitions mobile jQuery chapitre. |
Bouton radio
Paires d'étiquettes et entrées avec type="radio" .
| Données-attribut | Valeur | La description |
|---|---|---|
| data-mini | true | false | Indique si le bouton doit être de petite taille ou régulière |
| data-role | none | Empêche jQuery Mobile pour le style radiobuttons sous forme de boutons améliorés |
| data-theme | letter (a-z) | Indique la couleur du thème du bouton radio |
Pour plusieurs boutons radio du groupe, utiliser le data-role="controlgroup" avec le data-type="horizontal|vertical" pour indiquer si le groupe les boutons horizontalement ou verticalement.
Sélectionner
Tous <select> éléments.
| Données-attribut | Valeur | La description |
|---|---|---|
| data-icon | Icons Reference | Indique l'icône de l'élément select. Par défaut est "arrow-d" |
| data-iconpos | left | right | top | bottom | notext | Indique la position de l'icône |
| data-inline | true | false | Indique si l'élément de sélection devrait être en ligne ou non |
| data-mini | true | false | Indique si la sélection doit être de petite taille ou régulière |
| data-native-menu | true | false | Lorsque la valeur false, il utilise le menu de sélection propre personnalisée de jQuery (recommandé si vous voulez que le menu de sélection pour afficher le même sur tous les appareils mobiles) |
| data-overlay-theme | letter (a-z) | Indique la couleur du thème du menu de sélection propre personnalisé de jQuery (utilisé conjointement avec les data-native-menu="false" ) |
| data-placeholder | true | false | Peut être réglé sur une <option> élément d'une sélection non-native |
| data-role | none | Empêche jQuery Mobile à des éléments de sélection de style que les boutons |
| data-theme | letter (a-z) | Indique la couleur du thème de l'élément de sélection |
Pour regrouper plusieurs sélectionner des éléments, utiliser le data-role="controlgroup" avec le data-type="horizontal|vertical" pour indiquer si le groupe les éléments horizontalement ou verticalement.
curseur
Entrées avec type="range" .
| Données-attribut | Valeur | La description |
|---|---|---|
| data-highlight | true | false | Indique si la piste de curseur doit être mis en évidence ou non |
| data-mini | true | false | Indique si le curseur doit être de petite taille ou régulière |
| data-role | none | Empêche jQuery Mobile pour des curseurs de style que les boutons |
| data-theme | letter (a-z) | Indique la couleur du thème de la commande de curseur (l'entrée, gérer et suivre) |
| data-track-theme | letter (a-z) | Indique la couleur du thème de la piste de curseur |