Атрибуты данных

Справочник по атрибутам данных

Фреймворк jQuery Mobile использует атрибуты HTML5 data- для инициализации и настройки виджетов на основе разметки. Эти атрибуты полностью необязательны; также поддерживается ручная вызов плагинов и прямое указание параметров. Чтобы избежать конфликтов имён с другими плагинами или фреймворками, которые также используют атрибуты data-, задайте пользовательский префикс, изменив глобальный параметр ns.

Кнопка

Ссылки с data-role="button". Кнопки на основе input, ссылки в панелях инструментов и элементы кнопок автоматически улучшаются, data-role не требуется.

data-corners	true \| false
data-icon	home \| delete \| plus \| arrow-u \| arrow-d \| carat-l \| carat-t \| carat-r \| carat-b \| check \| gear \| grid \| star \| custom \| arrow-r \| arrow-l \| minus \| refresh \| forward \| back \| alert \| info \| search
data-iconpos	left \| right \| top \| bottom \| notext
data-iconshadow	true \| false Устарело начиная с 1.4.0 и будет удалено в 1.5.0.
data-inline	true \| false
data-mini	true \| false - версия компактного размера
data-shadow	true \| false
data-theme	буква-цветовая схема (a-z)

Флажок

Пары меток и input с type="checkbox" автоматически улучшаются, data-role не требуется

data-mini	true \| false - версия компактного размера
data-role	none - Предотвращает автоматическое улучшение для использования нативного элемента управления
data-theme	буква-цветовая схема (a-z) - Добавляется к элементу формы

Раскрывающийся элемент

Заголовок и содержимое, заключенные в контейнер с data-role="collapsible"

data-collapsed	true \| false
data-collapse-cue-text	строка - Текст, используемый для предоставления звуковой обратной связи пользователям с программным обеспечением для чтения с экрана. По умолчанию: «Нажмите, чтобы свернуть содержимое»
data-collapsed-icon	home \| delete \| plus \| arrow-u \| arrow-d \| carat-l \| carat-t \| carat-r \| carat-b \| check \| gear \| grid \| star \| custom \| arrow-r \| arrow-l \| minus \| refresh \| forward \| back \| alert \| info \| search \| false
data-content-theme	буква-цветовая схема (a-z)
data-expand-cue-text	строка - Текст, используемый для предоставления звуковой обратной связи пользователям с программным обеспечением для чтения с экрана. По умолчанию: «Нажмите, чтобы развернуть содержимое»
data-expanded-icon	home \| delete \| plus \| arrow-u \| arrow-d \| carat-l \| carat-t \| carat-r \| carat-b\| check \| gear \| grid \| star \| custom \| arrow-r \| arrow-l \| minus \| refresh \| forward \| back \| alert \| info \| search
data-iconpos	left \| right \| top \| bottom
data-inset	true \| false
data-mini	true \| false - версия компактного размера
data-theme	буква-цветовая схема (a-z)

Набор раскрывающихся элементов

Несколько раскрывающихся элементов, заключенных в контейнер с data-role="collapsibleset"

data-collapsed-icon	home \| delete \| plus \| arrow-u \| arrow-d \| carat-l \| carat-t \| carat-r \| carat-b\| check \| gear \| grid \| star \| custom \| arrow-r \| arrow-l \| minus \| refresh \| forward \| back \| alert \| info \| search
data-content-theme	буква-цветовая схема (a-z) - Устанавливает тему для всех раскрывающихся элементов в наборе
data-expanded-icon	home \| delete \| plus \| arrow-u \| arrow-d \| carat-l \| carat-t \| carat-r \| carat-b\| check \| gear \| grid \| star \| custom \| arrow-r \| arrow-l \| minus \| refresh \| forward \| back \| alert \| info \| search
data-iconpos	left \| right \| top \| bottom \| notext
data-inset	true \| false
data-mini	true \| false - версия компактного размера
data-theme	буква-цветовая схема (a-z) - Устанавливает тему для всех раскрывающихся элементов в наборе

Содержимое

Примечание: Устарело начиная с 1.4.0 и будет удалено в 1.5.0.

Контейнер с data-role="content"

data-theme	буква-цветовая схема (a-z)

Группа элементов управления

Контейнер DIV или FIELDSET с data-role="controlgroup". Визуальное объединение нескольких элементов в стиле кнопок.

data-exclude-invisible	true \| false - Указывает, следует ли исключать невидимых потомков при назначении скругленных углов
data-mini	true \| false - версия компактного размера для всех элементов в controlgroup
data-theme	буква-цветовая схема (a-z)
data-type	horizontal \| vertical - Для горизонтального или вертикального выравнивания элементов

Диалоговое окно

Контейнер с data-role="dialog" или связанный с ним с помощью data-rel="dialog" на якоре.

data-close-btn	left \| right \| none
data-close-btn-text	строка - Текст кнопки закрытия, только для диалоговых окон. По умолчанию: «Закрыть»
data-corners	true \| false
data-dom-cache	true \| false
data-overlay-theme	буква-цветовая схема (a-z) - Тема наложения при открытии страницы в диалоговом окне
data-theme	буква-цветовая схема (a-z)
data-title	строка - Заголовок, используемый при отображении страницы

