Jquery selector attribute data: html — Selecting element by data attribute with jQuery

Leave a Comment / Разное / By /

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

« Предыдущая

Следующая глава »

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

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

Для приведенного ниже списка ссылок полужирное значение определяет значение по умолчанию.

Кнопка

Устарело в версии 1.4. Использовать Вместо этого используйте классы CSS. Гиперссылки с data-role=»button». Кнопочные элементы и ссылки в панели инструментов и поля ввода автоматически оформляются как кнопки, нет необходимости роль данных = «кнопка».

Атрибут данных Значение Описание
данные уголки правда | ложь Указывает, должны ли кнопки иметь закругленные углы или нет
значок данных Иконки Артикул Задает значок кнопки. По умолчанию значок отсутствует
значок данных слева
| право | топ | дно | неттекст		 Указывает положение значка
data-iconshadow правда | ложь Указывает, должен ли значок кнопки иметь тень или нет
встроенные данные правда | ложь Указывает, должна ли кнопка быть встроенной или нет
дата-мини правда | ложь Указывает, должна ли кнопка быть маленького или обычного размера
тень данных правда | ложь Указывает, должна ли кнопка иметь тени
тема данных буква (a-z) Указывает цвет темы кнопки

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

Флажок

Пары меток и входных данных с type=»checkbox».

Атрибут данных Значение Описание
дата-мини правда | ложь Указывает, должен ли флажок быть маленького или обычного размера.
роль данных нет Запрещает jQuery Mobile стилизовать флажки как кнопки
тема данных буква (a-z) Указывает цвет темы флажка

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

Collapsible

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

Атрибут данных Значение Описание
данные свернуты правда | ложь Указывает, должно ли содержимое быть закрытым или развернутым
свернутый текст данных текст Указывает некоторый текст для обеспечения звуковой обратной связи для пользователей с программой чтения с экрана. программное обеспечение. По умолчанию «нажмите, чтобы свернуть содержимое».
значок свернутого данных Иконки Артикул Указывает значок сворачиваемой кнопки. По умолчанию «плюс»
тема содержания данных буква (a-z) Указывает цвет темы сворачиваемого содержимого. Также добавлю округлый уголки к складному содержимому
расширенный текст данных какой-то текст  Указывает некоторый текст для обеспечения звуковой обратной связи для пользователей с программой чтения с экрана. программное обеспечение. По умолчанию «щелкните, чтобы развернуть содержимое».
данные-развернутый значок Иконки Артикул Указывает значок сворачиваемой кнопки при раскрытии содержимого. По умолчанию «минус»
значок данных слева | право | топ | дно Указывает положение значка
вставка данных правда | ложь Указывает, должна ли складная кнопка иметь закругленный стиль. углы и какой-то запас или нет
дата-мини правда | ложь Указывает, должны ли складные кнопки быть маленького или обычного размера.
тема данных буква (a-z) Задает цвет темы для складной кнопки

Складной набор

Сворачиваемые блоки контента внутри контейнера с data-role=»collapsibleset».

Атрибут данных Значение Описание
значок свернутого данных Иконки Артикул Указывает значок сворачиваемой кнопки. По умолчанию «плюс»
тема содержания данных буква (a-z) Указывает цвет темы сворачиваемого содержимого
данные-развернутый значок Иконки Артикул Указывает значок сворачиваемой кнопки при раскрытии содержимого. По умолчанию «минус»
значок данных слева
| право | топ | дно | неттекст		 Указывает положение значка
вставка данных правда | ложь Указывает, должны ли складные элементы иметь закругленный стиль. углы и какой-то запас или нет
дата-мини правда | ложь Указывает, должны ли складные кнопки быть маленького или обычного размера.
тема данных буква (a-z) Определяет цвет темы складного набора

Содержимое

Устарело в версии 1.4 и будет удалено в 1.5. Контейнер с data-role=»content».

Атрибут данных Значение Описание
тема данных буква (a-z) Указывает цвет темы содержимого

