Latest web development tutorials

Особенности JQuery Mobile Data

Свойства Jquery данных

JQuery Mobile с помощью HTML5 data- * атрибутов для создания более приятной на ощупь внешний вид и привлекательность для мобильных устройств.

Заданное значение в следующем списке выделены жирным шрифтом значения по умолчанию.

кнопка

После версии 1.4 является устаревшим. Используйте класс CSS вместо этого. Гиперссылка с данными-роли "кнопки" из =. Кнопка на панели инструментов элемент ссылки и поля ввода автоматически создает стиль кнопки, вам не нужно, чтобы добавить "кнопку" данных-роль =.

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) 规定按钮的主题颜色

лампа Для комбинации из множества кнопок, используйте = "controlgroup" и данные типа = атрибут с данными роли "горизонтальной | вертикальной" контейнера указать, следует ли горизонтальные или вертикальные комбинации кнопок.

флажок

С парами метки и ввода типа = "флажок" из. Они автоматически рендеринга кнопки процесс стиля, данных роли не требуется.

Data-属性 值 描述
data-mini true | false 规定复选框是小尺寸还是常规尺寸
data-role none 防止 jQuery Mobile 把复选框渲染成按钮样式
data-theme 字母 (a-z) 规定复选框的主题颜色

лампа Чтобы объединить несколько флажков, используйте = "controlgroup" и данные типа = атрибут с данными роли "горизонтальной | вертикальной" контейнер для указания горизонтальных или вертикальных комбинаций флажок ли.

Складывающиеся в случае столкновения блок

Во внутренней части контейнера с последующим любым HTML с данными-роли = "разборные" обозначает элемент заголовка.

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) 规定可折叠按钮的主题颜色

Складная коллекция

Внутри контейнера с данными роли = "складного-набор " складного содержимого блока.

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) 规定可折叠集合的主题颜色

содержание

В версии 1.4 не был оставлен без присмотра после версии 1.5 больше не поддерживается. Использование данных-роли = "содержание" контейнера.

Данные- недвижимость значение описание
данных темы Письма (аз) Положения, касающиеся содержания цвета.

Контрольная группа

С помощью данных-роли = "controlgroup" в <div> или контейнер <FIELDSET>. Сочетание одного типа (ссылка на основе кнопок, переключателей, флажки выбора элементов) из множества кнопок ввода стиля. Для комбинации образуют галочки и радио-кнопки, мы рекомендуем <FIELDSET> в контейнере с данными-роли = "fieldcontain" тега <div> внутри, чтобы улучшить стиль.

Data-属性 值 描述
data-mini true | false 规定控件组是小尺寸还是常规尺寸
data-type horizontal | vertical 规定控件组是水平显示还是垂直显示

диалог

Контейнер или с данными отн = "Диалог" связь с данными-роли = "диалог" есть.

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 规定对话框页面的标题

увеличить

С-Enhance данных = "ложных" или данных АЯКС = "ложных" контейнеров.

Data-属性 值 描述
data-enhance true | false 如果设置为 "true"（默认），jQuery Mobile 会自动渲染页面，使其更适合于移动设备。如果设置为 "false"，框架将不会渲染页面
data-ajax true | false 规定是否通过 ajax 加载页面

Примечание: данные, повышения = "ложь" должно быть $ .mobile.ignoreContentEnabled = истина "используются вместе , чтобы предотвратить JQuery Mobile автоматически отобразить страницу.

Когда $ .mobile.ignoreContentEnabled установлен истинный, = "ложных" звенья или элементы формы внутри контейнера будет проигнорирован навигационной базы данных-Ajax.

контейнер домена

1.4 версия была оставлена после версии 1.5 больше не поддерживается, не будет использовать класс = "UI-fieldcontain альтернативный." Завернутая в пар элементов этикетки / формы и данных-роли = "fieldcontain" контейнер с.

закрепленную панель

С помощью данных-роли = "заголовок" или данных роли = "колонтитула", а также данные положении = "фиксированный" с контейнерными свойствами.

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 规定当父页面显示时工具栏的可见性

Флип тумблер

Дата-роль = "слайдер" с элементом <SELECT> с двумя элемента <опция>.

Data-属性 值 描述
data-mini true | false 规定开关是小尺寸还是常规尺寸
data-role none 防止 jQuery Mobile 把拨动开关渲染成按钮样式
data-theme 字母 (a-z) 规定拨动开关的主题颜色
data-track-theme 字母 (a-z) 规定轨道的主题颜色

Хвост-бар

Данных роли = "сноска" контейнер с.

