Forum | Derniers tutoriels de développement web
 

jQuery Mobile Attributs de données


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-inlinetrue | false Indique si le bouton doit être en ligne ou non
data-minitrue | 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-minitrue | false Indique si la case à cocher doit être de petite taille ou régulière
data-rolenone 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-minitrue | 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-minitrue | 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-minitrue | 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-typehorizontal | 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-cachetrue | 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-fullscreentrue | 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-minitrue | 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-fullscreentrue | 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-fullscreentrue | 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-btntrue | 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-minitrue | false Indique si l'entrée doit être de petite taille ou régulière
data-rolenone 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-directionreverse animation de transition inversée (uniquement pour la page ou boîte de dialogue)
data-dom-cachetrue | 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-prefetchtrue | false Indique si SQLite pages dans le DOM afin qu'ils soient disponibles lorsque l'utilisateur les visites
data-relback | 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-autodividerstrue | 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-filtertrue | 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-insettrue | 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-rolelist-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-iconposleft | 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-cachetrue | 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-urlurl 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-tolerance30, 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-relpopup Pour ouvrir la boîte de pop-up
data-transitionfade | 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-minitrue | false Indique si le bouton doit être de petite taille ou régulière
data-rolenone 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-iconposleft | right | top | bottom | notext Indique la position de l'icône
data-inlinetrue | false Indique si l'élément de sélection devrait être en ligne ou non
data-minitrue | 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-placeholdertrue | false Peut être réglé sur une <option> élément d'une sélection non-native
data-rolenone 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-highlighttrue | false Indique si la piste de curseur doit être mis en évidence ou non
data-minitrue | false Indique si le curseur doit être de petite taille ou régulière
data-rolenone 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