Атрибуты данных jQuery Mobile Data

jQuery Data Атрибуты

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

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

Button

Ссылки с атрибутом data-role="button". Элементы кнопки в панели инструментов, ссылки и поля ввода автоматически получают стиль кнопки, без необходимости использования data-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 letter (a-z) Определите тему цвета кнопки.

Совет:Для комбинирования нескольких кнопок используйте контейнер с атрибутами data-role="controlgroup" и data-type="horizontal|vertical", чтобы определить горизонтальное или вертикальное комбинирование кнопок.

Checkbox

Label и input с type="checkbox" являются парными. Будут автоматически установлены в стиль кнопки, без data-role.

Атрибуты данных Data Значение Описание
data-mini true | false Определяет, является ли флажок малым или стандартным размером.
data-role none Предотвращает установку jQuery Mobile флажков в стиль кнопки.
data-theme letter (a-z) Определяет тему цвета флажков.

Совет:Для комбинирования нескольких флажков используйте data-role="controlgroup" и data-type="horizontal|vertical", чтобы определить горизонтальное или вертикальное комбинирование флажков.

Collapsible

Элемент заголовка, за которым следуют любые HTML-маркеры в контейнере с атрибутом data-role="collapsible".

Атрибуты данных Data Значение Описание
data-collapsed true | false Определяет, должно ли содержимое быть закрыто или раскрыто.
data-collapsed-icon Справочник по иконкам Определяет значок кнопки قابل к складыванию. По умолчанию это «plus».
data-content-theme letter (a-z) Определяет тему цвета содержимого قابل к складыванию. Включает в содержимое закругленные углы.
data-expanded-icon Справочник по иконкам Определяет значок кнопки قابل к складыванию при раскрытии содержимого. По умолчанию это «минус».
data-iconpos слева | справа | сверху | снизу Определяет положение иконки.
data-inset true | false Определяет, имеют ли кнопки قابل к складыванию стиль закругленных углов и отступов.
data-mini true | false Определяет, является ли кнопка قابل к складыванию малой или стандартной размеров.
data-theme letter (a-z) Определяет тему цвета кнопки قابل к складыванию.

Collapsible Set

Складывающийся блок содержимого в контейнере с атрибутом data-role="collapsible-set".

Атрибуты данных Data Значение Описание
data-collapsed-icon Справочник по иконкам Определяет значок кнопки قابل к складыванию. По умолчанию это «плюс».
data-content-theme letter (a-z) Определяет тему цвета содержимого قابل к складыванию.
data-expanded-icon Справочник по иконкам Определяет значок кнопки قابل к складыванию при раскрытии содержимого. По умолчанию это «минус».
data-iconpos left | right | top | bottom | notext Определяет положение иконки.
data-inset true | false Определяет, имеют ли collapsibles стиль закругленных углов и отступов.
data-mini true | false Определяет, является ли кнопка قابل к складыванию малой или стандартной размеров.
data-theme letter (a-z) Определяет тему цвета قابل к складыванию.

Content

Контейнер с атрибутом data-role="content".

Атрибуты данных Data Значение Описание
data-theme letter (a-z) Определяет тему цвета содержимого. По умолчанию это "c".

Controlgroup

Контейнер <div> или <fieldset> с атрибутом data-role="controlgroup". Комбинирует несколько кнопочных стилей единственного типа input (на основе ссылок, радио-кнопок, флажков, выборных меню).

Атрибуты данных Data Значение Описание
data-mini true | false Определяет, является ли комбинация малой или стандартной размеров.
data-type горизонтальный | вертикальный Определяет组合的水平或垂直 отображение.

Диалог

Контейнер с атрибутом data-role="dialog" или ссылка с атрибутом data-rel="dialog".

Атрибуты данных Data Значение Описание
data-close-btn-text sometext Определяет текст кнопки закрытия, используемой только в диалогах.
data-dom-cache true | false Определяет, очищается ли jQuery DOM кэш для отдельных страниц (если установлено в true, то необходимо учитывать управление DOM и进行全面 тестирование на всех мобильных устройствах).
data-overlay-theme letter (a-z) Определите叠加 (фоновый) цвет диалоговой страницы.
data-theme letter (a-z) Определяет тему цвета диалоговой страницы.
data-title sometext Определяет заголовок диалоговой страницы.

Enhancement

Контейнер с атрибутами data-enhance="false" или data-ajax="false".

Атрибуты данных Data Значение Описание
data-enhance true | false Если установлено в "true" (по умолчанию), jQuery Mobile автоматически добавляет стили к странице, чтобы сделать ее更适合 мобильных устройств. Если установлено в "false", фреймворк не устанавливает стили страницы.
data-ajax true | false Определяет, загружается ли страница через AJAX.

