jQuery Mobile - Attributs de données
Bouton
Il spécifie un bouton cliquable qui inclut du contenu comme du texte ou des images à l'aide de la classe ui-btn . Il est obsolète dans la version 1.4. Utilisez l' attribut ui-btn au lieu d'utiliser l'attribut data-role = "button" .
Le tableau suivant répertorie les éléments de bouton utilisés avec l'attribut data.
| Sr.No. | Attribut de données et description | Valeur |
|---|---|---|
| 1 | data-corners Il définit si le bouton doit contenir des coins arrondis ou non. |
vrai | faux |
| 2 | data-icon Il définit l'icône du bouton. |
Par défaut, aucune icône |
| 3 | data-iconpos Il définit la position de l'icône. |
gauche | droite | top | bas |
| 4 | data-iconshadow Il définit si l'icône du bouton doit contenir une ombre ou non. |
vrai | faux |
| 5 | data-inline Il définit si le bouton doit être en ligne ou non. |
vrai | faux |
| 6 | data-mini Il définit si le bouton doit s'afficher dans une taille plus petite ou une taille normale. |
vrai | faux |
| sept | data-shadow Il définit si le bouton doit contenir une ombre ou non. |
vrai | faux |
| 8 | data-theme Il affiche la couleur du thème du bouton. |
lettre (az) |
Case à cocher
Le tableau suivant répertorie les éléments de case à cocher utilisés avec type = "checkbox".
| Sr.No. | Attribut de données et description | Valeur |
|---|---|---|
| 1 | data-mini Il définit si la case à cocher doit s'afficher dans une taille plus petite ou une taille normale. |
vrai | faux |
| 2 | data-role Il arrête le style des cases à cocher en tant que boutons. |
aucun |
| 3 | data-theme Il affiche la couleur du thème pour la case à cocher. |
lettre (az) |
Pliant
Le tableau suivant répertorie les éléments pliables utilisés avec data-role = "collapsible" attribut.
| Sr.No. | Attribut de données et description | Valeur |
|---|---|---|
| 1 | data-collapsed Il indique si le contenu doit être fermé ou développé. |
vrai | faux |
| 2 | data-collapsed-cue-text Il affiche les commentaires des utilisateurs disposant d'un logiciel de lecture d'écran. |
La valeur par défaut est la réduction du contenu |
| 3 | data-collapsed-icon Il définit l'icône du bouton pliable. |
L'icône par défaut est "plus" |
| 4 | data-content-theme Il affiche la couleur du thème pour le contenu pliable. |
lettre (az) |
| 5 | data-expanded-cue-text Il affiche les commentaires des utilisateurs disposant d'un logiciel de lecture d'écran. |
La valeur par défaut est l'expansion du contenu |
| 6 | data-expanded-icon Il affiche le bouton réductible lorsque vous développez le contenu. |
L'icône par défaut est "moins" |
| sept | data-iconpos Il définit la position de l'icône. |
gauche | droite | top | bas |
| 8 | data-inset Il définit si le bouton pliable doit s'afficher avec des coins et une marge arrondis ou non. |
vrai | faux |
| 9 | data-mini Il définit si les boutons réductibles doivent s'afficher dans une taille plus petite ou une taille normale. |
vrai | faux |
| dix | data-theme Il affiche la couleur du thème pour le bouton pliable. |
lettre (az) |
Ensemble pliable
Le tableau suivant répertorie les éléments d'ensemble réductibles utilisés avec le data-role = "collapsibleset" attribut.
| Sr.No. | Attribut de données et description | Valeur |
|---|---|---|
| 1 | data-collapsed-icon Il définit l'icône du bouton pliable. |
L'icône par défaut est "plus" |
| 2 | data-content-theme Il affiche la couleur du thème pour le contenu pliable. |
lettre (az) |
| 3 | data-expanded-icon Il affiche le bouton réductible lorsque vous développez le contenu. |
L'icône par défaut est "moins" |
| 4 | data-iconpos Il définit la position de l'icône. |
gauche | droite | top | bas |
| 5 | data-inset Il définit si le bouton pliable doit s'afficher avec des coins et une marge arrondis ou non. |
vrai | faux |
| 6 | data-mini Il définit si les boutons réductibles doivent s'afficher dans une taille plus petite ou une taille normale. |
vrai | faux |
| sept | data-theme Il affiche la couleur du thème pour le bouton pliable. |
lettre (az) |
Groupe de contrôle
Le tableau suivant répertorie les éléments Controlgroup utilisés avec data-role = "controlgroup" attribut -
| Sr.No. | Attribut de données et description | Valeur |
|---|---|---|
| 1 | data-exclude-invisible Il définit s'il faut exclure les enfants invisibles dans l'affectation des coins arrondis. |
vrai | faux |
| 2 | data-mini Il définit si le groupe doit s'afficher dans une taille plus petite ou une taille normale. |
vrai | faux |
| 3 | data-theme Il affiche la couleur du thème du groupe de contrôle. |
lettre (az) |
| 4 | data-type Il indique si le groupe doit s'afficher au format horizontal ou vertical. |
horizontal | verticale |
Dialogue
Le tableau suivant répertorie les éléments de dialogue utilisés avec data-dialog="true" attribut.
| Sr.No. | Attribut de données et description | Valeur |
|---|---|---|
| 1 | data-close-btn Il définit la position du bouton de fermeture. |
gauche | droite | aucun |
| 2 | data-close-btn-text Il définit le texte du bouton de fermeture. |
texte |
| 3 | data-corners Il définit si la boîte de dialogue doit s'afficher avec des coins arrondis ou non. |
vrai | faux |
| 4 | data-dom-cache Il indique si le cache DOM doit s'effacer ou non pour des pages individuelles. |
vrai | faux |
| 5 | data-overlay-theme Il définit la couleur de superposition de la page de dialogue. |
lettre (az) |
| 6 | data-theme Il définit la couleur du thème de la page de dialogue. |
lettre (az) |
| sept | data-title Il définit le titre de la page de dialogue. |
texte |
Renforcement
Le tableau suivant répertorie les éléments d'amélioration utilisés avec data-enhance="false" or data-ajax = "false" attribut.
| Sr.No. | Attribut de données et description | Valeur |
|---|---|---|
| 1 | data-enhance Vous pouvez styliser la page en définissant cet attribut sur "true". Vous ne pouvez pas styliser la page si elle est définie sur "false". |
vrai | faux |
| 2 | data-ajax Il indique si les pages doivent se charger depuis Ajax ou non. |
vrai | faux |
Barre d'outils fixe
Le tableau suivant répertorie les éléments de la barre d'outils utilisés avec data-position = "fixed" attribut.
| Sr.No. | Attribut de données et description | Valeur |
|---|---|---|
| 1 | data-disable-page-zoom Il définit si l'utilisateur est en mesure de mettre à l'échelle / zoomer la page ou non. |
vrai | faux |
| 2 | data-fullscreen Il définit que les barres d'outils doivent être positionnées en haut et / ou en bas. |
vrai | faux |
| 3 | data-tap-toggle Il indique si l'utilisateur peut activer ou non la visibilité de la barre d'outils sur les robinets. |
vrai | faux |
| 4 | data-transition Il montre un effet de transition lorsque vous appuyez ou cliquez sur l'élément. |
slide | fondu | aucun |
| 5 | data-update-page-padding Il met à jour le remplissage de la page en utilisant des événements de mise en page de redimensionnement, de transition et de mise à jour. |
vrai | faux |
| 6 | data-visible-on-page-show Il définit la visibilité de la barre d'outils lorsque la page parent est affichée. |
vrai | faux |
Basculer l'interrupteur à bascule
Le tableau suivant répertorie les éléments à bascule utilisés avec data-role = "flipswitch" attribut -
| Sr.No. | Attribut de données et description | Valeur |
|---|---|---|
| 1 | data-mini Il définit si le commutateur doit s'afficher dans une taille plus petite ou une taille normale. |
vrai | faux |
| 2 | data-on-text Il définit le texte «on» sur le commutateur à bascule. |
La valeur par défaut est "on" |
| 3 | data-off-text Il définit le texte «off» sur l'interrupteur à bascule. |
La valeur par défaut est "off" |
Bas de page
Le tableau suivant répertorie les éléments de pied de page utilisés avec l' attribut data-role = "footer" -
| Sr.No. | Attribut de données et description | Valeur |
|---|---|---|
| 1 | data-id Il définit l'ID unique. |
texte |
| 2 | data-position Il définit si le pied de page doit être positionné en bas ou en ligne avec le contenu de la page. |
en ligne | fixé |
| 3 | data-fullscreen Il définit si le pied de page doit être positionné en bas et sur le contenu de la page ou non. |
vrai | faux |
| 4 | data-theme Il définit la couleur du thème du pied de page. |
lettre (az) |
Entête
Le tableau suivant répertorie les éléments d'en-tête utilisés avec data-role = "header" attribut.
| Sr.No. | Attribut de données et description | Valeur |
|---|---|---|
| 1 | data-id Il définit l'ID unique. |
texte |
| 2 | data-position Il définit si l'en-tête doit être positionné en bas ou en ligne avec le contenu de la page. |
en ligne | fixé |
| 3 | data-fullscreen Il définit si l'en-tête doit être positionné en bas et sur le contenu de la page ou non. |
vrai | faux |
| 4 | data-theme Il définit la couleur du thème de l'en-tête. |
lettre (az) |
Contributions
Le tableau suivant répertorie les éléments d'entrée utilisés avec type = "text|search|etc" attribut.
| Sr.No. | Attribut de données et description | Valeur |
|---|---|---|
| 1 | data-clear-btn Il définit si l'élément d'entrée doit contenir le bouton d'effacement ou non. |
vrai | faux |
| 2 | data-clear-btn-text Il définit le texte du bouton d'effacement. |
texte |
| 3 | data-mini Il définit si l'entrée doit s'afficher dans une taille plus petite ou une taille normale. |
vrai | faux |
| 4 | data-role Il arrête de styliser les zones de saisie ou de texte en tant que boutons. |
aucun |
| 5 | data-theme Il définit la couleur du thème de l'élément d'entrée. |
lettre (az) |
Lien
Le tableau suivant répertorie les éléments de lien utilisés avec jQuery Mobile.
| Sr.No. | Attribut de données et description | Valeur |
|---|---|---|
| 1 | data-ajax Il indique si les pages doivent être chargées via Ajax ou non. |
vrai | faux |
| 2 | data-direction Il est utilisé pour la transition inverse. |
inverser |
| 3 | data-dom-cache Il indique si le cache DOM jQuery doit être clair ou non pour les pages. |
vrai | faux |
| 4 | data-prefetch Il est utilisé pour pré-extraire les pages dans le DOM. |
vrai | faux |
| 5 | data-rel Il spécifie le comportement du lien. |
retour | dialogue | externe | apparaitre |
| 6 | data-transition Il définit la transition d'une page à une autre. |
fondu | flip | flux | pop | slide | slidedown | slidefade | slideup | tourner | aucun |
| sept | data-position-to Il définit la position des boîtes contextuelles. |
origine | sélecteur jQuery | la fenêtre |
liste
Le tableau suivant montre les éléments de liste utilisés avec data-role = "listview" attribut.
| Sr.No. | Attribut de données et description | Valeur |
|---|---|---|
| 1 | data-autodividers Il divise la liste automatiquement. |
vrai | faux |
| 2 | data-count-theme Il définit la couleur du thème de l'élément count. |
lettre (az) |
| 3 | data-divider-theme Il définit la couleur du thème pour le séparateur de liste. |
lettre (az) |
| 4 | data-filter Il est utilisé pour filtrer les valeurs de la liste dans la zone de recherche. |
vrai | faux |
| 5 | data-filter-placeholder Il définit du texte dans la zone de recherche. |
texte |
| 6 | data-filter-theme Il définit la couleur du thème pour le filtre de recherche. |
lettre (az) |
| sept | data-icon Il fournit l'icône de la liste. |
Par défaut, aucune icône |
| 8 | data-inset Il définit si la liste doit s'afficher avec des coins et une marge arrondis ou non. |
vrai | faux |
| 9 | data-split-icon Il définit l'icône du bouton partagé. |
L'icône par défaut est "arrow-r" |
| dix | data-split-theme Il définit la couleur du thème pour le bouton divisé. |
lettre (az) |
| 11 | data-theme Il définit la couleur du thème de la liste. |
lettre (az) |
Élément de liste
Le tableau suivant montre les éléments d'élément de liste utilisés avec data-role = "listview" attribut.
| Sr.No. | Attribut de données et description | Valeur |
|---|---|---|
| 1 | data-filtertext Il est utilisé pour filtrer les valeurs de la liste à l'aide du texte dans la zone de recherche. |
texte |
| 2 | data-icon Il fournit l'icône de l'élément de liste. |
Par défaut, aucune icône |
| 3 | data-role Il définit le séparateur pour les éléments de liste. |
séparateur de liste |
| 4 | data-theme Il définit la couleur du thème de l'élément de liste. |
lettre (az) |
Navbar
Le tableau suivant répertorie les éléments de la barre de navigation utilisés avec data-role = "navbar" attribut.
| Sr.No. | Attribut de données et description | Valeur |
|---|---|---|
| 1 | data-icon Il fournit l'icône de l'élément de liste. |
Par défaut, aucune icône |
| 2 | data-iconpos Il définit la position de l'icône. |
gauche | droite | top | bas | pas de texte |
Page
Le tableau suivant répertorie les éléments de page utilisés avec data-role = "page" attribut.
| Sr.No. | Attribut de données et description | Valeur |
|---|---|---|
| 1 | data-dom-cache Il indique si le cache DOM doit s'effacer ou non pour des pages individuelles. |
vrai | faux |
| 2 | data-overlay-theme Il définit la couleur de superposition des pages de dialogue. |
lettre (az) |
| 3 | data-theme Il définit la couleur du thème de la page. |
lettre (az) |
| 4 | data-title Il fournit le titre de la page. |
Par défaut, aucune icône |
| 5 | data-url Il est utilisé pour mettre à jour l'URL. |
URL |
Apparaitre
Le tableau suivant répertorie les éléments contextuels utilisés avec data-role = "popup" attribut.
| Sr.No. | Attribut de données et description | Valeur |
|---|---|---|
| 1 | data-corners Il définit si la fenêtre contextuelle doit s'afficher avec des coins et une marge arrondis ou non. |
vrai | faux |
| 2 | data-dismissible Il définit si la fenêtre contextuelle doit être fermée en cliquant à l'extérieur ou non. |
vrai | faux |
| 3 | data-history Il définit si le popup doit afficher l'historique de l'élément lorsqu'il est ouvert. |
vrai | faux |
| 4 | data-overlay-theme Il définit la couleur de superposition de la boîte contextuelle. |
lettre (az) |
| 5 | data-shadow Il affiche l'ombre de la boîte contextuelle. |
vrai | faux |
| 6 | data-theme Il définit la couleur du thème pour la boîte contextuelle. |
lettre (az) |
| sept | data-tolerance Il définit les bords de la fenêtre. |
30, 15, 30, 15 |
Bouton radio
Le tableau suivant répertorie les éléments de bouton radio utilisés avec type = "radio" attribut.
| Sr.No. | Attribut de données et description | Valeur |
|---|---|---|
| 1 | data-mini Il définit si le bouton doit s'afficher dans une taille plus petite ou une taille normale. |
vrai | faux |
| 2 | data-role Il arrête le style des boutons radio en tant que boutons améliorés. |
aucun |
| 3 | data-theme Il définit la couleur du thème du bouton radio. |
lettre (az) |
Sélectionner
Le tableau suivant répertorie les éléments de sélection utilisés avec jQuery Mobile.
| Sr.No. | Attribut de données et description | Valeur |
|---|---|---|
| 1 | data-icon Il fournit l'icône de l'élément sélectionné. |
La valeur par défaut est "arrow-d" |
| 2 | data-iconpos Il définit la position de l'icône. |
gauche | droite | top | bas |
| 3 | data-inline Il définit si le bouton doit être en ligne ou non. |
vrai | faux |
| 4 | data-mini Il définit si select doit s'afficher dans une taille plus petite ou une taille normale. |
vrai | faux |
| 5 | data-native-menu Il utilise un menu personnalisé lorsqu'il a été défini sur false. |
vrai | faux |
| 6 | data-overlay-theme Il définit la couleur de superposition pour le menu de sélection personnalisé. |
lettre (az) |
| sept | data-placeholder Il est utilisé pour définir un élément option de sélection non native. |
vrai | faux |
| 8 | data-role Il arrête le style des éléments sélectionnés en tant que boutons. |
aucun |
| 9 | data-theme Il affiche la couleur du thème pour les éléments sélectionnés. |
lettre (az) |
Glissière
Le tableau suivant répertorie les éléments de curseur utilisés avec type = "range" attribut.
| Sr.No. | Attribut de données et description | Valeur |
|---|---|---|
| 1 | data-highlight Il met en évidence le curseur. |
vrai | faux |
| 2 | data-mini Il définit si le curseur doit s'afficher dans une taille plus petite ou une taille normale. |
vrai | faux |
| 3 | data-role Il arrête le style des commandes de curseur en tant que boutons. |
aucun |
| 4 | data-theme Il affiche la couleur du thème du curseur. |
lettre (az) |
| 5 | data-track-theme Il affiche la couleur du thème de la piste du curseur. |
lettre (az) |