Controlgroup

Контейнер

или
с data-role=»controlgroup». Группирует несколько элементов ввода в виде кнопок одного типа (кнопки на основе ссылок, переключатели, флажки, выберите элементы). Для группировки флажков и радиокнопок формы Рекомендуется использовать контейнер
внутри
с параметром «ui-fieldcontain». сорт, для улучшения стиля этикетки.

Атрибут данных Значение Описание
данные-исключить-невидимый правда | ложь Указывает, следует ли исключать невидимых дочерних элементов при назначении округленных уголки
дата-мини правда | ложь Указывает, должна ли группа быть маленького или обычного размера.
тема данных буква (a-z) Указывает цвет темы контрольной группы
тип данных горизонтальный | вертикальный Указывает, должна ли группа располагаться горизонтально или вертикально отображается

Dialog

Контейнер с data-dialog=»true».

Атрибут данных Значение Описание
кнопка закрытия данных слева | право | нет Указывает положение кнопки закрытия
данные-кнопка-текст какой-то текст Задает текст для кнопки закрытия
данные уголки правда | ложь Указывает, должны ли диалоговые окна иметь закругленные углы или нет
кэш-памяти данных правда | ложь Указывает, следует ли очищать кеш DOM jQuery для отдельных страниц.
(если установлено значение true, вам нужно позаботиться о том, чтобы самостоятельно управлять DOM и тестировать полностью на всех мобильных устройствах)
тема наложения данных буква (a-z) Задает цвет наложения (фона) страницы диалога
тема данных буква (a-z) Задает цвет темы страницы диалога
название данных какой-то текст Указывает заголовок страницы диалога

Расширение

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

Data-attribute Значение Описание
расширение данных правда | ложь Если установлено значение «true», (по умолчанию) jQuery Mobile автоматически стилизует страницу, что делает его пригодным для мобильных устройств. Если установлено значение «false», фреймворк не будет стиль страницы  
данные-ajax правда | ложь Указывает, следует ли загружать страницы через ajax или нет

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

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

Field Container

Устарело в версии 1.4 и будет удалено в 1.5. Использовать. Контейнер с data-role=»fieldcontain» вокруг пары элементов метка/форма.

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

Контейнер с data-role=»header» или data-role=»footer» вместе с атрибут data-position=»fixed».

Атрибут данных Значение Описание
данные-отключить-масштабирование страницы правда | ложь Указывает, может ли пользователь масштабировать/масштабировать страницу или нет
данные-полноэкранный режим правда | ложь Указывает, что панели инструментов всегда должны располагаться вверху и/или внизу
данные-нажатие-переключение правда | ложь Указывает, может ли пользователь включать панель инструментов. нажимает/щелкает или нет
передача данных слайд | исчезать | нет Определяет эффект перехода при касании/щелчке
заполнение страницы обновления данных правда | ложь Указывает отступы вверху и внизу страницы, которые будут обновляться при изменении размера, переходе и «обновить макет» события (jQuery Mobile всегда обновляет заполнение для события «pageshow»)
данные-видимые-на-странице-показать правда | ложь Указывает видимость панели инструментов при отображении родительской страницы

Перекидной тумблер

с ролью данных «flipswitch»:

Атрибут данных Значение Описание
дата-мини правда | ложь Указывает, должен ли коммутатор быть маленького или обычного размера.
текстовые данные какой-то текст Задает текст «вкл.» на флип-переключателе (по умолчанию «вкл.»)
данные вне текста какой-то текст Задает текст «выкл.» на флип-переключателе (по умолчанию «Выкл.»)

Нижний колонтитул

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

Атрибут данных Значение Описание
идентификатор данных какой-то текст Задает уникальный идентификатор. Требуется для постоянных нижних колонтитулов
данные-позиция встроенный | исправлено Указывает, должен ли нижний колонтитул быть встроенным в содержимое страницы или оставаться расположен внизу
полноэкранные данные правда | ложь Указывает, должен ли нижний колонтитул всегда располагаться внизу и над страницей. содержимое (слегка просвечивается) или нет
тема данных буква (a-z) Указывает цвет темы нижнего колонтитула

