Le meilleur didacticiel Propriétés jQuery Mobile Data en 2024, dans ce didacticiel, vous pouvez apprendre Propriétés jQuery données,Bouton poussoir,Checkbox,bloc pliable,collection pliable,teneur,Groupe de contrôle,dialogue,augmenter,conteneur de domaine,amarré barre d'outils,L'interrupteur à bascule,barre de queue,Head Bar,lien,liste,Liste des articles,barre de navigation,page,pop,Bouton radio,sélectionner,curseur,zone de saisie de texte et champ de saisie de texte,
jQuery Mobile en utilisant HTML5 de données * attributs pour créer plus d' aspect tactile convivial et activité pour les appareils mobiles.
Valeur de référence dans la liste suivante, en gras sont les valeurs par défaut.
Après la version 1.4 est obsolète. Utilisez classe CSS à la place. Hyperlink avec data-role = "button" de. bouton liens de la barre d'outils de l'élément et les champs de saisie automatiquement rendre le style de bouton, vous ne pas besoin d'ajouter des données-role = "button".
Data-属性 | 值 | 描述 |
---|---|---|
data-corners | true | false | 规定按钮是否圆角 |
data-icon | 图标参考手册 | 规定按钮的图标。默认没有图标。 |
data-iconpos | left | right | top | bottom | notext | 规定图标的位置 |
data-iconshadow | true | false | 规定按钮图标是否有阴影 |
data-inline | true | false | 规定按钮是否内联 |
data-mini | true | false | 规定按钮是小尺寸还是常规尺寸 |
data-shadow | true | false | 规定按钮是否有阴影 |
data-theme | 字母 (a-z) | 规定按钮的主题颜色 |
Pour une combinaison d'une pluralité de boutons, utilisez = "controlgroup" et de type de données = attribut avec data-role "horizontal | vertical" récipient pour spécifier si des combinaisons horizontales ou verticales de boutons. |
Avec paires d'étiquettes et input type = "checkbox" de. Ils sont automatiquement rendent des processus style de bouton, data-role est pas nécessaire.
Data-属性 | 值 | 描述 |
---|---|---|
data-mini | true | false | 规定复选框是小尺寸还是常规尺寸 |
data-role | none | 防止 jQuery Mobile 把复选框渲染成按钮样式 |
data-theme | 字母 (a-z) | 规定复选框的主题颜色 |
Pour combiner plusieurs cases à cocher, utilisez = "controlgroup" et de type de données = attribut avec data-role "horizontal | vertical" récipient pour spécifier si des combinaisons horizontales ou verticales case. |
A l'intérieur du conteneur , suivi par un code HTML avec un rôle de données = "pliable" marque l'élément du titre.
Data-属性 | 值 | 描述 |
---|---|---|
data-collapsed | true | false | 规定内容是折叠还是展开 |
data-collapsed-icon | 图标参考手册 | 规定可折叠按钮的图标。默认是 "plus" |
data-content-theme | 字母 (a-z) | 规定可折叠内容的主题颜色。是否为可折叠内容添加圆角 |
data-expanded-icon | 图标参考手册 | 规定当内容展开时可折叠按钮的图标。默认是 "minus" |
data-iconpos | left | right | top | bottom | 规定图标的位置 |
data-inset | true | false | 规定可折叠按钮是否渲染成圆角且带外边距 |
data-mini | true | false | 规定可折叠按钮是小尺寸还是常规尺寸 |
data-theme | 字母 (a-z) | 规定可折叠按钮的主题颜色 |
A l'intérieur du récipient avec le data-role = "pliable-set " du bloc contenu pliable.
Data-属性 | 值 | 描述 |
---|---|---|
data-collapsed-icon | 图标参考手册 | 规定可折叠按钮的图标。默认是 "plus" |
data-content-theme | 字母 (a-z) | 规定可折叠按钮的主题颜色 |
data-expanded-icon | 图标参考手册 | 规定当内容展开时可折叠按钮的图标。默认是 "minus" |
data-iconpos | left | right | top | bottom | notext | 规定图标的位置 |
data-inset | true | false | 规定可折叠块是否渲染成圆角且带外边距 |
data-mini | true | false | 规定可折叠按钮是小尺寸还是常规尺寸 |
data-theme | 字母 (a-z) | 规定可折叠集合的主题颜色 |
Dans la version 1.4 a été abandonnée après la version 1.5 est plus pris en charge. En utilisant des données-role = "contenu" du récipient.
propriété Data- | valeur | description |
---|---|---|
data-theme | Lettres (az) | Les dispositions relatives au contenu de la couleur. |
Avec data-role = "controlgroup" le <div> ou <fieldset> conteneur. Une combinaison d'un seul type (boutons fondées sur les liens, les boutons radio, cases à cocher, sélectionnez les éléments) d'une pluralité de touches d'entrée de style. Pour les combinaisons forment des cases à cocher et des boutons radio, nous vous recommandons le <fieldset> dans un récipient avec un data-role = "fieldcontain" la balise <div> à l'intérieur pour améliorer le style.
Data-属性 | 值 | 描述 |
---|---|---|
data-mini | true | false | 规定控件组是小尺寸还是常规尺寸 |
data-type | horizontal | vertical | 规定控件组是水平显示还是垂直显示 |
Conteneur ou avec des données-lien rel = "de dialogue" avec les données-role = "dialogue" est.
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 | 规定对话框页面的标题 |
Avec-données améliorer = "false" ou les données-ajax = conteneurs "faux".
Data-属性 | 值 | 描述 |
---|---|---|
data-enhance | true | false | 如果设置为 "true"(默认),jQuery Mobile 会自动渲染页面,使其更适合于移动设备。如果设置为 "false",框架将不会渲染页面 |
data-ajax | true | false | 规定是否通过 ajax 加载页面 |
Nota: Les données-améliorer = "false" doit être $ .mobile.ignoreContentEnabled = true " sont utilisés ensemble pour empêcher automatiquement jQuery Mobile rendre la page.
Lorsque $ .mobile.ignoreContentEnabled valeur true cadre de navigation, les données-ajax = "false" des liens ou des éléments de formulaire dans le conteneur seront ignorés.
Version 1.4 a été abandonnée après la version 1.5 est plus pris en charge, va utiliser la classe = "alternative ui-fieldcontain." Enveloppé dans une étiquette / forment des paires d'éléments et data-role = "fieldcontain" récipient avec.
Avec data-role = "header" ou data-role = "footer", et des données-position = "fixe" avec des propriétés de conteneurs.
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 | 规定当父页面显示时工具栏的可见性 |
Un data-role = "slider" avec l'élément <select> avec deux <option> élément.
Data-属性 | 值 | 描述 |
---|---|---|
data-mini | true | false | 规定开关是小尺寸还是常规尺寸 |
data-role | none | 防止 jQuery Mobile 把拨动开关渲染成按钮样式 |
data-theme | 字母 (a-z) | 规定拨动开关的主题颜色 |
data-track-theme | 字母 (a-z) | 规定轨道的主题颜色 |
Data-role = "footer" récipient avec.
Data-属性 | 值 | 描述 |
---|---|---|
data-id | sometext | 规定唯一 ID。对于持续的尾部栏是必需的 |
data-position | inline | fixed | 规定尾部栏是与页面内容内联还是保持固定在底部 |
data-fullscreen | true | false | 规定尾部栏是固定在底部还是覆盖在页面内容上(查看范围更大) |
data-theme | 字母 (a-z) | 规定尾部栏的主题颜色。默认是 "a" |
Remarque: Pour permettre un positionnement en mode plein écran, utilisez la position de données = "fixe", puis ajoutez l'attribut data-fullscreen à l'élément.
Data-role = "header" du récipient avec.
Data-属性 | 值 | 描述 |
---|---|---|
data-id | sometext | 规定唯一 ID。对于持续的头部栏是必需的 |
data-position | inline | fixed | 规定头部栏是与页面内容内联还是保持固定在顶部 |
data-fullscreen | true | false | 规定头部栏是固定在顶部还是覆盖在页面内容上(查看范围更大) |
data-theme | 字母 (a-z) | 规定头部栏的主题颜色。默认是 "a" |
Remarque: Pour permettre un positionnement en mode plein écran, utilisez la position de données = "fixe", puis ajoutez l'attribut data-fullscreen à l'élément.
Tous les liens, y compris les liens et formulaires avec data-role = "button" bouton soumettre.
Data-属性 | 值 | 描述 |
---|---|---|
data-ajax | true | false | 规定是否通过 ajax 加载页面来提高用户体验和交互。如果设置为 false,jQuery Mobile 将会执行一个正常的页面请求。 |
data-direction | reverse | 反向转换动画(仅用于页面和对话框) |
data-dom-cache | true | false | 规定是否清除各个页面的 jQuery DOM 缓存(如果设置为 true,您必须自己管理 DOM 并在所有移动设备上进行测试) |
data-prefetch | true | false | 规定是否预先读取页面到 DOM 中,以便当用户访问它们时可用 |
data-rel | back | dialog | external | popup | 规定链接行为的选项。Back - 回退到历史记录中的前一个页面。Dialog - 以对话框形式打开链接,不保存到历史记录中。External - 用于链接到另一个域。Popup - 打开一个弹出窗口。 |
data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | 规定一个页面切换到下一个页面的效果。请查看我们的 jQuery Mobile 页面切换章节。 |
data-position-to | origin | jQuery selector | window | 规定弹出框的位置。Origin - 默认。定位弹窗在打开它的链接上。jQuery selector - 定位弹窗在指定元素上。Window - 定位弹窗在窗口屏幕的中央。 |
Avec data-role = "listview" de <ol> ou <ul>.
Data-属性 | 值 | 描述 |
---|---|---|
data-autodividers | true | false | 规定是否自动划分列表项 |
data-count-theme | 字母 (a-z) | 规定计数气泡的主题颜色。 |
data-divider-theme | 字母 (a-z) | 规定列表分隔的主题颜色。 |
data-filter | true | false | 规定是否在列表中添加搜索框 |
data-filter-placeholder | sometext | 1.4 版本后废弃。使用 HTML placeholder 属性替代。规定搜索框内的文本。默认是 "Filter itemsfr." |
data-filter-theme | 字母 (a-z) | 规定搜索过滤的主题颜色。 |
data-icon | 图标参考手册 | 规定列表的图标 |
data-inset | true | false | 规定列表是否渲染成圆角且带外边距 |
data-split-icon | 图标参考手册 | 规定分割按钮的图表。默认是 "arrow-r" |
data-split-theme | 字母 (a-z) | 规定分割按钮的主题颜色。 |
data-theme | 字母 (a-z) | 规定列表的主题颜色 |
Avec data-role = "listview" de <ol> ou <ul> dans le <li>.
Data-属性 | 值 | 描述 |
---|---|---|
data-filtertext | sometext | 规定当过滤元素时要搜索的文本。该文本将会被过滤,而不是实际的列表项文本 |
data-icon | 图标参考手册 | 规定列表项图标 |
data-role | list-divider | 规定列表项的分隔 |
data-theme | 字母 (a-z) | 规定列表项的主题颜色 |
Remarque: Les données-icon attribut affecte uniquement l'élément de liste avec un lien.
Avec data-role interne = "navbar" container élément <li>.
Data-属性 | 值 | 描述 |
---|---|---|
data-icon | 图标参考手册 | 规定列表项的图标 |
data-iconpos | left | right | top | bottom | notext | 规定图标的位置 |
Exemple de barre sujets de navigation héritée de leurs parents. L'attribut data-theme barre de navigation définie n'est pas possible. attribut de données-thème peut être réglée individuellement pour chaque lien sur la barre de navigation. |
Data-role = "page" du récipient avec.
Data-属性 | 值 | 描述 |
---|---|---|
data-add-back-btn | true | false | 自动添加后退按钮,仅限头部栏 |
data-back-btn-text | sometext | 规定后退按钮的一些文本 |
data-back-btn-theme | 字母 (a-z) | 规定后退按钮的主题颜色 |
data-close-btn-text | 字母 (a-z) | 规定对话框上关闭按钮的一些文本 |
data-dom-cache | true | false | 规定是否清除各个页面的 jQuery DOM 缓存(如果设置为 true,您必须自己管理 DOM 并在所有移动设备上进行测试) |
data-overlay-theme | 字母 (a-z) | 规定对话框页面的蒙版(背景)颜色 |
data-theme | 字母 (a-z) | 规定页面的主题颜色。 |
data-title | sometext | 规定页面标题 |
data-url | url | 更新 URL 的值,而不是用于请求页面的 URL |
Data-role = "popup" récipient avec.
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)的距离 |
Avec des données-rel = ancre "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 页面切换章节。 |
Avec paires d'étiquettes et input type = "radio" est. Ils sont automatiquement rendent des processus style de bouton, data-role est pas nécessaire.
Data-属性 | 值 | 描述 |
---|---|---|
data-mini | true | false | 规定按钮是小尺寸还是常规尺寸 |
data-role | none | 防止 jQuery Mobile 渲染单选按钮的样式为增强状态的按钮,使元素以 HTML 原生的状态显示 |
data-theme | 字母 (a-z) | 规定单选按钮的主题颜色 |
Pour combiner les boutons radio multiples, utilisez = "controlgroup" et de type de données = attribut avec data-role "horizontal | vertical" récipient pour spécifier si des combinaisons horizontales ou verticales de boutons radio. |
Tout élément <select>. Ceux-ci seront automatiquement rendus style de bouton, la date-rôle est pas nécessaire.
Data-属性 | 值 | 描述 |
---|---|---|
data-icon | 图标参考手册 | 规定 select 元素的图标。默认是 "arrow-d" |
data-iconpos | left | right | top | bottom | notext | 规定图标的位置 |
data-inline | true | false | 规定 select 元素是否内联 |
data-mini | true | false | 规定 select 元素是小尺寸还是常规尺寸 |
data-native-menu | true | false | 当设置为 false 时,它使用 jQuery 自带的自定义的选择菜单(如果您想要让选择菜单在所有的移动设备上都显示相同,则推荐这么使用) |
data-overlay-theme | 字母 (a-z) | 规定 jQuery 自带的自定义的选择菜单的主题颜色(与 data-native-menu="false" 一起使用) |
data-placeholder | true | false | 可在一个非原生的选择菜单的 <option> 元素上设置 |
data-role | none | 防止 jQuery Mobile 把 select 元素渲染成按钮样式 |
data-theme | 字母 (a-z) | 规定 select 元素的主题颜色 |
Pour sélectionner une combinaison de plusieurs éléments, utilisez = "controlgroup" et de type de données = attribut avec data-role "horizontal | vertical" récipient pour spécifier si des combinaisons horizontales ou verticales de certains éléments. |
Avec type = boîte d'entrée "plage". Ceux-ci seront automatiquement rendus style de bouton, la date-rôle est pas nécessaire.
Data-属性 | 值 | 描述 |
---|---|---|
data-highlight | true | false | 规定滑动轨道是否高亮突出显示 |
data-mini | true | false | 规定滑动块是小尺寸还是常规尺寸 |
data-role | none | 防止 jQuery Mobile 渲染滑动块控件为按钮样式 |
data-theme | 字母 (a-z) | 规定滑动块控件(输入框、手柄和轨道)的主题颜色 |
data-track-theme | 字母 (a-z) | 规定滑动块轨道的主题颜色 |
Avec type = "text | recherche |. Etc" l'élément d'entrée ou textarea. Ceux-ci seront automatiquement rendus style de bouton, la date-rôle est pas nécessaire.
Data-属性 | 值 | 描述 |
---|---|---|
data-mini | true | false | 规定输入框是小尺寸还是常规尺寸 |
data-role | none | 防止 jQuery Mobile 把输入框/输入域渲染成按钮样式 |
data-theme | 字母 (a-z) | 规定输入字段的主题颜色 |