Улучшение

Контейнер с data-enhance="false" или data-ajax="false"

data-enhance	true \| false
data-ajax	true \| false

Любые элементы DOM внутри контейнера data-enhance="false", за исключением элементов data-role="page|dialog", будут проигнорированы во время начального улучшения и последующих событий create, при условии, что флаг $.mobile.ignoreContentEnabled установлен до улучшения (например, в привязке mobileinit).

Любые ссылки или элементы форм внутри контейнеров data-ajax="false" будут проигнорированы функциональностью навигации фреймворка, когда $.mobile.ignoreContentEnabled установлено в значение true.

Контейнер поля

Контейнер с data-role="fieldcontain" вокруг пары метка/элемент формы

Примечание: data-role="fieldcontain" устарело начиная с jQuery Mobile 1.4.0 и будет удалено в 1.5.0. Используйте класс ui-field-contain вместо этого.

Переключатель-флип-флоп

Выпадающий список с data-role="slider" и двумя элементами option

data-mini	true \| false - версия компактного размера
data-role	none - Предотвращает автоматическое улучшение для использования нативного элемента управления
data-theme	буква-цветовая схема (a-z) - Добавляется к элементу формы
data-track-theme	буква-цветовая схема (a-z) - Добавляется к элементу формы

Ссылка

Ссылки, включая те, у которых есть data-role="button", и кнопки отправки формы, используют эти атрибуты

data-ajax	true \| false
data-direction	reverse - Обратный переход анимации (только для страницы или диалогового окна)
data-dom-cache	true \| false
data-prefetch	true \| false
data-rel	back - Для перемещения на один шаг назад в истории dialog - Для открытия ссылки в стиле диалогового окна, не отслеживается в истории external - Для ссылки на другой домен popup - Для открытия всплывающего окна
data-transition	fade \| flip \| flow \| pop \| slide \| slidedown \| slidefade \| slideup \| turn \| none
data-position-to	origin - Центрирует всплывающее окно над ссылкой, которая его открывает селектор jQuery - Центрирует всплывающее окно над указанным элементом window - Центрирует всплывающее окно в окне Примечание: опция доступна только при использовании со всплывающими окнами. См. также: параметры.

Список

OL или UL с data-role="listview"

data-autodividers	true \| false
data-count-theme	буква-цветовая схема (a-z) - По умолчанию "null", унаследованное от родителя Устарело начиная с 1.4.0 и будет удалено в 1.5.0.
data-divider-theme	буква-цветовая схема (a-z) - По умолчанию "null", унаследованное от родителя
data-filter	true \| false
data-filter-placeholder	строка
data-filter-theme	буква-цветовая схема (a-z)
data-header-theme	буква-цветовая схема (a-z)
data-icon	home \| delete \| plus \| arrow-u \| arrow-d \| carat-l \| carat-t \| carat-r \| carat-b\| check \| gear \| grid \| star \| custom \| arrow-r \| arrow-l \| minus \| refresh \| forward \| back \| alert \| info \| search \| false
data-inset	true \| false
data-split-icon	home \| delete \| plus \| arrow-u \| arrow-d \| carat-l \| carat-t \| carat-r \| carat-b\| check \| gear \| grid \| star \| custom \| arrow-r \| arrow-l \| minus \| refresh \| forward \| back \| alert \| info \| search
data-split-theme	буква-цветовая схема (a-z) - По умолчанию "null", унаследованное от родителя
data-theme	буква-цветовая схема (a-z)

Элемент списка

LI в списке

data-filtertext	строка - Фильтр по этому значению вместо внутреннего текста
data-icon	home \| delete \| plus \| arrow-u \| arrow-d \| carat-l \| carat-t \| carat-r \| carat-b\| check \| gear \| grid \| star \| custom \| arrow-r \| arrow-l \| minus \| refresh \| forward \| back \| alert \| info \| search \| false
data-role	list-divider
data-theme	буква-цветовая схема (a-z)

Атрибут data-icon применим только для элемента списка, если он содержит ссылку.

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

Несколько LI в контейнере с data-role="navbar"

data-iconpos	left \| right \| top \| bottom \| notext

Для добавления иконок в пункты навигационной панели используется атрибут data-icon, указывающий стандартную мобильную иконку для каждого пункта.

Навигационные панели наследуют тему оформления (theme-swatch) от своего родительского контейнера. Установка атрибута data-theme для навигационной панели не поддерживается. Атрибут data-theme может быть установлен индивидуально для ссылок внутри навигационной панели.

Страница

Контейнер с data-role="page"

data-dom-cache	true \| false
data-overlay-theme	буква темы (a-z) - Тема оформления оверлея, когда страница открыта как диалог
data-theme	буква темы (a-z) - По умолчанию "a"
data-title	строка - Заголовок, используемый при отображении страницы
data-url	url - Значение для обновления URL вместо URL, используемого для запроса страницы. Значение этого атрибута не должно быть закодировано в URI. Если ваш путь или имя файла содержат апострофы или кавычки, используйте кодировку символов в значении, а не URL-кодировку. Например, `data-url="/path/to/"Devil's Advocate".html"`