Комментарий:data-enhance="false", например, в сочетании с $.mobile.ignoreContentEnabled=true, чтобы предотвратить автоматическое добавление стилей страницы jQuery Mobile.

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

Fieldcontainer

Контейнер для пар label/form с атрибутом data-role="fieldcontain".

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

Контейнер с атрибутами data-role="header" или data-role="footer" и атрибутом 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 Определяет видимость панели инструментов при отображении родительской страницы.

Переключатель с разворотом

Элемент <select> с attribute data-role="slider" и двумя элементами <option>.

Атрибуты данных Data Значение Описание
data-mini true | false Определяет, является ли переключатель малым или стандартным размером.
data-role none Предотвращает установку стиля кнопки для переключателя jQuery Mobile.
data-theme letter (a-z) Определяет тему цвета переключателя.
data-track-theme letter (a-z) Определяет тему цвета полосы.

Подзаголовок

Контейнер с attribute data-role="footer".

Атрибуты данных Data Значение Описание
data-id sometext Определяет уникальный ID. Обязателен для постоянных подзаголовков.
data-position inline | fixed Определяет, является ли подзаголовок вlined с содержимым страницы или остается в нижней части.
data-fullscreen true | false Определяет, всегда ли страница находится в нижней части и покрывает содержимое страницы (незначительно прозрачное).
data-theme letter (a-z) Определяет тему цвета подзаголовка страницы. По умолчанию это "a".

Комментарий:Для включения позиционирования на весь экран используйте data-position="fixed", затем добавьте attribute data-fullscreen к этому элементу.

Заголовок

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

Атрибуты данных Data Значение Описание
data-id sometext Определяет уникальный ID. Обязателен для постоянных заголовков.
data-position inline | fixed Определяет, является ли заголовок вlined с содержимым страницы или остается в верхней части.
data-fullscreen true | false Определяет, всегда ли страница находится в верхней части и покрывает содержимое страницы (незначительно прозрачное).
data-theme letter (a-z) Определяет тему цвета заголовка страницы. По умолчанию это "a".

Комментарий:Для включения позиционирования на весь экран используйте data-position="fixed", затем добавьте attribute data-fullscreen к этому элементу.

Ссылка

Все ссылки, включая ссылки с data-role="button" и кнопки отправки форм.

Атрибуты данных 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 Назад | Диалог | Внешний | Всплывающее Определяет опции поведения ссылок. Назад - вернуться на один шаг назад в истории. Диалог - открыть страницу как диалог, не записывать в историю. Внешний - ссылка на другой домен. Открывать - открывать всплывающее окно.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Определите, как перейти от одной страницы к следующей. Участвуйте в jQuery Mobile transitions.
data-position-to origin | jQuery selector | window Определите положение всплывающего окна. Оригинал - по умолчанию. Выполните弹出操作 в ссылке. jQuery selector - появляется на указанном элементе. Окно - появляется в центре экрана окна.

Список

Элемент <ol> или <ul> с атрибутом data-role="listview".

Атрибуты данных Data Значение Описание
data-autodividers true | false Определяет, автоматически ли разделять элементы списка.
data-count-theme letter (a-z) Определяет цвет темы мыльных пузырей счёта. По умолчанию это "c".
data-divider-theme letter (a-z) Определяет цвет темы разделителя списка. По умолчанию это "b".
data-filter true | false Определяет, добавлять ли в список поле поиска.
data-filter-placeholder sometext Определяет текст в поле поиска. По умолчанию это "Filter items...".
data-filter-theme letter (a-z) Определяет цвет темы программы поиска. По умолчанию это "c".
data-icon Справочник по иконкам Определяет значок списка.
data-inset true | false Определяет, добавлять ли списку закругленные углы и отступы.
data-split-icon Справочник по иконкам Определяет значок кнопки разделения. По умолчанию это "arrow-r".
data-split-theme letter (a-z) Определяет цвет темы кнопки разделения. По умолчанию это "b".
data-theme letter (a-z) Определяет цвет темы списка.

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

Элемент <li> в <ol> или <ul> с атрибутом data-role="listview".

Атрибуты данных Data Значение Описание
data-filtertext sometext Определяет текст для поиска при фильтрации элементов. Этот текст, а не текст реального элемента списка, будет搜索.
data-icon Справочник по иконкам Определяет значок элемента списка.
data-role list-divider Определяет разделитель элемента списка.
data-theme letter (a-z) Определяет цвет темы элемента списка.

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