Data-属性 值 描述
data-id sometext 规定唯一 ID。对于持续的尾部栏是必需的
data-position inline | fixed 规定尾部栏是与页面内容内联还是保持固定在底部
data-fullscreen true | false 规定尾部栏是固定在底部还是覆盖在页面内容上（查看范围更大）
data-theme 字母 (a-z) 规定尾部栏的主题颜色。默认是 "a"

Примечание: Для включения позиционирования полноэкранное, использовать данные-позицию = "фиксированный", а затем добавить атрибут данных полноэкранных к элементу.

Голова Бар

Данные-роли = "заголовок" контейнера с.

Data-属性 值 描述
data-id sometext 规定唯一 ID。对于持续的头部栏是必需的
data-position inline | fixed 规定头部栏是与页面内容内联还是保持固定在顶部
data-fullscreen true | false 规定头部栏是固定在顶部还是覆盖在页面内容上（查看范围更大）
data-theme 字母 (a-z) 规定头部栏的主题颜色。默认是 "a"

Примечание: Для включения позиционирования полноэкранное, использовать данные-позицию = "фиксированный", а затем добавить атрибут данных полноэкранных к элементу.

ссылка

Все ссылки, в том числе ссылки и формы с данными-роли = "Кнопка" кнопку отправки.

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 - 定位弹窗在窗口屏幕的中央。

список

С помощью данных-роли = "списке следует " из <ол> или <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 items..."
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) 规定列表的主题颜色

элементы списка

С помощью данных-роли = "списке следует " из <ол> или <UL> внутри <li>.

Data-属性 值 描述
data-filtertext sometext 规定当过滤元素时要搜索的文本。该文本将会被过滤，而不是实际的列表项文本
data-icon 图标参考手册 规定列表项图标
data-role list-divider 规定列表项的分隔
data-theme 字母 (a-z) 规定列表项的主题颜色

Примечание: атрибут-значок данных влияет только на элемент списка со ссылкой.

Панель навигации

С внутренней данных-роли = "NavBar" <li> элемент контейнера.

Data-属性 值 描述
data-icon 图标参考手册 规定列表项的图标
data-iconpos left | right | top | bottom | notext 规定图标的位置

лампа Пример темы Панель навигации в наследство от своих родителей. Комплект навигационной панели атрибутов данных тема не представляется возможным. Атрибут данных темы могут быть установлены индивидуально для каждой ссылки на панели навигации.

страница

Data-роль = "страница" контейнера с.

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-属性 值 描述
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）的距离

С помощью данных отн = "всплывающим" якоря:

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 页面切换章节。

кнопка радио

С парами метки и типа входного = "радио" есть. Они автоматически рендеринга кнопки процесс стиля, данных роли не требуется.

Data-属性 值 描述
data-mini true | false 规定按钮是小尺寸还是常规尺寸
data-role none 防止 jQuery Mobile 渲染单选按钮的样式为增强状态的按钮，使元素以 HTML 原生的状态显示
data-theme 字母 (a-z) 规定单选按钮的主题颜色

лампа Чтобы объединить несколько радио-кнопки, используйте = "controlgroup" и данные типа = атрибут с данными роли "горизонтальной | вертикальной" контейнера указать, следует ли горизонтальные или вертикальные комбинации переключателей.

выбрать

Все <выберите> элемент. Они будут автоматически отображается стиль кнопки, дата-роль не требуется.

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 元素的主题颜色

лампа Чтобы выбрать комбинацию из нескольких элементов, используйте = "controlgroup" и данные типа = атрибут с данными роли "горизонтальной | вертикальной" контейнера указать, следует ли горизонтальные или вертикальные комбинации отдельных элементов.

ползунок

При типе = поле ввода "Диапазон". Они будут автоматически отображается стиль кнопки, дата-роль не требуется.

Data-属性 值 描述
data-highlight true | false 规定滑动轨道是否高亮突出显示
data-mini true | false 规定滑动块是小尺寸还是常规尺寸
data-role none 防止 jQuery Mobile 渲染滑动块控件为按钮样式
data-theme 字母 (a-z) 规定滑动块控件（输入框、手柄和轨道）的主题颜色
data-track-theme 字母 (a-z) 规定滑动块轨道的主题颜色

Текстовое поле ввода и поле ввода текста

С помощью типа = "текст | поиск |. Etc" элемента ввода или текстовое поле. Они будут автоматически отображается стиль кнопки, дата-роль не требуется.

Data-属性 值 描述
data-mini true | false 规定输入框是小尺寸还是常规尺寸
data-role none 防止 jQuery Mobile 把输入框/输入域渲染成按钮样式
data-theme 字母 (a-z) 规定输入字段的主题颜色