Кнопки jQuery Mobile
Мобильные приложения построены на простоте движений касания объектов, которые Вы хотели бы вывести на экран.
Создание Кнопки в jQuery Mobile
Кнопка в jQuery Mobile может быть создана тремя способами:
- Использование элемента <button>
- Использование элемента <input>
- Использование элемента <a> с data-role="button"
Кнопки в jQuery Mobile автоматически стилизуются, что делает их привлекательными и применимыми на мобильных устройствах. Мы рекомендуем, чтобы Вы использовали элемент <a> с data-role="button", чтобы связывать между собой страницы, и элементы <input> или <button> для отправки формы.
Кнопки навигации
Чтобы сделать ссылки между страницами с помощью кнопок, используйте элемент <a> с атрибутом data-role="button":
Встроенные Кнопки
По умолчанию кнопки принимают полную ширину экрана. Если Вы хотите создать кнопку, которая по ширине такая же, как ее содержимое, или если Вы хотите, чтобы две или больше кнопок появились рядом, добавьте data-inline="true":
Сгруппированные Кнопки
jQuery Mobile обеспечивает легкий способ, чтобы собрать кнопки в группу.
Используйте атрибут data-role="controlgroup" вместе с data-type="horizontal|vertical", чтобы указать, группировать кнопки горизонтально или вертикально:
По умолчанию сгруппированные кнопки группируются вертикально без полей и пространства между ними. И только у первой и последней кнопки скругленные углы, что создает приятный вид при группировке кнопок друг с другом.
Кнопки "Назад"
Чтобы создать Кнопку "Назад", используйте атрибут data-rel="back" (это игнорирует значение href ссылки):
Другие Атрибуты data-* Для Кнопок
| Атрибут | Значение | Описание | Пример |
|---|---|---|---|
| data-corners | true | false | Указывает, должна ли кнопка иметь закругленные углы или нет | Показать |
| data-mini | true | false | Указывает, должна ли кнопка быть небольшой | Показать |
| data-shadow | true | false | Указывает, должна ли кнопка иметь тени или нет | Показать |
Следующая статья демонстрирует, как присоединить значки к Вашим кнопкам.
