Description de jQuery Mobile Data
Propriété de données jQuery
jQuery Mobile utilise les attributs HTML5 data-* pour créer une apparence plus conviviale et plus attrayante pour les appareils mobiles.
Dans la liste de références ci-dessous, les valeurs affichées en grassont les valeurs par défaut.
bouton
Obsolète après la version 1.4. Utilisez plutôt des classes CSS. Hyperlien avec data-role="button". Les éléments de bouton, les liens dans les barres d'outils et les champs de saisie seront automatiquement rendus dans les styles de bouton sans ajouter de data-role="button".
| Propriété des données | valeur | décrire |
|---|---|---|
| coins de données | vrai | faux | Spécifie si le bouton a des coins arrondis |
| icône de données | Manuel de référence des icônes | Spécifie l'icône du bouton. Il n'y a pas d'icône par défaut. |
| icône de données | gauche | haut droit | | Spécifie l'emplacement de l'icône |
| ombre d'icône de données | vrai | faux | Spécifie si l'icône du bouton a une ombre |
| données en ligne | vrai | faux | Spécifie si le bouton est en ligne |
| données-mini | vrai | faux | Spécifie si le bouton est de petite taille ou de taille normale |
| ombre de données | vrai | faux | Spécifie si le bouton a une ombre |
| thème de données | Lettre (a-z) | Spécifie la couleur du thème du bouton |
|
如需组合多个按钮，请使用带有 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 的容器来规定是否水平或垂直组合按钮。 |
|---|
case à cocher
Étiquette et entrée associées avec type="checkbox". Ils sont automatiquement rendus avec les styles de boutons et le rôle de données n'est pas requis.
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 规定复选框是小尺寸还是常规尺寸 |
| data-role | none | 防止 jQuery Mobile 把复选框渲染成按钮样式 |
| data-theme | 字母 (a-z) | 规定复选框的主题颜色 |
|
如需组合多个复选框，请使用带有 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 的容器来规定是否水平或垂直组合复选框。 |
|---|
Bloc pliable
Un élément de titre suivi de n'importe quelle balise HTML à l'intérieur d'un conteneur avec data-role="collapsible".
| Propriété des données | valeur | décrire |
|---|---|---|
| données réduites | vrai | faux | Spécifie si le contenu est réduit ou développé |
| icône de données réduites | Manuel de référence des icônes | Spécifie l'icône du bouton pliable. La valeur par défaut est "plus" |
| thème de contenu de données | Lettre (a-z) | Spécifie la couleur du thème pour le contenu pliable. S'il faut ajouter des coins arrondis au contenu pliable |
| icône de données étendues | Manuel de référence des icônes | Spécifie l'icône du bouton réductible lorsque le contenu est développé.La valeur par défaut est "moins" |
| icône de données | gauche | droite haut bas | | Spécifie l'emplacement de l'icône |
| encart de données | vrai | faux | Spécifie si le bouton pliable est rendu avec des coins et des marges arrondis |
| données-mini | vrai | faux | Spécifie si le bouton pliable est de petite taille ou de taille normale |
| thème de données | Lettre (a-z) | Spécifie la couleur du thème pour le bouton pliable |
Collection pliable
Un bloc de contenu pliable à l'intérieur d'un conteneur avec data-role="collapsible-set".
| Propriété des données | valeur | décrire |
|---|---|---|
| icône de données réduites | Manuel de référence des icônes | Spécifie l'icône du bouton pliable. La valeur par défaut est "plus" |
| thème de contenu de données | Lettre (a-z) | Spécifie la couleur du thème pour le bouton pliable |
| icône de données étendues | Manuel de référence des icônes | Spécifie l'icône du bouton réductible lorsque le contenu est développé.La valeur par défaut est "moins" |
| icône de données | gauche | haut droit | | Spécifie l'emplacement de l'icône |
| encart de données | vrai | faux | Spécifie si le bloc pliable est rendu avec des coins et des marges arrondis. |
| données-mini | vrai | faux | Spécifie si le bouton pliable est de petite taille ou de taille normale |
| thème de données | Lettre (a-z) | Spécifie la couleur du thème pour une collection pliable |
contenu
Obsolète dans la version 1.4 et n'est plus pris en charge après la version 1.5. Conteneur utilisant data-role="content".
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-theme | 字母 (a-z) | 规定内容的主题颜色。 |
groupe témoin
Un conteneur <div> ou <fieldset> avec data-role="controlgroup". Combinaison de plusieurs entrées de type bouton d'un seul type (bouton basé sur un lien, bouton radio, case à cocher, élément de sélection). Pour les cases à cocher et les boutons radio de formulaire combinés, il est recommandé d'utiliser un conteneur <fieldset> à l'intérieur d'un <div> avec data-role="fieldcontain" pour améliorer le style des étiquettes.
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 规定控件组是小尺寸还是常规尺寸 |
| data-type | horizontal | vertical | 规定控件组是水平显示还是垂直显示 |
boîte de dialogue
Un conteneur avec data-role="dialog" ou un lien avec data-rel="dialog".
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-close-btn-text | sometext | 规定对话框关闭按钮的文本 |
| data-dom-cache | true | false | 规定是否清除各个页面的 jQuery DOM 缓存（如果设置为 true，您必须自己管理 DOM 并在所有移动设备上进行测试） |
| data-overlay-theme | 字母 (a-z) | 规定对话框页面的蒙版（背景）颜色 |
| data-theme | 字母 (a-z) | 规定对话框页面的主题颜色 |
| data-title | sometext | 规定对话框页面的标题 |
Améliorer
Conteneurs avec data-enhance="false" ou data-ajax="false".
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-enhance | true | false | 如果设置为 "true"（默认），jQuery Mobile 会自动渲染页面，使其更适合于移动设备。如果设置为 "false"，框架将不会渲染页面 |
| data-ajax | true | false | 规定是否通过 ajax 加载页面 |
Remarque : data-enhance="false" doit être utilisé avec $.mobile.ignoreContentEnabled=true" pour empêcher jQuery Mobile de restituer automatiquement la page.
Lorsque $.mobile.ignoreContentEnabled est défini sur true, tous les liens ou éléments de formulaire dans un conteneur data-ajax="false" seront ignorés par la fonctionnalité de navigation du cadre.
conteneur de domaine
Obsolète après la version 1.4 et n'est plus pris en charge après la version 1.5, class="ui-fieldcontain sera utilisé à la place". Un conteneur enveloppé dans une paire d'éléments label/form avec data-role="fieldcontain".
Barre d'outils fixe
Un conteneur avec data-role="header" ou data-role="footer", et avec l'attribut data-position="fixed".
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-disable-page-zoom | true | false | 规定用户是否能缩放页面 |
| data-fullscreen | true | false | 规定工具栏是否一直固定在顶部或底部 |
| data-tap-toggle | true | false | 规定用户是否能够通过点击改变工具栏的可见性 |
| data-transition | slide | fade | none | 规定当点击发生时的切换效果 |
| data-update-page-padding | true | false | 规定页面顶部和底部的内边距是否在 resize、transition 和 "updatelayout" 事件发生时更新（jQuery Mobile 在 "pageshow" 事件发生时总是更新内边距） |
| data-visible-on-page-show | true | false | 规定当父页面显示时工具栏的可见性 |
interrupteur à bascule
Un élément <select> avec data-role="slider" et deux éléments <option>
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 规定开关是小尺寸还是常规尺寸 |
| data-role | none | 防止 jQuery Mobile 把拨动开关渲染成按钮样式 |
| data-theme | 字母 (a-z) | 规定拨动开关的主题颜色 |
| data-track-theme | 字母 (a-z) | 规定轨道的主题颜色 |
barre de queue
Conteneurs avec data-role="footer".
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-id | sometext | 规定唯一 ID。对于持续的尾部栏是必需的 |
| data-position | inline | fixed | 规定尾部栏是与页面内容内联还是保持固定在底部 |
| data-fullscreen | true | false | 规定尾部栏是固定在底部还是覆盖在页面内容上（查看范围更大） |
| data-theme | 字母 (a-z) | 规定尾部栏的主题颜色。默认是 "a" |
Remarque : Pour activer le positionnement en plein écran, utilisez data-position="fixed" puis ajoutez l'attribut data-fullscreen à l'élément.
barre d'en-tête
Un conteneur avec data-role="header".
| identifiant de données | un texte | Spécifie un ID unique. Obligatoire pour la barre d'en-tête persistante | |||||||||||||||
| position des données |
|
Spécifie si la barre d'en-tête doit être alignée avec le contenu de la page ou rester fixe en haut. | |||||||||||||||
| données en plein écran | vrai | <🎜>faux<🎜> | Spécifie si la barre d'en-tête est fixe en haut ou couvre le contenu de la page (plage de visualisation plus large) | |||||||||||||||
| thème de données | Lettres (a-z) | Spécifie la couleur du thème de la barre d'en-tête. La valeur par défaut est "a" |
Remarque : Pour activer le positionnement en plein écran, utilisez data-position="fixed" puis ajoutez l'attribut data-fullscreen à l'élément.
Lien
Tous les liens, y compris ceux avec data-role="button" et les boutons d'envoi de formulaire.
| Propriété des données | valeur | décrire |
|---|---|---|
| données-ajax | vrai | faux | Spécifie s'il faut charger les pages via ajax pour améliorer l'expérience utilisateur et l'interaction. S'il est défini sur false, jQuery Mobile effectuera une requête de page normale. |
| direction des données | inverse | Animation de transition inversée (uniquement pour les pages et les boîtes de dialogue) |
| cache de données | vrai | faux | Spécifie s'il faut vider le cache DOM jQuery pour des pages individuelles (si défini sur true, vous devez gérer le DOM vous-même et tester sur tous les appareils mobiles) |
| prélecture des données | vrai | faux | Spécifie s'il faut pré-lire les pages dans le DOM afin qu'elles soient disponibles lorsque l'utilisateur y accède |
| données-rel | retour | boîte de dialogue externe | | Options qui spécifient le comportement du lien. Retour - Revenir à la page précédente de l'historique. Dialogue - Ouvrez le lien sous forme de boîte de dialogue sans l'enregistrer dans l'historique. Externe - utilisé pour créer un lien vers un autre domaine. Popup - Ouvre une fenêtre contextuelle. |
| transition de données | fondu | retourner | pop | slidedown | slidefade | aucun | Spécifie l'effet du passage d'une page à la page suivante.Consultez notre chapitre Changement de page mobile jQuery. |
| position des données vers | origine | Fenêtre de sélection jQuery | | Spécifie la position de la boîte contextuelle. Origine - Par défaut. Positionnez la popup sur le lien qui l'a ouverte. Sélecteur jQuery - Positionnez la fenêtre pop-up sur l'élément spécifié. Fenêtre - Positionne la fenêtre contextuelle au centre de l'écran de la fenêtre. |
liste
<ol> ou <ul> avec data-role="listview".
| Propriété des données | valeur | décrire |
|---|---|---|
| diviseurs automatiques de données | vrai | faux | Spécifie s'il faut diviser automatiquement les éléments de la liste |
| thème de comptage de données | Lettre (a-z) | Spécifie la couleur du thème pour compter les bulles. |
| thème du diviseur de données | Lettre (a-z) | Spécifie la couleur du thème pour les séparateurs de liste. |
| filtre de données | vrai | faux | Spécifie s'il faut ajouter une zone de recherche à la liste |
| espace réservé au filtre de données | un texte | Abandonné après la version 1.4. Utilisez plutôt l'attribut d'espace réservé HTML. Spécifie le texte dans la zone de recherche. La valeur par défaut est "Filtrer les éléments..." |
| thème de filtre de données | Lettre (a-z) | Spécifie la couleur du thème pour le filtrage de recherche. |
| icône de données | Manuel de référence des icônes | Spécifier l'icône de la liste |
| encart de données | vrai | faux | Spécifie si la liste est rendue avec des coins et des marges arrondis |
| icône de partage de données | Manuel de référence des icônes | Spécifie un graphique pour les boutons partagés. La valeur par défaut est "flèche-r" |
| thème de partage de données | Lettre (a-z) | Spécifie la couleur du thème pour le bouton partagé. |
| thème de données | Lettre (a-z) | Spécifie la couleur du thème pour la liste |
élément de liste
<ol> avec data-role="listview" ou <li> à l'intérieur de <ul>.
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-filtertext | sometext | 规定当过滤元素时要搜索的文本。该文本将会被过滤，而不是实际的列表项文本 |
| data-icon | 图标参考手册 | 规定列表项图标 |
| data-role | list-divider | 规定列表项的分隔 |
| data-theme | 字母 (a-z) | 规定列表项的主题颜色 |
Remarque : L'attribut data-icon ne fonctionne que sur les éléments de liste avec des liens.
Barre de navigation
Un élément <li> à l'intérieur d'un conteneur data-role="navbar".
| icône de données | Manuel de référence des icônes | Spécifie l'icône d'un élément de liste | |||||||||
| icône de données |
gauche | droite |
| |
Spécifie l'emplacement de l'icône |
|
导航栏从他们的父容器中继承了主题样本。为导航栏设置 data-theme 属性是不可能的。可以为导航栏中的每个链接单独设置 data-theme 属性。 |
|---|
page
Conteneur avec data-role="page".
| Propriété des données | valeur | décrire |
|---|---|---|
| données-ajout-back-btn | vrai | faux | Ajouter automatiquement le bouton de retour, barre d'en-tête uniquement |
| données-back-btn-text | un texte | Spécifie du texte pour le bouton de retour |
| thème-data-back-btn | Lettre (a-z) | Spécifie la couleur du thème pour le bouton de retour |
| données-fermer-btn-texte | Lettre (a-z) | Spécifie du texte pour le bouton de fermeture de la boîte de dialogue |
| cache de données | vrai | faux | Spécifie s'il faut vider le cache DOM jQuery pour des pages individuelles (si défini sur true, vous devez gérer le DOM vous-même et tester sur tous les appareils mobiles) |
| thème de superposition de données | Lettre (a-z) | Spécifie la couleur du masque (arrière-plan) de la page de dialogue |
| thème de données | Lettre (a-z) | Spécifie la couleur du thème de la page. |
| titre-données | un texte | Préciser le titre de la page |
| URL de données | URL | Mettre à jour la valeur de l'URL autre que l'URL utilisée pour demander la page |
Fenêtre contextuelle
Conteneurs avec data-role="popup".
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-corners | true | false | 规定弹窗是否圆角 |
| data-overlay-theme | 字母 (a-z) | 规定弹出框的蒙版（背景）颜色。默认是透明背景（无） |
| data-shadow | true | false | 规定弹出框是否有阴影 |
| data-theme | 字母 (a-z) | 规定弹出框的主题颜色。默认是继承的，"none" 设置弹窗为透明的 |
| data-tolerance | 30, 15, 30, 15 | 规定窗口边缘（上 top、右 right、下 bottom、左 left）的距离 |
Ancres avec data-rel="popup" :
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-position-to | origin | jQuery selector | window | >规定弹出框的位置。Origin - 默认。定位弹窗在打开它的链接上。jQuery selector - 定位弹窗在指定元素上。Window - 定位弹窗在窗口屏幕的中央。 |
| data-rel | popup | 用于打开弹出框 |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | 规定一个页面切换到下一个页面的效果。请查看我们的 jQuery Mobile 页面切换章节。 |
bouton radio
Étiquette et entrée associées avec type="radio". Ils sont automatiquement rendus avec les styles de boutons et le rôle de données n'est pas requis.
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 规定按钮是小尺寸还是常规尺寸 |
| data-role | none | 防止 jQuery Mobile 渲染单选按钮的样式为增强状态的按钮，使元素以 HTML 原生的状态显示 |
| data-theme | 字母 (a-z) | 规定单选按钮的主题颜色 |
|
|
如需组合多个单选按钮，请使用带有 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 的容器来规定是否水平或垂直组合单选按钮。 |
|---|
choisir
Tous les éléments <select>. Ceux-ci seront automatiquement rendus sous forme de styles de boutons, le rôle de date n'est pas requis.
| Propriété des données | valeur | décrire |
|---|---|---|
| icône de données | Manuel de référence des icônes | Spécifie l'icône de l'élément de sélection.La valeur par défaut est "flèche-d" |
| icône de données | gauche | droite | haut bas | | Spécifie l'emplacement de l'icône |
| données en ligne | vrai | faux | Spécifie si l'élément select est en ligne |
| données-mini | vrai | faux | Spécifie si l'élément sélectionné est de petite taille ou de taille normale |
| menu-données-natif | vrai | faux | Lorsqu'il est défini sur false, il utilise le menu de sélection personnalisé fourni avec jQuery (recommandé si vous souhaitez que le menu de sélection apparaisse de la même manière sur tous les appareils mobiles) |
| thème de superposition de données | Lettre (a-z) | Spécifie la couleur du thème du menu de sélection personnalisé fourni avec jQuery (utilisé avec data-native-menu="false") |
| espace réservé aux données | vrai | faux | Peut être défini sur l'élément <option> d'un menu de sélection non natif. |
| rôle de données | aucun | Empêcher jQuery Mobile de restituer les éléments sélectionnés dans les styles de boutons |
| thème de données | Lettre (a-z) | Spécifie la couleur du thème de l'élément sélectionné |
|
|
如需组合多个 select 元素，请使用带有 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 的容器来规定是否水平或垂直组合 select 元素。 |
|---|
curseur
Zone de saisie avec type="range". Ceux-ci seront automatiquement rendus sous forme de styles de boutons, le rôle de date n'est pas requis.
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-highlight | true | false | 规定滑动轨道是否高亮突出显示 |
| data-mini | true | false | 规定滑动块是小尺寸还是常规尺寸 |
| data-role | none | 防止 jQuery Mobile 渲染滑动块控件为按钮样式 |
| data-theme | 字母 (a-z) | 规定滑动块控件（输入框、手柄和轨道）的主题颜色 |
| data-track-theme | 字母 (a-z) | 规定滑动块轨道的主题颜色 |
Zone de saisie de texte et champ de saisie de texte
Une entrée ou un élément textarea avec type="text|search|etc.". Ceux-ci seront automatiquement rendus sous forme de styles de boutons, le rôle de date n'est pas requis.
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 规定输入框是小尺寸还是常规尺寸 |
| data-role | none | 防止 jQuery Mobile 把输入框/输入域渲染成按钮样式 |
| data-theme | 字母 (a-z) | 规定输入字段的主题颜色 |