Примечание: Чтобы включить полноэкранное положение, используйте data-position=»fixed», а затем добавьте к элементу атрибут data-fullscreen.

Заголовок

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

Атрибут данных Значение Описание
идентификатор данных текст Задает уникальный идентификатор. Требуется для постоянных заголовков
данные-позиция встроенный | исправлено Указывает, должен ли заголовок быть встроенным в содержимое страницы или оставаться позиционируется на вершине
полноэкранные данные правда | ложь Указывает, должен ли заголовок всегда располагаться вверху и над страницей. содержание (слегка просвечивается) или нет
тема данных буква (a-z) Указывает цвет темы заголовка

Примечание: Чтобы включить полноэкранное положение, используйте data-position=»fixed», а затем добавьте к элементу атрибут data-fullscreen.

Вводы

Вводы с type=»text|search|etc.» или текстовые элементы.

.
Атрибут данных Значение Описание
кнопка очистки данных правда | ложь Указывает, должна ли ввод иметь кнопку «очистить».
data-clear-btn-text текст Задает текст для кнопки «очистить». По умолчанию используется «открытый текст»
дата-мини правда | ложь Указывает, должен ли ввод быть маленького или обычного размера
роль данных нет Запрещает jQuery Mobile стилизовать ввод/текстовые области как кнопки
тема данных письмо (a-z) Задает цвет темы поля ввода

Ссылка

Все ссылки.

Атрибут данных Значение Описание
данные-ajax правда | ложь Указывает, следует ли загружать страницы через ajax для улучшения взаимодействия с пользователем и переходы. Если установлено значение false, jQuery Mobile будет выполнять обычный запрос страницы.
направление данных реверс Анимация обратного перехода (только для страницы или диалога)
кэш-памяти данных правда | ложь Указывает, следует ли очищать кеш DOM jQuery для отдельных страниц. (если установлено значение true, вам нужно позаботиться о том, чтобы самостоятельно управлять DOM и тестировать полностью на всех мобильных устройствах)
предварительная выборка данных правда | ложь Указывает, следует ли выполнять предварительную выборку страниц в DOM, чтобы они были доступны когда пользователь посещает их
данные-отн. назад | диалог | внешний | всплывающее окно Указывает параметр поведения ссылки. Назад — перемещение на один шаг назад в истории. Диалог — открывает ссылку как диалоговое окно, не отслеживаемое в истории. Внешний — для привязки к другому домену. Popup — открывает всплывающее окно.
передача данных фейд | флип | поток | поп | слайд | слайд вниз | исчезновение слайдов | слайд вверх | очередь | нет Указывает, как переходить с одной страницы на другую. Смотрите наши Глава «JQuery Mobile Transitions».
данные-позиция-до происхождение | селектор jQuery | окно Указывает положение всплывающих окон. Происхождение — по умолчанию. Позиции всплывающее окно над ссылкой, которая его открывает. Селектор jQuery — позиционирует всплывающее окно над указанный элемент. Окно — размещает всплывающее окно в середине окна. экран.