Меню навигации

Элемент <li> внутри контейнера с атрибутом data-role="navbar".

Атрибуты данных Data Значение Описание
data-icon Справочник по иконкам Определяет значок элемента списка.
data-iconpos left | right | top | bottom | notext Определяет положение иконки.

Совет:Меню навигации наследует theme-swatch от родительского контейнера. Нельзя установить атрибут data-theme для меню навигации. можно установить атрибут data-theme для каждого элемента ссылки в navbar.

Страница

Контейнер с атрибутом data-role="page".

Атрибуты данных Data Значение Описание
data-add-back-btn true | false Автоматически добавляет кнопку назад, используется только в заголовке страницы.
data-back-btn-text sometext Определяет текст кнопки назад.
data-back-btn-theme letter (a-z) Определяет цвет темы кнопки назад.
data-close-btn-text letter (a-z) Определяет текст кнопки закрытия на диалоге.
data-dom-cache true | false Определите, нужно ли очищать кэш jQuery DOM для отдельных страниц (если установлено в true, обратите внимание на управление DOM и проведите полное тестирование всех мобильных устройств).
data-overlay-theme letter (a-z) Определите叠加 (фоновый) цвет диалоговой страницы.
data-theme letter (a-z) Определите тему цвета страницы. По умолчанию это "c".
data-title sometext Определите标题 страницы.
data-url url Эта величина используется для обновления URL, а не для запроса страницы.

Popup

Контейнер с атрибутом data-role="popup":

Атрибуты данных Data Значение Описание
data-corners true | false Определите, есть ли у всплывающего окна скругленные углы.
data-overlay-theme letter (a-z) Определите叠加 (фоновый) цвет всплывающего окна. По умолчанию это прозрачный фон (none).
data-shadow true | false Определите, есть ли тень у всплывающего окна.
data-theme letter (a-z) Определите тему цвета всплывающего окна. По умолчанию это inheritance, "none" устанавливается в прозрачный.
data-tolerance 30, 15, 30, 15 Определите расстояние до края окна (top, right, bottom, left).

Якорь с атрибутом 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 transitions.

Radio Button

label и input с type="radio" будут автоматически установлены в стиль кнопки, без need data-role.

Атрибуты данных Data Значение Описание
data-mini true | false Определите, являются ли кнопки мелкими или стандартного размера.
data-role none Поставьте переключатели в стиль enhanced buttons, используя jQuery Mobile.
data-theme letter (a-z) Определите тему цвета переключателей.

Совет:Чтобы комбинировать несколько одиночных переключателей, используйте data-role="controlgroup" и data-type="horizontal|vertical", чтобы определить горизонтальное или вертикальное комбинирование кнопок.

Select

Все элементы <select>. Будут автоматически применены стили кнопки, и не требует date-role.

Атрибуты данных 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 (рекомендуется использовать, если вы хотите, чтобы меню выбора имело одинаковое внешнее appearance на всех мобильных устройствах).
data-overlay-theme letter (a-z) Определяет тему цвета для пользовательского меню выбора jQuery (вместе с data-native-menu="false").
data-placeholder true | false Может быть применен к элементу <option> нестандартного select.
data-role none Применяет стиль кнопки для элемента select, когда jQuery Mobile используется.
data-theme letter (a-z) Определяет тему цвета для элемента select.

Совет:Для комбинирования нескольких элементов select используйте data-role="controlgroup" и data-type="horizontal|vertical", чтобы определить, будет ли элемент комбинироваться горизонтально или вертикально.

Slider

Элемент input с атрибутом type="range" будет автоматически применен стиль кнопки, и не требует data-role.

Атрибуты данных Data Значение Описание
data-highlight true | false Определяет, должен ли быть выделен ползунок.
data-mini true | false Определяет, является ли ползунок малым или стандартным размером.
data-role none Применяет стиль кнопки для кнопки ползунка, когда jQuery Mobile используется.
data-theme letter (a-z) Определяет тему цвета для контроллера ползунка (input, handle и track).
data-track-theme letter (a-z) Определяет тему цвета для дорожки ползунка.

Ввод текста и Textarea

Элемент input или textarea с атрибутом type="text|search|etc." будет автоматически применен стиль, и не требует data-role.

Атрибуты данных Data Значение Описание
data-mini true | false Определяет,是小型的 или стандартного размера элемент input.
data-role none Устанавливает стиль кнопки для input/textarea, на котором установлен jQuery Mobile.
data-theme letter (a-z) Определяет тему цвета поля ввода.