Форум | Последние учебники веб-разработки
 

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


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

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

Для получения контрольного списка ниже, bold value определяет значение по умолчанию.


кнопка

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

Data-атрибут Стоимость Описание
data-corners true | false Указывает, следует ли кнопка имеют закругленные углы или нет
data-icon Icons Reference Определяет значок кнопки. По умолчанию нет значка
data-iconpos left | right | top | bottom | notext Задает положение значка
data-iconshadow true | false Определяет, следует ли значок кнопки имеют тени или нет
data-inlinetrue | false Указывает, следует ли кнопка быть инлайн или нет
data-minitrue | false Указывает, следует ли кнопка быть маленькой или обычного размера
data-shadow true | false Указывает, следует ли кнопка иметь тени или нет
data-theme letter (a-z) Определяет тему цвет кнопки

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


флажок

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

Data-атрибут Стоимость Описание
data-minitrue | false Определяет, должен ли флажок быть небольшого или обычного размера
data-rolenone Предотвращает JQuery Mobile для галочки типа как кнопки
data-theme letter (a-z) Определяет тему цвет флажка

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


разборный

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

Data-атрибут Стоимость Описание
data-collapsed true | false Определяет, должно ли содержание быть закрыты или расширены
data-collapsed-cue-text sometext  Указывает, какой-нибудь текст, чтобы обеспечить звуковую обратную связь для пользователей с программным обеспечением для чтения с экрана. По умолчанию "нажмите, чтобы свернуть содержимое".
data-collapsed-icon Icons Reference Определяет значок кнопки разборной. По умолчанию это "плюс"
data-content-theme letter (a-z) Определяет цвет темы складного содержания. Будет также добавить скругленные углы для складного содержания
data-expanded-cue-text sometext  Указывает, какой-нибудь текст, чтобы обеспечить звуковую обратную связь для пользователей с программным обеспечением для чтения с экрана. По умолчанию "нажмите, чтобы развернуть содержимое".
data-expanded-icon Icons Reference Определяет значок кнопки разборной, когда содержание расширяется. По умолчанию это "minus"
data-iconpos left | right | top | bottom Задает положение значка
data-inset true | false Указывает, следует ли кнопка складная быть стилизовано с закругленными углами и некоторым запасом или нет
data-minitrue | false Указывает, следует ли разборные кнопки быть небольшой или обычного размера
data-theme letter (a-z) Определяет тему цвет кнопки складного

Складывающийся набор

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

Data-атрибут Стоимость Описание
data-collapsed-icon Icons Reference Определяет значок кнопки разборной. По умолчанию это "плюс"
data-content-theme letter (a-z) Определяет цвет темы складного содержания
data-expanded-icon Icons Reference Определяет значок кнопки разборной, когда содержание расширяется. По умолчанию это "минус"
data-iconpos left | right | top | bottom | notext Задает положение значка
data-inset true | false Определяет, будут ли collapsibles должны быть стилизовано с закругленными углами и некоторым запасом или нет
data-minitrue | false Указывает, следует ли разборные кнопки быть небольшой или обычного размера
data-theme letter (a-z) Определяет цвет темы складного набора

содержание

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

Data-атрибут Стоимость Описание
data-theme letter (a-z) Определяет цвет темы содержания

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

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

Data-атрибут Стоимость Описание
data-exclude-invisible true | false Указывает, следует ли исключить невидимые дети при назначении закругленными углами
data-minitrue | false Указывает, следует ли группа быть небольшого или обычного размера
data-theme letter (a-z) Определяет тему цвет controlgroup
data-typehorizontal | vertical Указывает, должен ли быть по горизонтали или по вертикали отображается группа

диалог

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

Data-атрибут Стоимость Описание
data-close-btn left | right | none Определяет положение кнопки закрытия
data-close-btn-text sometext Задает текст для кнопки закрытия
data-corners true | false  Определяет, должен ли диалог иметь закругленные углы или нет
data-dom-cachetrue | false Указывает, является ли очистить кэш Jquery DOM или не для отдельных страниц (если установлено верно, то вам необходимо позаботиться, чтобы управлять DOM самостоятельно и тщательно тест на всех мобильных устройствах)
data-overlay-theme letter (a-z) Определяет цвет наложения (фон) диалогового страницы
data-theme letter (a-z) Определяет тему цвет страницы диалога
data-title sometext Определяет заголовок страницы диалога

усиление

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

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

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

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


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

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


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

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

