Примечание: .buttonMarkup() устарела с jQuery Mobile 1.4.0 и будет удалена в 1.5.0. Теперь вы можете назначить полный набор параметров стилей кнопок вашим button или a элементам, просто добавив классы.
Переход к стилям на основе классов
Следующие моменты помогут вам перейти от стилей кнопок на основе атрибутов данных к стилям на основе классов:
- При использовании иконок всегда необходимо указывать класс для позиции иконки вместе с классом самой иконки, так как стандартной позиции иконки больше нет. В примере ниже класс
ui-btn-icon-left добавлен, чтобы убедиться, что иконка (ui-icon-arrow-r) будет отображаться. <a href="http://example.com/" class="ui-btn ui-icon-arrow-r ui-btn-icon-left ui-corner-all ui-shadow ui-btn-inline">Example</a>
- Хотя атрибуты данных, связанные со стилями, устарели, атрибуты данных, связанные с поведением ссылок, остаются неизменными. В примере ниже кнопка стилизуется с помощью классов, но атрибуты данных, связанные с ссылками, сохранены.
<a href="/" data-rel="external" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-home ui-btn-icon-left">Home</a>
- В период устаревания не рекомендуется смешивать стили на основе атрибутов данных и стили на основе классов.
Разметка кнопок
Вы можете использовать .buttonMarkup() для стилизации любого элемента как привлекательной и удобной кнопки на мобильном устройстве. Это вспомогательная функция, позволяющая управлять классами, связанными со стилизацией кнопок. Для каждого элемента в наборе сопоставленных элементов эта функция преобразует параметр options в список классов, которые будут применены к элементу, сохраняя при этом существующие классы элемента, не связанные со стилизацией кнопок. Вы также можете установить параметр overwriteClasses в значение true для повышения производительности. Когда overwriteClasses установлено в значение true, функция отбрасывает существующие классы и применяет классы, соответствующие предоставленным параметрам.
Автоинициализация
Фреймворк автоматически применяет стили кнопок к якорям, которые имеют атрибут data-role="button", а также к элементам button, якорям, содержащимся непосредственно в панелях и виджетах controlgroup. Вы можете указать параметры стилей кнопок через атрибуты данных, которые вы добавляете к якорю или элементу button. Атрибут данных, соответствующий каждому параметру .buttonMarkup(), описан в разделе параметры .buttonMarkup(). Пример ниже демонстрирует необходимую разметку для кнопки на основе якоря.
<a href="index.html" data-role="button">Link button</a>
Создает эту кнопку на основе якоря:
Кнопка на основе кнопки:
.buttonMarkup() также автоматически улучшает элементы button, такие как элемент ниже:
<button>Button element</button>
Внешний вид отключения
Вы можете стилизовать якорь как отключенный, добавив класс ui-state-disabled.
Примечание: Невозможно «отключить» якоря. Класс ui-state-disabled просто добавляет стили, чтобы якорь выглядел отключенным. Он не предоставляет функциональности, эквивалентной атрибуту disabled кнопки формы. Возможность следовать по якорю методами навигации, не связанными с указательным устройством, всё ещё сохраняется.
<a href="index.html" data-role="button" class="ui-state-disabled">Link button</a>
Создает кнопку на основе якоря со стилем отключения:
В случае с элементами button вы должны применить класс ui-state-disabled, когда вы установите атрибут button элемента disabled.
// Toggle the class ui-state-disabled in conjunction with modifying the value
// of the button element's "disabled" property
$( "button#myButton" )
.prop( "disabled", isDisabled )
.toggleClass( "ui-state-disabled", isDisabled );
Кнопки в строку
По умолчанию все кнопки в основном содержимом стилизованы как блочные элементы, поэтому они заполняют всю ширину экрана:
Если у вас несколько кнопок, которые должны располагаться рядом в одной строке, добавьте атрибут data-inline="true" к каждой кнопке. Это позволит стилизовать кнопки так, чтобы они занимали ширину своего содержимого, и разместить кнопки в одной строке.
<a href="index.html" data-role="button" data-inline="true">Cancel</a>
<a href="index.html" data-role="button" data-inline="true" data-theme="b">Save</a>
Если вы хотите, чтобы кнопки располагались рядом, но занимали всю ширину экрана, вы можете использовать сетки колонок содержимого, чтобы разместить обычные кнопки полной ширины в 2 или 3 столбцах.
Мини-версия
Для более компактной версии, полезной в инструментальных панелях и узких местах, добавьте атрибут data-mini="true" к кнопке, чтобы создать мини-версию.
<a href="index.html" data-role="button" data-mini="true">Link button</a>
Это создаст кнопку, которая не так высока, как стандартная версия, и имеет меньший размер текста.
Добавление иконок в кнопки
Фреймворк jQuery Mobile включает в себя набор наиболее часто используемых иконок для мобильных приложений. Для минимизации размера загрузки jQuery Mobile включает в себя один спрайт белой иконки и автоматически добавляет полупрозрачный черный круг за иконкой, чтобы обеспечить хороший контраст на любом цвете фона.
Иконку можно добавить в кнопку, добавив атрибут data-icon в якорь, который указывает иконку для отображения. Например:
<a href="index.html" data-role="button" data-icon="delete">Delete</a>
Набор иконок
Следующие атрибуты data-icon могут быть использованы для создания отображаемых ниже иконок:
Позиционирование иконок
По умолчанию все иконки в кнопках размещаются слева от текста кнопки.
Этот параметр по умолчанию можно изменить, используя атрибут data-iconpos для размещения иконки справа, сверху (верх) или снизу (низ) от текста. Например:
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>
Вы также можете создать кнопку только с иконкой, установив атрибут data-iconpos в значение notext. Плагин кнопки скроет текст на экране, но добавит его как атрибут title к ссылке, чтобы предоставить контекст для экранных читателей и устройств, поддерживающих всплывающие подсказки. Например, заменив data-iconpos="right" в предыдущем примере на data-iconpos="notext".
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
Создаёт эту кнопку только с иконкой:
Миниатюрные и в строку
Атрибуты миниатюрной и в строку могут быть добавлены для создания более компактных кнопок:
Пользовательские иконки
Для использования пользовательских иконок укажите значение data-icon с уникальным именем, как myapp-email, и плагин кнопки сгенерирует класс, добавив префикс ui-icon- к значению data-icon и применит его к кнопке: ui-icon-myapp-email.
Затем вы можете написать правило CSS в своём стиле, которое нацелено на класс ui-icon-myapp-email:after, чтобы указать исходный источник иконки фона. Фреймворк содержит встроенный тест SVG (в формате data URI) и добавляет класс ui-nosvg к элементу html, если это не поддерживается. Если вы используете SVG-иконки, вы можете использовать этот класс, чтобы обеспечить резервное копирование для внешних PNG-иконок.
.ui-icon-myapp-email:after {
background-image: url('data:image/svg+xml;...');
}
.ui-nosvg .ui-icon-myapp-email:after {
background-image: url( "app-icon-email.png" );
} Иконки и темы
Полупрозрачный черный круг за белой иконкой обеспечивает хороший контраст на любом цвете фона, поэтому он хорошо работает с системой тем jQuery Mobile. Ниже приведены примеры одних и тех же иконок, расположенных поверх различных цветовых палитр с тематическими кнопками.
Пример иконки
Группировка кнопок
Иногда вам может потребоваться визуально сгруппировать набор кнопок, чтобы сформировать единый блок, который выглядит содержательно, как компонент навигации. Для достижения этого эффекта оберните набор кнопок в контейнер с атрибутом data-role="controlgroup" - фреймворк создаст вертикальную группу кнопок, удалит все отступы и тени между кнопками и округлит только первую и последнюю кнопки набора, чтобы создать эффект группировки.
<div data-role="controlgroup">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
</div>
По умолчанию сгруппированные кнопки представляются в виде вертикального списка:
Добавив атрибут data-type="horizontal" к контейнеру controlgroup, можно переключиться на горизонтальную группу, которая размещает кнопки рядом и устанавливает ширину только достаточную для размещения содержимого. (Обратите внимание, что эти элементы могут переходить на несколько строк, если количество кнопок или общая длина текста слишком велика для экрана.)
Метки
Поскольку элемент label будет связан с каждой отдельной кнопкой input или button, и будет скрыт для целей форматирования, мы рекомендуем обернуть кнопки в элемент fieldset, у которого есть атрибут legend, который служит объединённой меткой для группы. Использование label в качестве обертки вокруг входного элемента предотвращает его скрытие фреймворком, поэтому вам нужно использовать атрибут for для связывания label с входным элементом.
Тематизация элементов, стилизованных как кнопки