Поп-ап

Контейнер с data-role="popup"

data-corners	true \| false
data-dismissible	true \| false - Если установлено в false, предотвращает закрытие всплывающего окна щелчком вне всплывающего окна или нажатием клавиши Escape
data-history	true \| false - Устанавливает, создает ли всплывающее окно элемент истории браузера при открытии. Если установлено в false, элемент истории не создается, и всплывающее окно не будет закрываться кнопкой «Назад» браузера.
data-overlay-theme	буква темы (a-z) - По умолчанию "null" (прозрачный фон)
data-position-to	origin \| window \| селектор - «origin» указывает, что всплывающее окно должно быть центрировано над ссылкой, которая его открывает. «window» указывает, что оно должно быть центрировано в окне браузера. Если вы зададите jQuery-селектор, он будет центрирован над первым элементом, возвращенным селектором, если этот элемент виден. В противном случае он будет центрирован в окне браузера.
data-shadow	true \| false
data-theme	буква темы (a-z) \| none - По умолчанию наследуется, «none» устанавливает всплывающее окно прозрачным
data-tolerance	30,15,30,15 - Расстояние от краев окна (верх, правая, низ, левая)
data-transition	none \| переход - Переход, используемый при появлении/исчезновении всплывающего окна.

Якорная ссылка с data-rel="popup" открывает всплывающее окно

data-position-to	origin - Центрирует всплывающее окно над ссылкой, которая его открывает jQuery селектор - Центрирует всплывающее окно над указанным элементом window - Центрирует всплывающее окно в окне
data-rel	popup - Для открытия всплывающего окна
data-transition	fade \| flip \| flow \| pop \| slide \| slidedown \| slidefade \| slideup \| turn \| none - Переход, используемый при показе/скрытии всплывающего окна

Радиокнопка

Пары меток и элементов ввода с type="radio" автоматически улучшаются, data-role не требуется

data-mini	true \| false - Компактная версия
data-role	none - Препятствует автоматическому улучшению для использования родного элемента управления
data-theme	буква темы (a-z) - Добавляется к элементу формы

Selectmenu

Все select элементы формы автоматически улучшаются, data-role не требуется

data-divider-theme	буква темы (a-z) - По умолчанию "b" - Применимо только в том случае, если поддерживается `optgroup` для неродных элементов выбора
data-icon	home \| delete \| plus \| arrow-u \| arrow-d \| carat-l \| carat-t \| carat-r \| carat-b \| check \| gear \| grid \| star \| custom \| arrow-r \| arrow-l \| minus \| refresh \| forward \| back \| alert \| info \| search \| false
data-iconpos	left \| right \| top \| bottom \| notext
data-inline	true \| false
data-mini	true \| false - Компактная версия
data-native-menu	true \| false
data-overlay-theme	буква темы (a-z) - Тема оформления оверлея для неродных элементов выбора
data-placeholder	true \| false - Может быть установлено на элементе `option` неродного элемента выбора
data-role	none - Препятствует автоматическому улучшению для использования родного элемента управления
data-theme	буква темы (a-z) - Добавляется к элементу формы

Ползунок

Элементы ввода с type="range" автоматически улучшаются, data-role не требуется

data-highlight	true \| false - Добавляет заполнение активного состояния по полосе для обработки
data-mini	true \| false - Компактная версия
data-role	none - Препятствует автоматическому улучшению для использования родного элемента управления
data-theme	буква темы (a-z) - Добавляется к элементу формы
data-track-theme	буква темы (a-z) - Добавляется к элементу формы

Текстовое поле

Элементы ввода type="text|number|search|etc." или textarea автоматически улучшаются, data-role не требуется

data-clear-btn	true \| false - Добавляет кнопку очистки
data-clear-btn-text	строка - Текст для кнопки закрытия. По умолчанию: "очистить текст"
data-mini	true \| false - Компактная версия
data-role	none - Препятствует автоматическому улучшению для использования родного элемента управления
data-theme	буква темы (a-z) - Добавляется к элементу формы

Панель инструментов

Контейнер с data-role="header" или data-role="footer"

data-add-back-btn	true \| false - Автоматически добавляет кнопку «Назад», только для заголовка
data-back-btn-text	строка - Только для заголовка
data-back-btn-theme	буква темы (a-z) - Только для заголовка
data-id	строка - Уникальный идентификатор. Требуется для постоянных подвалов
data-position	fixed
data-theme	буква темы (a-z)

Фиксированная панель инструментов

Контейнер с data-role="header" или data-role="footer" плюс атрибут data-position="fixed"

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 - Обновление отступов сверху и снизу страницы при изменении размера, переходе, событиях «updatelayout» (фреймворк всегда обновляет отступы при событии «pageshow»).
data-visible-on-page-show	true \| false - Видимость панели инструментов при отображении родительской страницы

© The jQuery Foundation and other contributors
Licensed under the MIT License.
https://api.jquerymobile.com/data-attribute