Data-атрибут Стоимость Описание
data-disable-page-zoom true | false Указывает, является ли пользователь имеет возможность масштабирования / масштаба страницы или нет
data-fullscreentrue | false Задает панели инструментов, чтобы всегда быть расположены в верхней и / или нижней части
data-tap-toggle true | false Указывает, является ли пользователь имеет возможность переключения панели инструментов-видимость на кранами / кликов или нет
data-transition slide | fade | none Определяет эффект перехода, когда происходит нажатие / клик
data-update-page-padding true | false Определяет заполнение обоих верхней и нижней части страницы , чтобы быть в курсе изменения размера, перехода и "updatelayout" событий (JQuery Mobile всегда обновляет отступ на "pageshow" событие)
data-visible-on-page-show true | false Указывает на панели инструментов видимости, когда родительская страница отображается

Флип тумблер

<input type="checkbox"> с данными-роли "flipswitch" :

Data-атрибут Стоимость Описание
data-minitrue | false Указывает, должен ли переключатель быть небольшой или обычного размера
data-on-text sometext Определяет "на" текст на переключателе флип ( по умолчанию "On" )
data-off-text sometext Определяет "выключено" текст на коммутаторе флип ( по умолчанию "Off" )

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

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

Data-атрибут Стоимость Описание
data-id sometext Указывает уникальный идентификатор. Требуется для постоянных колонтитулы
data-position inline | fixed Определяет, должен ли быть сноска рядный с содержанием страницы или остаются расположены в нижней части
data-fullscreentrue | false Определяет, будет ли футер всегда должен располагаться в нижней части и над содержанием страницы (немного прозрачный) или нет
data-theme letter (a-z) Определяет тему цвет нижнего колонтитула

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


заголовок

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

Data-атрибут Стоимость Описание
data-id sometext Указывает уникальный идентификатор. Требуется для постоянных заголовков
data-position inline | fixed Определяет, должен ли заголовок быть инлайн с содержанием страницы или остаются расположены в верхней
data-fullscreentrue | false Указывает ли заголовок всегда должен располагаться в верхней и над содержанием страницы (немного прозрачный) или нет
data-theme letter (a-z) Определяет цвет темы заголовка

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


входные

Входы с type="text|search|etc." и textarea elements type="text|search|etc." Или textarea elements области .

Data-атрибут Стоимость Описание
data-clear-btntrue | false Определяет , должен ли вход иметь "clear" кнопку
data-clear-btn-text text Задает текст для кнопки "Очистить". По умолчанию это "clear text"
data-minitrue | false Определяет, должен ли вход быть небольшого или обычного размера
data-rolenone Предотвращает JQuery Mobile в стиле входов / прокручиваемым как кнопки
data-theme letter (a-z)  Определяет цвет темы поля ввода

Ссылка

Все ссылки.

Data-атрибут Стоимость Описание
data-ajax true | false Указывает, следует ли загружать страницы через AJAX для улучшения пользовательского опыта и переходов. Если установлено значение ложь, JQuery Mobile будет делать запрос на нормальную страницу.
data-directionreverse Обратный переход анимации (только для страницы или диалогового окна)
data-dom-cachetrue | false Указывает, является ли очистить кэш Jquery DOM или не для отдельных страниц (если установлено верно, то вам необходимо позаботиться, чтобы управлять DOM самостоятельно и тщательно тест на всех мобильных устройствах)
data-prefetchtrue | false Указывает, следует ли упреждением страниц в DOM, так что они будут доступны, когда пользователь посещает их
data-relback | dialog | external | popup Задает опцию для того, как ссылка должна вести себя. Назад - перемещает один шаг назад в истории. Диалог - открывает ссылку как диалог, не отслеживается в истории. Внешняя - Для ссылки на другой домен. Popup - открывает всплывающее окно.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Определяет способ перехода от одной страницы к другой. Смотрите наш JQuery Mobile Transitions главу.
data-position-to origin | jQuery selector | window Задает позицию всплывающих окнах. Первый - по умолчанию. Позиции всплывающего окна по ссылке, которая открывает его. селектор JQuery - позиционирует всплывающее окно над указанным элементом. Окно - позиционирует всплывающее окно в середине экрана окна.

Список

<ol> или <ul> с data-role="listview" .

Data-атрибут Стоимость Описание
data-autodividerstrue | false Указывает, следует ли автоматически разделять элементы списка или нет
data-count-theme letter (a-z) Определяет цвет темы подсчета пузыря
data-divider-theme letter (a-z) Определяет цвет темы из списка делителя
data-filtertrue | false Указывает, следует ли добавить окно поиска в списке или нет
data-filter-placeholder sometext Устаревшее в версии 1.4. Используйте атрибут HTML - заполнитель вместо. Определяет текст внутри окна поиска. По умолчанию это "элементы фильтра ..."
data-filter-theme letter (a-z) Определяет тему цвет фильтра поиска
data-icon Icons Reference Задает значок списка
data-insettrue | false Определяет, должен ли этот список быть стилизовано с закругленными углами и некоторым запасом или нет
data-split-icon Icons Reference Указывает значок кнопки разделения. По умолчанию "стрелка-р"
data-split-theme letter (a-z) Определяет тему цвет кнопки разделенного
data-theme letter (a-z) Определяет цвет темы из списка

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

