Атрибуты 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-inline | true | false | Указывает, следует ли кнопка быть инлайн или нет |
| data-mini | true | false | Указывает, следует ли кнопка быть маленькой или обычного размера |
| data-shadow | true | false | Указывает, следует ли кнопка иметь тени или нет |
| data-theme | letter (a-z) | Определяет тему цвет кнопки |
Чтобы сгруппировать несколько кнопок, используйте контейнер с data-role="controlgroup" атрибут вместе с data-type="horizontal|vertical" , чтобы указать , следует ли кнопки группы по горизонтали или по вертикали.
флажок
Пары меток и входов с type="checkbox" .
| Data-атрибут | Стоимость | Описание |
|---|---|---|
| data-mini | true | false | Определяет, должен ли флажок быть небольшого или обычного размера |
| data-role | none | Предотвращает 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-mini | true | 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-mini | true | 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-mini | true | false | Указывает, следует ли группа быть небольшого или обычного размера |
| data-theme | letter (a-z) | Определяет тему цвет controlgroup |
| data-type | horizontal | vertical | Указывает, должен ли быть по горизонтали или по вертикали отображается группа |
диалог
Контейнер с data-dialog="true" .
| Data-атрибут | Стоимость | Описание |
|---|---|---|
| data-close-btn | left | right | none | Определяет положение кнопки закрытия |
| data-close-btn-text | sometext | Задает текст для кнопки закрытия |
| data-corners | true | false | Определяет, должен ли диалог иметь закругленные углы или нет |
| data-dom-cache | true | 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-fullscreen | true | 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-mini | true | false | Указывает, должен ли переключатель быть небольшой или обычного размера |
| data-on-text | sometext | Определяет "на" текст на переключателе флип ( по умолчанию "On" ) |
| data-off-text | sometext | Определяет "выключено" текст на коммутаторе флип ( по умолчанию "Off" ) |
нижний колонтитул
Контейнер с data-role="footer" .
| Data-атрибут | Стоимость | Описание |
|---|---|---|
| data-id | sometext | Указывает уникальный идентификатор. Требуется для постоянных колонтитулы |
| data-position | inline | fixed | Определяет, должен ли быть сноска рядный с содержанием страницы или остаются расположены в нижней части |
| data-fullscreen | true | false | Определяет, будет ли футер всегда должен располагаться в нижней части и над содержанием страницы (немного прозрачный) или нет |
| data-theme | letter (a-z) | Определяет тему цвет нижнего колонтитула |
Примечание: Чтобы включить полноэкранное позицию, использование data-position="fixed" , а затем добавить data-fullscreen атрибут к элементу.
заголовок
Контейнер с data-role="header" .
| Data-атрибут | Стоимость | Описание |
|---|---|---|
| data-id | sometext | Указывает уникальный идентификатор. Требуется для постоянных заголовков |
| data-position | inline | fixed | Определяет, должен ли заголовок быть инлайн с содержанием страницы или остаются расположены в верхней |
| data-fullscreen | true | 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-btn | true | false | Определяет , должен ли вход иметь "clear" кнопку |
| data-clear-btn-text | text | Задает текст для кнопки "Очистить". По умолчанию это "clear text" |
| data-mini | true | false | Определяет, должен ли вход быть небольшого или обычного размера |
| data-role | none | Предотвращает JQuery Mobile в стиле входов / прокручиваемым как кнопки |
| data-theme | letter (a-z) | Определяет цвет темы поля ввода |
Ссылка
Все ссылки.
| Data-атрибут | Стоимость | Описание |
|---|---|---|
| data-ajax | true | false | Указывает, следует ли загружать страницы через AJAX для улучшения пользовательского опыта и переходов. Если установлено значение ложь, JQuery Mobile будет делать запрос на нормальную страницу. |
| data-direction | reverse | Обратный переход анимации (только для страницы или диалогового окна) |
| data-dom-cache | true | false | Указывает, является ли очистить кэш Jquery DOM или не для отдельных страниц (если установлено верно, то вам необходимо позаботиться, чтобы управлять DOM самостоятельно и тщательно тест на всех мобильных устройствах) |
| data-prefetch | true | false | Указывает, следует ли упреждением страниц в DOM, так что они будут доступны, когда пользователь посещает их |
| data-rel | back | 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-autodividers | true | false | Указывает, следует ли автоматически разделять элементы списка или нет |
| data-count-theme | letter (a-z) | Определяет цвет темы подсчета пузыря |
| data-divider-theme | letter (a-z) | Определяет цвет темы из списка делителя |
| data-filter | true | false | Указывает, следует ли добавить окно поиска в списке или нет |
| data-filter-placeholder | sometext | Устаревшее в версии 1.4. Используйте атрибут HTML - заполнитель вместо. Определяет текст внутри окна поиска. По умолчанию это "элементы фильтра ..." |
| data-filter-theme | letter (a-z) | Определяет тему цвет фильтра поиска |
| data-icon | Icons Reference | Задает значок списка |
| data-inset | true | 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-role | list-divider | Задает разделитель для элементов списка |
| data-theme | letter (a-z) | Определяет тему цвет элемента списка |
Примечание:-значок данных атрибутов только работы по элементам списка со ссылками.
Navbar
<li> элементы внутри контейнера с data-role="navbar" .
| Data-атрибут | Стоимость | Описание |
|---|---|---|
| data-icon | Icons Reference | Определяет пиктограмму элемента списка |
| data-iconpos | left | right | top | bottom | notext | Задает положение значка |
Navbars наследуют тему-образец из их родительского контейнера. Это не представляется возможным установить атрибут данных тему в навигационной панели. Атрибут данных темы могут быть установлены индивидуально для каждой ссылки внутри навигационной панели.
страница
Контейнер с data-role="page" .
| Data-атрибут | Стоимость | Описание |
|---|---|---|
| data-dom-cache | true | false | Указывает, является ли очистить кэш Jquery DOM или не для отдельных страниц (если установлено верно, то вам необходимо позаботиться, чтобы управлять DOM самостоятельно и тщательно тест на всех мобильных устройствах) |
| data-overlay-theme | letter (a-z) | Определяет цвет наложения (фон) диалоговых страниц |
| data-theme | letter (a-z) | Определяет цвет темы страницы |
| data-title | sometext | Определяет заголовок страницы |
| data-url | url | Значение для обновления 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-tolerance | 30, 15, 30, 15 | Определяет расстояние от краев окна ( top, right, bottom, left ) |
Дюбель с data-rel="popup" :
| Data-атрибут | Стоимость | Описание |
|---|---|---|
| data-position-to | origin | jQuery selector | window | Задает позицию всплывающих окнах. Первый - по умолчанию. Позиции всплывающего окна по ссылке, которая открывает его. селектор JQuery - позиционирует всплывающее окно над указанным элементом. Окно - позиционирует всплывающее окно в середине экрана окна. |
| data-rel | popup | Для открытия всплывающего окна |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | Определяет способ перехода от одной страницы к другой. Смотрите наш JQuery Mobile Transitions главу. |
Переключатель
Пары меток и входов с type="radio" .
| Data-атрибут | Стоимость | Описание |
|---|---|---|
| data-mini | true | false | Указывает, следует ли кнопка быть маленькой или обычного размера |
| data-role | none | Предотвращает JQuery Mobile в стиле radiobuttons в виде улучшенных кнопок |
| data-theme | letter (a-z) | Определяет тему цвет кнопки радио |
Группировка нескольких радио - кнопок, с помощью data-role="controlgroup" вместе с data-type="horizontal|vertical" , чтобы указать , следует ли сгруппировать кнопки по горизонтали или по вертикали.
Выбрать
Все <select> элементы.
| Data-атрибут | Стоимость | Описание |
|---|---|---|
| data-icon | Icons Reference | Определяет значок выбора элемента. По умолчанию "arrow-d" |
| data-iconpos | left | right | top | bottom | notext | Задает положение значка |
| data-inline | true | false | Определяет, следует ли выбрать элемент быть инлайн или нет |
| data-mini | true | false | Указывает, является ли выбор должен быть небольшого или обычного размера |
| data-native-menu | true | false | Если установлено значение ложно, то он использует собственные меню выбора JQuery (рекомендуется, если вы хотите, чтобы выбрать меню для отображения одинаково на всех мобильных устройствах) |
| data-overlay-theme | letter (a-z) | Определяет цвет темы собственного пользовательского меню выбора JQuery в (используется вместе с data-native-menu="false" ) |
| data-placeholder | true | false | Может быть установлен на <option> элемент неродного выберите |
| data-role | none | Предотвращает JQuery Mobile для выбора стиля элементов, как кнопки |
| data-theme | letter (a-z) | Определяет тему цвет выбора элемента |
Для группового выбора нескольких элементов, используйте data-role="controlgroup" вместе с data-type="horizontal|vertical" , чтобы указать , следует ли сгруппировать элементы по горизонтали или по вертикали.
ползунок
Входы с type="range" .
| Data-атрибут | Стоимость | Описание |
|---|---|---|
| data-highlight | true | false | Определяет, должно ли быть выделены или нет дорожка ползунка |
| data-mini | true | false | Определяет, должен ли быть бегунок малого или обычного размера |
| data-role | none | Предотвращает JQuery Mobile в стиле рычажков управления, как кнопки |
| data-theme | letter (a-z) | Определяет тему цвет бегунка (вход, ручка и дорожки) |
| data-track-theme | letter (a-z) | Определяет тему цвет дорожки ползунка |