Список

    или
      с data-role=»listview».

      Атрибут данных Значение Описание
      данные-авторазделители правда | ложь Указывает, следует ли автоматически разделять элементы списка или нет
      тема подсчета данных буква (a-z) Определяет цвет темы пузырькового счетчика
      тема-разделителя данных буква (a-z) Задает цвет темы разделителя списка
      фильтр данных правда | ложь Указывает, добавлять ли поле поиска в список или нет
      фильтр данных-заполнитель какой-то текст Устарело в версии 1.4. Вместо этого используйте атрибут заполнителя HTML. Задает текст внутри поля поиска. По умолчанию «Фильтровать элементы…»
      тема фильтра данных буква (a-z) Указывает цвет темы фильтра поиска
      значок данных Иконки Артикул Задает значок списка
      вставка данных правда | ложь Указывает, должен ли список иметь закругленный стиль. углы и какой-то запас или нет
      значок разделения данных Иконки Артикул Указывает значок сплит-кнопки. По умолчанию «стрелка-r»
      тема разделения данных буква (a-z) Определяет цвет темы кнопки разделения
      тема данных буква (a-z) Указывает цвет темы списка

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

    • внутри
        или
          с data-role=»listview».

          Атрибут данных Значение Описание
          data-filtertext какой-то текст Задает текст для поиска при фильтрации элементов. Затем этот текст будет отфильтровано вместо фактического текста элемента списка
          значок данных Справочник по значкам Задает значок элемента списка
          роль данных список-разделитель Задает разделитель для элементов списка
          тема данных письмо (a-z) Задает цвет темы элемента списка

          Примечание: Атрибут data-icon работает только с элементами списка с ссылки.

          Navbar

          Элементы

        • внутри контейнера с data-role=»navbar».

          Атрибут данных Значение Описание
          значок данных Иконки Артикул Задает значок элемента списка
          значок данных осталось | право | топ | дно | неттекст Указывает положение значка

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

          Страница

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

          Атрибут данных Значение Описание
          кэш-памяти данных правда | ложь Указывает, следует ли очищать кеш DOM jQuery для отдельных страниц. (если установлено значение true, вам нужно позаботиться о том, чтобы самостоятельно управлять DOM и тестировать полностью на всех мобильных устройствах)
          тема наложения данных письмо (a-z) Задает цвет наложения (фона) диалоговых страниц
          тема данных письмо (a-z) Указывает цвет темы страницы
          название данных какой-то текст Указывает заголовок страницы
          URL-адрес данных адрес Значение для обновления URL-адреса вместо URL-адреса, используемого для запроса страницы

          Popup

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

          Атрибут данных Значение Описание
          данные уголки правда | ложь Указывает, должны ли всплывающие окна иметь закругленные углы или нет.
          данные-отклонение правда | ложь Указывает, должно ли всплывающее окно закрываться щелчком за пределами всплывающее окно или нет
          история данных правда | ложь Указывает, должно ли всплывающее окно создавать элемент истории браузера при открыт. Если установлено значение false, он не будет создавать элемент истории и не будет закрывается с помощью кнопки «Назад» в браузере
          тема наложения данных письмо (a-z) Определяет наложение (фон) цвет всплывающего окна. По умолчанию прозрачный фон (нет).
          тень данных правда | ложь Указывает, должны ли всплывающие окна иметь тени или нет.
          тема данных письмо (a-z) Определяет цвет темы всплывающего окна. По умолчанию унаследовано, установлено «none» всплывающее окно становится прозрачным
          допуск данных 30, 15, 30, 15 Задает расстояние от краев окна (сверху, справа, снизу, слева)

          Якорь с data-rel=»popup»:

          Атрибут данных Значение Описание
          данные-позиция-до происхождение | селектор jQuery | окно Указывает положение всплывающих окон. Происхождение — по умолчанию. Позиции всплывающее окно над ссылкой, которая его открывает. Селектор jQuery — позиционирует всплывающее окно над указанный элемент. Окно — размещает всплывающее окно в середине окна. экран.
          данные-отн. всплывающее окно Для открытия всплывающего окна
          передача данных исчезать | флип | поток | поп | слайд | слайд вниз | исчезновение слайдов | слайд вверх | очередь | нет Указывает, как переходить с одной страницы на другую. Смотрите наши Глава «JQuery Mobile Transitions».

          Радиокнопка

          Пары меток и входов с type=»radio».

          Атрибут данных Значение Описание
          дата-мини правда | ложь Указывает, должна ли кнопка быть маленького или обычного размера.
          роль данных нет Запрещает jQuery Mobile стилизовать радиокнопки как расширенные кнопки
          тема данных буква (a-z) Указывает цвет темы переключателя

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

          Выбрать

          Все элементы