<li> внутри <ol> или <ul> с data-role="listview" следует data-role="listview" .

Data-атрибут Стоимость Описание
data-filtertext sometext Задает текст для поиска при фильтрации элементов. Этот текст будет затем фильтруется вместо фактического текста элемента списка
data-icon Icons Reference Определяет пиктограмму элемента списка
data-rolelist-divider Задает разделитель для элементов списка
data-theme letter (a-z)  Определяет тему цвет элемента списка

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


Navbar

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

Data-атрибут Стоимость Описание
data-icon Icons Reference Определяет пиктограмму элемента списка
data-iconposleft | right | top | bottom | notext Задает положение значка

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


страница

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

Data-атрибут Стоимость Описание
data-dom-cachetrue | false Указывает, является ли очистить кэш Jquery DOM или не для отдельных страниц (если установлено верно, то вам необходимо позаботиться, чтобы управлять DOM самостоятельно и тщательно тест на всех мобильных устройствах)
data-overlay-theme letter (a-z)  Определяет цвет наложения (фон) диалоговых страниц
data-theme letter (a-z)  Определяет цвет темы страницы
data-title sometext Определяет заголовок страницы
data-urlurl Значение для обновления URL, вместо URL используется для запроса страницы

Выскакивать

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

Data-атрибут Стоимость Описание
data-corners true | false Определяет, следует ли всплывающее окно иметь закругленные углы или нет
data-dismissible true | false Указывает, является ли всплывающее окно должно быть закрыто щелчком мыши за пределами всплывающего окна или нет
data-history true | false Определяет, следует ли создать всплывающее окно из истории браузера при открытии. Если установлено значение ложь, это не создаст элемент истории, и тогда не будет закрывающейся с помощью кнопки браузера "Назад"
data-overlay-theme letter (a-z)  Определяет цвет наложения (фон) в всплывающем окне. По умолчанию является прозрачным фоном (нет).
data-shadow true | false Определяет, должен ли всплывающее окно иметь тени или нет
data-theme letter (a-z)  Определяет тему цвет всплывающего окна. По умолчанию наследуется, "none" не устанавливает всплывающее прозрачный
data-tolerance30, 15, 30, 15 Определяет расстояние от краев окна ( top, right, bottom, left )

Дюбель с data-rel="popup" :

Data-атрибут Стоимость Описание
data-position-to origin | jQuery selector | window Задает позицию всплывающих окнах. Первый - по умолчанию. Позиции всплывающего окна по ссылке, которая открывает его. селектор JQuery - позиционирует всплывающее окно над указанным элементом. Окно - позиционирует всплывающее окно в середине экрана окна.
data-relpopup Для открытия всплывающего окна
data-transitionfade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Определяет способ перехода от одной страницы к другой. Смотрите наш JQuery Mobile Transitions главу.

Переключатель

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

Data-атрибут Стоимость Описание
data-minitrue | false Указывает, следует ли кнопка быть маленькой или обычного размера
data-rolenone Предотвращает JQuery Mobile в стиле radiobuttons в виде улучшенных кнопок
data-theme letter (a-z) Определяет тему цвет кнопки радио

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


Выбрать

Все <select> элементы.

Data-атрибут Стоимость Описание
data-icon Icons Reference Определяет значок выбора элемента. По умолчанию "arrow-d"
data-iconposleft | right | top | bottom | notext Задает положение значка
data-inlinetrue | false Определяет, следует ли выбрать элемент быть инлайн или нет
data-minitrue | false Указывает, является ли выбор должен быть небольшого или обычного размера
data-native-menu true | false Если установлено значение ложно, то он использует собственные меню выбора JQuery (рекомендуется, если вы хотите, чтобы выбрать меню для отображения одинаково на всех мобильных устройствах)
data-overlay-theme letter (a-z) Определяет цвет темы собственного пользовательского меню выбора JQuery в (используется вместе с data-native-menu="false" )
data-placeholdertrue | false Может быть установлен на <option> элемент неродного выберите
data-rolenone Предотвращает JQuery Mobile для выбора стиля элементов, как кнопки
data-theme letter (a-z) Определяет тему цвет выбора элемента

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


ползунок

Входы с type="range" .

Data-атрибут Стоимость Описание
data-highlighttrue | false Определяет, должно ли быть выделены или нет дорожка ползунка
data-minitrue | false Определяет, должен ли быть бегунок малого или обычного размера
data-rolenone Предотвращает JQuery Mobile в стиле рычажков управления, как кнопки
data-theme letter (a-z) Определяет тему цвет бегунка (вход, ручка и дорожки)
data-track-theme letter (a-z) Определяет тему цвет дорожки ползунка